@font-face {
    font-family: 'MyWebFont';
    src: 
         url('../fonts/fontawesome-webfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
} 

/* todo: fix body height, this mighty be related to image resizing, that means possibility of replacing "table" images generated by the potoshop.*/
/* colors that can be used in any text/element */
:root {
            --cor-fundo-escuro: #000;
            --cor-fundo-claro: #ccc;
            --cor-fundo-claro-hover: #f04200;
            --cor-borda-escura: #333;
            --cor-borda-clara: #ccc;
            --borda-offset: 2px;
            --espaco-interno: 8px 12px;
}
.nav-bar-middle {
    display: inline-flex;
    background-image: url('../images/index_09.png');
    width: 416;
    height: 26;
}
.btn-nav-bar-middle {
  color: #ffffff;
  background-color:#000000;
  display: inline-block;        /* aligns icon + text side by side */
  align-items: center;         /* vertically center them */
  gap: 1px;                    /* space between icon and text */
  margin: 1px;
  margin-left: 10px;
  padding: .2em .25em .15em;
  border-radius: 6px;
  overflow: hidden;
  font-family: 'MyWebFont';
  font-size: 13px;
 
}
.btn-nav-bar-middle:hover {
    display: inline-block;        /* aligns icon + text side by side */
    background-color: #BABEBD;
    gap: 1px;                    /* space between icon and text */
    margin: 1px;
    margin-left: 10px;
    border-radius: 6px;
    color: rgb(0, 0, 0);
    padding: .2em .25em .15em;
    align-items: center;         /* vertically center them */
    font-size: 13px;
    

}
.btn-nav-bar-middle + .btn-nav-bar-middle {
    margin-left: 10px;
}
.btn-nav-bar-middle + .btn-nav-bar-middle:hover {
    margin-left: 10px;
}
.btn-nav-bar-middle img[src$=".svg"] {
    filter: invert(1) hue-rotate(180deg);
    height: 12;
}
.btn-nav-bar-middle:hover img[src$=".svg"] {
    filter: invert(0) hue-rotate(360deg);
    height: 12;
}
.banner-card {
  width: 205px;             /* match image width */
  height: 562px;            /* match image height */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  background-color: white;
}
.banner-text {
  position: absolute;
  top: 2%;
  padding-left: 4vh;

}
.banner-subdrid {
    background-color: #000;
}
.banner-text-two {
  position: relative;
  top: 2%;
  padding-left: 4vh;

}

/* retro button */
.retro-button {
    /* Estilo Base */
    background-color: var(--cor-fundo-escuro);
    color: var(--cor-fundo-claro);
    /* font-family: 'Courier New', monospace; /* Pilha de fontes */
    font-family: 'MyWebFont';
    font-weight: bold;
    font-size: 9px;
    padding: var(--espaco-interno);
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.1em;

    /* Bordas duplas com box-shadow */
    box-shadow: 
        var(--borda-offset) var(--borda-offset) 0 0 var(--cor-borda-clara),
        calc(2 * var(--borda-offset)) calc(2 * var(--borda-offset)) 0 0 var(--cor-borda-escura);
    
    /* Transições para efeitos suaves */
    transition: 
        background-color 0.2s ease, 
        color 0.2s ease,
        box-shadow 0.2s ease,
        background-position 0.3s ease;
}
/* Efeito de Hover: inversão de cor e deslocamento de borda */
.retro-button:hover {
    font-family: 'MyWebFont';
    font-weight: bold;
    background-color: var(--cor-fundo-escuro);
    color: var(--cor-fundo-escuro);
    color: var(--cor-fundo-claro-hover);
    box-shadow: 
        var(--borda-offset) var(--borda-offset) 0 0 var(--cor-borda-escura),
        calc(2 * var(--borda-offset)) calc(2 * var(--borda-offset)) 0 0 var(--cor-borda-clara);
}

/* Efeito de Clique: simula o estado pressionado */
.retro-button:active {
    transform: translate(calc(2 * var(--borda-offset)), calc(2 * var(--borda-offset)));
    box-shadow: none; /* Remove a sombra para o efeito de "afundar" */
}

/* Estado de Foco para acessibilidade (navegação por teclado) */
.retro-button:focus {
    outline: 2px;
    outline-offset: 4px; /* Separa a borda do botão */
}


::-webkit-scrollbar {
  width:  8px;
  border-radius: 34px;
  right: 20px;
}

::-webkit-scrollbar-track {
  border-radius: 8px;
}

::-webkit-scrollbar-thumb {
  background: #222224;
  border-radius: 8px;
  transition: all 0.4s;
  -moz-transition: all 0.4s;
  -webkit-transition: all 0.4s;
}

::-webkit-scrollbar-thumb:hover {
  background: #7E81A1;
}


/* Handle on hover */
/* Separate Banners in the Left Side Bar */
.separator-sidebar {
    padding-bottom: 1vh;
}

/* Modal */
.modal {
        position:fixed;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        box-sizing:border-box;
        width:600px;
}