@import url('https://fonts.googleapis.com/css2?family=Marcellus&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap');


:root{
    --cor-primaria: #c5c7cb;
    --cor-background:#9a312e; 
    --cor-texto:#ffffff;
    --fonte-texto:"Hind Siliguri", system-ui;
    --fonte-titulo:"Marcellus", serif; 
    --fonte-subtitulo:"Fira Sans", sans-serif;
}

body{
    background-color: var(--cor-background);
    font-family: var(--fonte-texto);
    color: var(--cor-texto);
}

h1, h2{
    font-family: var(--fonte-titulo);
    font-size: 2.5rem;
    text-align: center;
}

.banner-principal {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    width: 100%;
    height: auto;
}

.banner-principal__imagem {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.banner-principal__conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    max-width: 50%; /* Limita o conteúdo à metade direita */
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
}

.banner-principal__titulo {
    font-family: var(--fonte-titulo);
    font-size: 2.5rem;
    margin: 0;
}

.banner-principal__descrição {
    font-family: var(--fonte-subtitulo);
    font-size: 1.2rem;
    margin: 10px 0 20px;
}

/* Estilo para as Redes Sociais */
.banner-principal__redes-sociais {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.banner-principal__redes-sociais li {
    display: flex;
    align-items: center;
    font-family: var(--fonte-subtitulo);
    font-size: 1rem;
    color: var(--cor-texto);
}

.banner-principal__redes-sociais i {
    margin-right: 8px; /* Espaço entre o ícone e o nome */
    font-size: 1.2rem;
}



/* .jogosfavoritos_erica{
    display: block;
    background-color: #be2999;
    width: 100%;
}
.jogosfavoritos_erica-imagem{
    width: 25%;
    position: absolute;
} */

.jogosfavoritos_erica {
    background-color: #ff99cc; /* Fundo rosa */
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
}

.jogosfavoritos_erica-titulo {
    text-align: center;
    font-family: var(--fonte-titulo);
    color: var(--cor-texto);
    margin-bottom: 20px;
}

.jogosfavoritos_erica-conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.jogosfavoritos_erica-imagem {
    width: 150px;
    height: auto;
    border-radius: 50%;
    margin-bottom: 20px;
}

.jogosfavoritos_carrossel {
    display: flex;
    gap: 20px;
    overflow-x: auto; /* Permite o carrossel horizontal */
    padding: 10px;
    scroll-snap-type: x mandatory; /* Ativa o efeito de "snap" */
}

.carrossel-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    scroll-snap-align: start; /* Faz os itens pararem no início do container */
    width: 120px;
}

.carrossel-item img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 5px;
    max-height: 120px;
}

.carrossel-item p {
    text-align: center;
    font-family: var(--fonte-subtitulo);
    font-size: 14px;
    color: var(--cor-texto);
}




/* CArrossel Gregorio */
.jogosfavoritos_gregorio {
    background-color: #87CEEB; /* Fundo azul */
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
}

.jogosfavoritos_gregorio-titulo {
    text-align: center;
    font-family: var(--fonte-titulo);
    color: var(--cor-texto);
    margin-bottom: 20px;
}

.jogosfavoritos_gregorio-conteudo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.jogosfavoritos_gregorio-imagem {
    width: 150px;
    height: auto;
    border-radius: 50%;
    margin-left: 20px;
}

.jogosfavoritos_carrossel {
    display: flex;
    gap: 20px;
    overflow-x: auto; /* Permite o carrossel horizontal */
    padding: 10px;
    scroll-snap-type: x mandatory; /* Ativa o efeito de "snap" */
}

.carrossel-item {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    scroll-snap-align: start; /* Faz os itens pararem no início do container */
    width: 120px;
}

.carrossel-item img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 5px;
}

.carrossel-item p {
    text-align: center;
    font-family: var(--fonte-subtitulo);
    font-size: 14px;
    color: var(--cor-texto);
}

 /* Estilo para a seção de vídeos */
 #youtube-videos {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 20px;
}

.youtube-videos__titulos{
    margin-top: 16px;
}

.video-container {
    width: 560px;
    max-width: 100%;
    height: 315px;
    margin-bottom: 20px;
}

.youtube-videos__descricao , .twitch__descricao{
    text-align: center;
    padding: 1rem;
}

.twitch-embed {
    position: relative;
    padding-bottom: 56.25%; /* Proporção 16:9 */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
}

.twitch-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.rodape{
   text-align: center;
   margin: 1rem;
}