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

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

body
  margin:      1% auto 
  font-size:   20px
  font-weight: 150
  text-align:  left

header
  margin:     0 8% 0 0
  text-align: right

a 
  text-decoration: none

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}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button 
  -webkit-appearance: none
  margin: 0
input[type=number] 
  -moz-appearance: textfield

.main 
  margin: 1em auto
  max-width: 50%

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

.titleLink
  font-size:       unset
  cursor:          pointer
  font-weight:     100

.title h1
  margin: 0.1em 0 0.1em 0

.htmx-indicator
  display: none

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

.generators
  padding:          1em 0.5em 0.5em 1.5em
  background-color: #{colorTwo}
  box-shadow:       8px 8px 12px #ccc
  overflow-x:       scroll

.generators .numberInput
  background-color: #{colorTwo}

.generatorRadio
  margin: 0

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

.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

.genNew .numberInput
  margin: 0 0 0.5em 0

.genResult
  color: #{colorFour}

.requestedPw
  text-align:       center
  background-color: #333
  color:            #f0f6f0
  margin:           1.5em 0 2em 0
  padding:          0.5em 0.5em 0.5em 1.5em
  box-shadow:       8px 8px 12px #ccc

.pwResult
  margin:    0.25em 0 0.75em 0
  font-size: 1.5em
  color:     #f0f6f0

.pwResultCopy
  width: 1px
  overflow: hidden
  display: inline-block
  height: 1px
  color: rgba(255,255,255,0)

.shareNew
  padding:          0.5em 0.5em 0.5em 1.5em
  background-color: #{colorTwo}
  box-shadow:       8px 8px 12px #ccc
  margin:           1em 0 2em 0

.shareNew .mainInput
  background-color: #{colorTwo}

.shareNew .numberInput
  background-color: #{colorTwo}

.requestNew
  padding:          0.5em 0.5em 0.5em 1.5em
  background-color: #{colorTwo}
  box-shadow:       8px 8px 12px #ccc
  margin-bottom:    2em
  margin-top:       1em

.requestNew .mainInput
  background-color: #{colorTwo}

.resLink
  font-size: 0.8em

.validForm
  margin: 0

.radioLabel
  display:       flex
  align-items:   center
  border-radius: 100px
  margin:        0.3em 0
  padding:       0.3em 0.5em
  cursor:        pointer
  transition:    .3s

.radioLabel:hover, .radioLabel:focus-within 
  background: hsla(0, 0%, 80%, .14)

.radioInput
  position: fixed
  left: 0
  top: 0
  width: 1px
  height: 1px
  opacity: 0
  z-index: -1

.radioDesign
  width:         22px
  height:        22px
  border-radius: 100px
  background:    linear-gradient(to right bottom, #fff, #{colorThree})
  position:      relative

.radioDesign::before 
  content:       ''
  display:       inline-block
  width:         inherit
  height:        inherit
  border-radius: inherit
  background:    hsl(0, 0%, 90%)
  transform:     scale(1.1)
  transition:    .3s

.radioInput:checked+.radioDesign::before
  transform: scale(0)

.radioText
  margin-left:    14px
  letter-spacing: 3px
  transition:     .3s

.radioInput:checked~.radioText
  color: hsl(0, 0%, 40%)

.hidden
  display: none

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

  .header 
    margin: 0 2% 0 0

  .main
    max-width: 90%

  .mainButton
    width: 80%

  .generators
    font-size: 12px

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

  .numberInput
    width: 25%

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

  .pwResult
    font-size: 1.75em

  .shareUtils 
    width: 100%