/* Cores bases */
:root{
    --void:#0a0a0b;
    --panel:#151517;
    --panel-2:#1d1d20;
    --bone:#ece8e0;
    --bone-dim:#a9a6a0;
    --amber:#e2261c;
    --amber-dim:#5c1210;
    --ember:#c81e3a;
    --static:#5c5c62;
    --line: rgba(236,232,224,0.09);
    --radius: 2px;
  }

  /* bases de configurações do site */
  *{
    box-sizing:border-box; 
    margin:0; 
    padding:0;
  }
  html{
    scroll-behavior:smooth; 
    scroll-padding-top:90px;
  }
  .reveal{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .7s cubic-bezier(0.22,1,0.36,1), transform .7s cubic-bezier(0.22,1,0.36,1);
  }
  .reveal.in-view{opacity:1; transform:translateY(0);}
  body{
    background:var(--void);
    color:var(--bone);
    font-family:'Inter', sans-serif;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

  .mono{
    font-family:'JetBrains Mono', monospace;
  }
  .display{
    font-family:'Anton', sans-serif; 
    text-transform:uppercase; 
    letter-spacing:0.01em;
  }
  a{
    color:inherit; 
    text-decoration:none;
  }
  ul{
    list-style:none;
  }
  img{
    height:26px; 
    width:auto;
  }
  button{
    font-family:inherit; 
    cursor:pointer;
  }
  :focus-visible{
    outline:2px solid var(--amber); 
    outline-offset:-2px;
  }

  body::before{
    content:"";
    position:fixed; inset:0;
    pointer-events:none;
    z-index:9999;
    opacity:0.035;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* classe de login configurada para ir ao centro da tela */
  .login-card{
    display:flex;
    justify-content:center;
    flex-direction:column;
    align-items:center;
    height:100vh;
  }
  
  /* Texto em h2 (por enquanto removido */
  .login-card h2{
    color: var(--bone);
    font-size: 2rem;
    text-align: center;
    font-weight: bold;
  }

  /* Config imagem para não ficar gigante */
  #login-title img{
    margin-bottom: 30px;
    width: 150px;
    height: 80px;
  }

  /* configurações do botão */
  button{
    margin-top: 30px;
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp (28px,4vw,40px);
    font-weight: bold;
    background-color: var(--amber);
    color: var(--void);
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    float: right;
  }
  
  button:hover{
    box-shadow: 0 0 6px var(--amber);
}

  /* Voltar configurado para não chamar mta atenção */
  .return {
    margin-top: 40px;
    float: left;
    font-size: 16px;
  }

  .return:hover{
    box-shadow: 0 0 6px var(--bone);
  }

  /* afastando o formulário para melhor visualização */
  .form-group {
    margin-bottom: 15px;
  }

  /* configurações visuais formulário */
  .form-control {
    width: 100%;
    height: 45px;
    padding: 10px;
    border: 2px solid var(--static);
    border-radius: 8px;
    background-color: var(--panel-2);
    color: var(--bone);
    font-size: 16px;
  }