*, *:before, *:after {box-sizing:border-box;}
html, body {width:100dvw; height:100dvh; margin:0; padding:0; overflow:hidden;}
a, a:link, a:active, a:visited, a:hover {color:inherit; text-decoration:none;}

:root {
  --bs-blue   : #007bff; 
  --bs-gray   : #6c757d;
  --bs-green  : #28a745;
  --bs-red    : #dc3545;
  --bs-yellow : #ffc107;
  --bs-aqua   : #17a2b8;
  --bs-white  : #f8f9fa;
  --bs-black  : #343a40;
  --ico-blue  : #114477;
  --col-white : #f0f0f0;
  --col-black : #0f0f0f;
}

input[type="text"],
input[type="button"],
textarea{
  display:inline-block;
  vertical-align:middle;
  width:100%;
  height:auto;
  font:inherit;
  color:inherit;
  padding:.25rem .5rem;
  outline:none;
  background:var(--bs-black);
  border:1px solid var(--bs-black);
  transition:border .25s linear, opacity .25s linear, color .25s linear;
}
  input[type="text"]::placeholder,
  input[type="button"]::placeholder,
  textarea::placeholder{
    font:inherit;
    color:var(--bs-gray);
  }

  input[type="text"],
  input[type="button"]{
    height:3rem;
    line-height:3rem;
  }

  input[type="button"] {cursor:pointer;}

  input[disabled="disabled"],
  textarea[disabled="disabled"] {opacity:.25;}


.ol {outline:1px solid red; outline-offset:-1px;}


body{
  font-family:"Inter", system-ui, -apple-system, sans-serif;
  font-size:large;
  line-height:1.25rem;
  font-weight:400;
  text-align:left;
  background:var(--bs-black);
  color:var(--col-white);
}

.auth-form{
  position:absolute;
  top:calc(50% - 10dvh);
  left:50%;
  transform:translate(-50%, -50%);
  padding:0 .5rem;
  width:100%;
    max-width:20rem;
}

  .af-logo {width:100%; height:10rem; margin-bottom:1rem}
    .af-logo img {display:block; width:100%; height:100%; object-fit:contain;}

  .af-row{
    width:100%;
    margin:.5rem 0
  }

    input[name="username"]{
      width:calc(100% - 2.5rem);
      margin-right:.5rem;
      background:var(--col-white);
      border:1px solid var(--bs-black);
      color:var(--bs-black);
      text-align:center;
    }

    span.af-hint{
      display:inline-block;
      vertical-align:middle;
      width:2rem;
      height:2rem;
      line-height:2rem;
      font-weight:800;
      text-align:center;
      border:1px solid var(--col-white);
      border-radius:50%;
      cursor:pointer;
      position:relative;
    }

      .af-hint-text{
        display:none;
        visibility:hidden;
        opacity:0;
        position:absolute;
        top:50%;
        left:-17rem;
        width:16.5rem;
        height:auto;
        transform:translateY(-50%);
        padding:.5rem;
        font-size:small;
        line-height:1.25rem;
        font-weight:400;
        text-align:left;
        background:var(--col-black);
        border-radius:.5rem;
        transition:opacity .1s linear;
      }

        .af-hint-text.show{
          display:block;
          visibility:visible;
          opacity:1;
        }

    input[name="auth-btn"]{
      background:var(--ico-blue);
      border:1px solid var(--bs-black);
      color:var(--col-white);
      line-height:2.5rem;
    }

    span.auth-error{
      display:inline-block;
      vertical-align:middle;
      width:100%;
      text-align:center;
      color:var(--bs-red);
      font-size:smaller;
      padding-top:.25rem;
    }