/* https://codepen.io/drewr/pen/porBwW */


@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

:root {
  --fundo_card: #1A1617; 
  --borda_card: #473c40;
  --texto: #F5E5C3;
  --fundo_MaisEscuro: #120E0F;
  --borda_MaisClaro: #B4100F;
  --fundo_Main: #221c1d;
  --h2: #FF2934;
  --h1: #F5E5C3;
}

.translate {
    text-align: end;
    margin: 20px 40px 0px 0px;
    font-size: xxx-large;
    filter: 
    drop-shadow(2px 2px 0 white)
    drop-shadow(-2px -2px 0 white)
    drop-shadow(2px -2px 0 white)
    drop-shadow(-2px 2px 0 white);
}

body#comms{
    background: linear-gradient(90deg,rgb(94, 35, 35) 15%,  rgb(20, 7, 7) 100%);
}
h1 {
    color:var(--h1);
}

h2 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: bold;
    font-size: larger;
    color: var(--h2);

}

h3 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    letter-spacing: 3pt;
    color: white;
    text-align: center;
    font-weight: bold;
}

h1 {
    
    margin-top: 5px;
    font-weight: bold;
    letter-spacing: 5px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.caixa {
    
    border: none;
    padding: 12px;
    border-color: var(--borda_card);
    background-color: var(--fundo_card);
}

.texto-caixa {
    flex-basis: 0;
    overflow-y: auto;
    min-height: 100px;
    scrollbar-width: none;
    color: var(--texto);
    font-family: monospace;
}

hr {
    margin-top: 12px;
    border-color: var(--borda_card);
    border-width: 3px;
}

.banner {
    height: 175px;
    background-image: url(imgs/tree2.jpg);
    background-size: cover;
    background-position: center;
    border-bottom-left-radius: 0px;
    border-color: var(--borda_card);
    background-color: var(--fundo_card);
    border-bottom-right-radius: 0px;
    
    
}

.main {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-top: none;
    border-color: var(--borda_card);
    background-color: var(--fundo_Main);
    box-shadow: 5px 5px 10px #120E0F;
    
}

.sombra {
    text-shadow: 4px 2px 0 rgba(0, 0, 0, 0.534)
}

.botao1 {
    padding: 7px 20px 7px 20px;
    background-color: var(--fundo_card);
    font-family: monospace;
    font-weight: bold;
    color: var(--texto);
    justify-self: center;
    width: fit-content;
    border-radius: 10px;
    box-shadow: 3px 5px 5px #120E0F;
    text-align: center;
}
.botao1:hover {
    background-color: var(--fundo_MaisEscuro);
    color: var(--borda_MaisClaro);
    transition: 300ms;  
}

.botao2 {
    color: var(--h2);
    font-size: xx-large;
    justify-self: center;
    text-align: center;
}
.botao2:hover {
    color: #610707;
    transition: 300ms;  
}

.infoCard {
    scrollbar-width: none;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: rgba(0, 0, 0, 0.90);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-block: 3rem;
} 

.link {
    text-decoration: underline;
    font-weight: bolder;
    font-size: xx-large;
    color: var(--texto);
}
.link:hover {
    text-decoration: none;
    color: #757575;
    
}
span#credit {
    position: relative;
    top: 0;
    transition: top ease 0.3s;
}
span#credit:hover { 
    top: -4px; 
}