html {
  box-sizing: border-box;
  user-select: none;
}

*, *::before, *::after { box-sizing: inherit; }

a {
  color: inherit;
  font-weight: bold;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;

  height: 100vh;
  width: fit-content;
  margin: 0 auto;
  padding: 1em .5em;

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  font-weight: 400;
  color: #FFF;
}

header {
  height: 5em;
  margin-bottom: 2em;

  background-image: url('package://assets/img/login/logo.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .4;
}

main {
  height: auto;
  max-width: 60ch;
  
  padding: 1em;
  border-radius: .25em;
  
  font-size: 1em;
  line-height: 1.25;
  background-color: rgba(0, 0, 0, .4);

  h1, p {
    margin: 0;
  }

  h2 {
    margin-top: 0;

    span#name {
      white-space: nowrap;
    }
  }

  .form {
    margin-top: .25em;

    &__row {
      display: flex;
      width: 100%;
      
      &--streched {
        justify-content: space-between;
      }
    }
  }

  form {
    input {
      width: 100%;
      padding: 0 .25em;
      
      border: none;
      border-radius: 5px;

      background-color: rgba(0, 0, 0, .125);
      color: inherit;

      &:focus {
        outline-width: 0;
      }

      &#password {
        font-family: "Roboto Mono";
        font-weight: 500;
        font-size: 1em;
        padding: .5em 2em .5em .5em;
      }
    }

    span#password-visibility {
      width: 0;
      display: flex;
      align-self: center;

      &::before {
        content: "\f06e";
        font-family: "Font Awesome 5 Free";
        font-size: .9em;
        color: rgba(255, 255, 255, .85);
        font-weight: 400;
        
        position: relative;
        right: 1.75em;
      }

      &.hidden {
        &::before {
          content: "\f070";
          right: 1.82em;
        }
      }
    }

    button.transparent {
      display: flex;
      color: inherit;
      border: none;
      margin: unset;
      padding: unset;
      
      margin-left: .5em;
      background: transparent;

      &:focus {
        outline-width: 0;
      }

      &#submit {
        width: 3.25em;
        
        background-image: url('package://assets/img/login/enter.png');
        background-repeat: no-repeat;
        background-position: right;
        background-size: contain;
      }
    }

    #alert {
      margin-top: .5em;
      padding: .5em;

      color: #FFF;
      background-color: rgba(255, 125, 125, .25);

      border: 1px solid rgba(255, 125, 125, .3);
      border-radius: 5px;

      &.hidden {
        display: none;
        visibility: hidden;
      }
    }
  }
}

footer {
  height: fit-content;
  width: 60ch;
  align-self: center;
  
  position: fixed;
  bottom: 1em;

  color: rgba(0, 0, 0, .5);

  .link-list {
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around;
    list-style: none;
  }
}

body.light {
  color: #333;

  main {
    background-color: rgba(255, 255, 255, .75);
  }

  header {
    background-image: url('package://assets/img/login/logo-light.png');
    opacity: .75;
  }

  form {
    input {
      background-color: rgba(0, 0, 0, 0.05);
    }

    span#password-visibility {
      &::before {
        color: rgba(0, 0, 0, .85);
      }
    }

    button.transparent {
      &#submit {
        background-image: url('package://assets/img/login/enter-dark.png');
      }
    }

    #alert {
      color: #985555;
      background-color: rgba(255, 125, 125, .125);
      border: 1px solid rgba(255, 125, 125, .15);
    }
  }

  footer {
    color: rgba(255, 255, 255, .5);
  }
}