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

html
  font-family: 			Courier
  background-color: #{colorTwo}
  color: 						#{colorOne}

body
  margin:     3% 10% 0 10% 
  font-size:  20px
  text-align: left

h2
  font-family:    monaco, Consolas, monospace
  text-transform: uppercase

h3
  margin: 0.25em 0 0.25em 0

p
  margin: 0.4em 0 0.4em 0

a
  color: #{colorThree}

.title
  margin:    0 auto 0 auto
  font-size: 2em
  color:     #{colorThree}

.titleLink
  all:    unset 
  cursor: pointer

.title h1
  margin: 0.1em 0 0.1em 0

.htmx-indicator
  display: none

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

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

.content 
  display: flex

.column
  flex: 50%

.emptyReq
  height: 1%

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

.genButton
  width:            40%
  margin:           0 0 0.25em 0
  padding: 					0.75em 1.75em
  background-color: #{colorThree}
  color: 					  #{colorTwo}
  border-style:     none
  text-decoration:  none

.mainInput
  font-weight:				400
  font-size: 					1em
  max-width:          50%
  outline: 						none
  color: 							#{colorOne}
  background: 				#{colorTwo}
  margin: 						0.5em 0 1em 0
  border-style:				none none solid 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

.numberInput
  text-align:         center
  font-weight:				400
  font-size: 					1em
  width:              10%
  outline: 						none
  color: 							#{colorOne}
  background: 				#{colorTwo}
  margin: 						0.5em 0
  border-style:				none none solid 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

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

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

.genResult
  color: #{colorFour}

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

.shareNew
  margin-bottom: 2em

.requestNew
  margin-top: 1em

.requestedPw
  max-width: 85%

.resLink
  font-size: 0.75em

.validForm
  margin: 0.5em 0 0 0

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

  .content
    display: block

  .mainButton
    width: 80%

  .genButton
    width: 80%

  .mainInput
    width:      95% 
    max-width:  100%
    text-align: center

  .numberInput
    width: 25%

  .title
    margin:    8% auto 2% auto
    font-size: 3em
  
  .title h1
    margin-bottom: 0
  
  .requestedPw
    max-width: 100%

  .shareUtils 
    width: 100%