/* Variáveis de Cores */
:root {
    /* Paleta de Cores */
    --primary-color: #00203d; /* Fundo principal */
    --secondary-color: #a8dadc; /* Complementar */
    --analogous-light: #004080; /* Azul mais claro */
    --analogous-dark: #001a2e; /* Azul mais escuro */
    --triadic-warm: #ff6f61; /* Coral para CTAs */
    --triadic-bright: #ffe156; /* Amarelo para destaques */

    /* Tipografia */
    --text-color: #ffffff; /* Texto geral */
    --title-color: #338dc3; /* Cor para títulos e links */
    --text-muted: #338dc3; /* Texto secundário */
    --text-highlight: #a8dadc; /* Texto destacado */

    /* Outros */
    --button-bg: var(--triadic-warm);
    --button-hover: #ff4c3a;
    --link-color: var(--title-color);
    --link-hover: #82c0c4;
}

/* Estilo Geral */
body {
    background-color: var(--primary-color);
    color: var(--text-color);
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Tipografia */
h1, h2, h3, h4, h5, h6 {
    color: var(--title-color); /* Títulos com a cor definida */
    margin: 0 0 10px;
    text-align: center;
}

p {
    color: var(--text-color); /* Texto geral branco */
    text-align: justify;
}

a {
    color: var(--link-color); /* Links com a cor definida */
    text-decoration: none;
}

a:hover {
    color: var(--link-hover); /* Hover dos links */
    text-decoration: underline;
}

/* Botões */
button {
    background-color: var(--button-bg);
    color: var(--text-color);
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: var(--button-hover);
}

/* Cartões */
.card {
    background-color: var(--analogous-light);
    color: var(--text-color);
    padding: 15px;
    border-radius: 8px;
    margin: 15px auto;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    text-align: center;
}

.card-title {
    font-size: 1.5rem;
    color: var(--title-color); /* Títulos em cartões */
    margin-top: 10px;
}

.card img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    transition: transform 0.3s ease; /* Transição para o efeito de zoom */
}

/* Efeito de zoom para imagens com a classe img-fluid */
.img-fluid {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* Bordas arredondadas */
    transition: transform 0.3s ease; /* Transição para o efeito de zoom */
}

.img-fluid:hover {
    transform: scale(1.1); /* Efeito de zoom ao passar o mouse */
}

/* Responsividade de Vídeos */
.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}

.embed-responsive::before {
    content: "";
    display: block;
    padding-top: 56.25%; /* 16:9 aspect ratio */
}

.embed-responsive .embed-responsive-item {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Destaques */
.highlight {
    background-color: var(--triadic-bright);
    color: var(--primary-color);
    padding: 15px;
    border-radius: 5px;
    font-weight: bold;
    margin: 15px 0;
    text-align: center;
}

/* Cabeçalho */
header {
    background-color: var(--analogous-dark);
    padding: 20px;
    text-align: center;
}

header h1 {
    color: var(--title-color); /* Título do cabeçalho */
    margin: 0;
}

/* Seções */
section {
    padding: 20px;
}

.error-container {
    text-align: center;
}

.error-title {
    font-size: 8rem;
    margin: 0;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
}

.error-message {
    font-size: 1.5rem;
    margin: 20px 0;
}

.error-link {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 1.2rem;
    color: #007acc;
    background: #fff;
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.error-link:hover {
    background: #00c4cc;
    color: #fff;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

/* Rodapé */
footer {
    background-color: var(--analogous-dark);
    color: var(--text-muted); /* Texto do rodapé */
    text-align: center;
    padding: 10px 0;
    font-size: 0.9rem;
}