@use "./base"
@use "./colors.sass" as c

.main
  justify-content: center
  align-items: center

.center-login-container
  display: flex
  flex-flow: column
  justify-content: center
  align-items: center
  width: min(100vw, 30rem)
  padding: max(1rem,3vw) 2rem
  height: 27rem
  box-shadow: -2px 2px 10px c.$darkest
  background-color: c.$darker
  border-radius: 5px

.login-form
  align-items: center
  flex: 1 1 auto
  width: 100%
  display: flex
  justify-content: space-around
  flex-flow: column

.data-input
  width: 100%
  
  
.form-input-container
  width: 100%
  display: flex
  flex-direction: column
  margin: 1em 0

input
  width: 100%
  height: 2.4rem
  border-radius: 5px
  box-sizing: border-box
  transition: background-color 1s, border-color 1s
  padding: 0px 1ch
  border: 0px

input[type="text"],input[type="password"]
  border: 3px solid transparent
  margin: 0.4em 0px
  &:hover
    border-color: c.$mild

input[type="submit"]:hover
    background-color: c.$mild

label
  font-size: 1.2em