@colorOne:   #222323
@colorTwo:   #f0f6f0
@colorThree: #6D92AD
@colorFour:  #435F5D

html
  background-color: #{colorTwo}
  color: 						#{colorOne}

body
  font-family: 			Courier
  font-size:        20px
  text-align: 			left

p
  margin: 0.4em 0 0.4em 0

::placeholder
  color: #{colorOne}
  opacity: 1

.asciiCat
  margin:     2% 3% 0 0
  font-size:  1.2vw
  color:      #{colorFour}
  text-align: center

.content 
  margin: 0 15% 0 15% 

.emptyReq
  height: 1%

.mainButton
  padding: 					0.75em 1.75em
  background-color: #{colorThree}
  color: 					  #{colorTwo}
  border-style:     none
  text-decoration:  none

.mainInput
  font-weight:				400
  font-size: 					1em
  width:              50%
  outline: 						none
  color: 							#{colorOne}
  background: 				#{colorTwo}
  margin: 						1em 0
  border-style:				none none none none
  padding: 						0.4em 0
  box-sizing: 				border-box
  -webkit-box-sizing: border-box
  -moz-box-sizing: 		border-box
  -webkit-transition: all 0.1s ease-in-out
  -moz-transition: 		all 0.1s ease-in-out
  -ms-transition: 		all 0.1s ease-in-out
  -o-transition: 			all 0.1s ease-in-out
  transition: 				all 0.1s ease-in-out

.mainInput:focus
  border-bottom: 0.2em solid #{colorThree};

.mainInput:focus::placeholder
  color:   #{colorThree}
  opacity: 0.5

.pwResult
  font-size: 1.5em
  color: #{colorFour}

.pwUtils
  width:  75%

.shareNew
  margin-bottom: 2em

.title
  font-size: 2em
  color:     #{colorOne}
  text-decoration: none

.titleLink
  all:             unset 
  cursor:          pointer

.title h1
  margin: 0.1em 0 0.3em 0

@media only screen and (max-width : 768px)
  body
    text-align: center
    font-size: 16px

  .asciiCat
    display: none

  .mainInput
    width: 95% 
    text-align: center

  .title
    margin: 8% auto
    font-size: 3em

  .pwUtils 
    width: 100%