@import url(../css/global.css);

body {
    margin-top: 0;
}

/*Header*/
.cpp-tables {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid rgb(255, 0, 0);
    box-shadow: 0 3px 0 0 rgb(78, 78, 78);
    margin-bottom: 1rem;
    gap: 1rem;
    color: #000000;
    font-style: italic;
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.363);
}

.logo {
    width: 15rem;
    margin: 1rem 0;
}

.main-content{
    margin: 0 2rem 0 1rem;
}

/*Botoes de Navegação*/
.nav {
    padding: 0 0 0 1rem;
}

.nav-link {
    font-size: 14px;
    padding: 4px 8px;
}

.nav-pills .nav-link  {
    background-color: #f8f8f8;
    color: rgb(0, 0, 0);
    border-bottom: 2px solid black;
    margin-right: 1rem;
}

.nav-pills .nav-link.active {
    background-color: black; 
    color: #ffffff;
    border: 1px solid red;
}

#classificacao{
    width: 90%;
}
#tabela-jogos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

h2 {
    font-style: italic;
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.363);
    text-decoration: underline;
    text-decoration-color: red;
}

/* IMG-layout */
.layout-div {
    display: flex;
    flex-direction: column; /* As imagens ficam em coluna */
    flex-wrap: wrap; /* Permite que as imagens se movam para a linha seguinte se o espaço for insuficiente */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    gap: 2rem; /* Espaçamento entre as imagens */
    margin: auto; /* Centraliza o contêiner */
}

.layout-img {
    display: block;
    width: 100%;  /* Imagem vai ocupar 100% da largura do contêiner */
    height: auto; /* Mantém a proporção das imagens */
    max-width: 900px; /* Limita a largura máxima para 900px */
    margin: auto;
    margin-bottom: 1rem;
}

.tab-content {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.tab-pane {
    width: 100%;
    flex: 1; /* Adicione esta linha para permitir que os filhos cresçam e encolham conforme necessário */
}

.tab-content .tab-pane {
    display: none; /* Esconde todas as abas por padrão */
}
.tab-content .tab-pane.show {
    display: block; /* Exibe apenas a aba ativa */
}

.iframe-jogos,
.iframe-classificacao {
    width: 100%; /* Pode ser um valor fixo se preferido */
    height: 900px; /* Altere a altura conforme necessário */
    border: none; /* Remove borda */
}

.iframe-wrapper {
    overflow: hidden; /* Adiciona esse estilo para evitar rolagem indesejada */
    width: 100%; /* Mantém o wrapper do iframe dentro da largura da coluna */
}

#live-cpp2_25 h3{
    text-align: center;
    text-decoration: underline;
    text-decoration-color: red;
}

.video-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.iframe-video {
    width: 100%;
    max-width: 720px;
    aspect-ratio: 16 / 9;
    border: none;
    border-radius: 8px;
}


@media (max-width: 992px) {
    .cpp-tables {
        flex-direction: column;
        gap: 5px;
        margin: 1rem 0;
        text-align: center;
    }
    .main-content{
        margin: 0 1rem;
    }
    #logo {
        width: 10rem;
        margin: 0;
    }
    .nav-item {
        margin-bottom: 0.5rem;
    }
    #classificacao{
        width: 90%;
    }
    .layout-img {
        margin-bottom: 1rem;
    }
    .iframe-jogos {
        zoom: 28%; /* Ajuste o valor conforme necessário */
        height: 2300px;
    }
    .iframe-classificacao {
        width: 100%; /* Pode ser um valor fixo se preferido */
    }
}