body {
    background: url('/app/static/images/waves.webp') center/cover no-repeat fixed;
    background-size: cover ;
    background-position: center center ;
    background-attachment: fixed ;
    font-family: 'Victor Mono', monospace ;
    margin: 0 ;
    padding: 0 ;
    min-height: 100vh ;
    width: 100% ;
    /* Remove flex centering so main-container can grow with content */
    display: block;
    max-width: 100vw;
}

.main-container {
    background: rgba(255,255,255,0.75) ;
    border-radius: 16px;
    box-shadow: 0 8px 32px 0 rgba(31,38,135,0.25) ;
    margin: 40px auto ;
    padding: 40px ;
    max-width: 1100px ;
    /* Remove min-height so container always grows with content */
    height: auto;
    box-sizing: border-box;
    backdrop-filter: blur(8px) ;
    -webkit-backdrop-filter: blur(8px) ;
    border: 1px solid rgba(255,255,255,0.2) ;
}

.construction-section {
    display: flex ;
    align-items: center ;
    gap: 30px ;
    padding: 20px ;
    background: rgba(248,249,250,0.6);
    border-radius: 12px ;
    margin-bottom: 30px ;
}

/* Styles extracted from inline attributes */
.construction-img {
    max-width: 150px ;
    height: auto ;
    border-radius: 8px ;
}

.construction-img-wrapper {
    flex-shrink: 0 ;
}

.construction-text-container {
    flex-grow: 1 ;
}

.construction-title {
    margin: 0 0 10px 0 ;
    color: #f14e32 ;
}

.construction-paragraph {
    margin: 0 ;
    color: #343a40 ;
    line-height: 1.5 ;
}

.git-logo-img {
    max-width: 150px ;
    height: auto ;
}

.terminal-img {
    max-width: 100% ;
    height: auto ;
    aspect-ratio: 16/9 ;
}

.about-paragraph {
    font-size: 16px ;
}

/* Generic paragraph sizing for paragraphs that used inline styles previously */
.paragraph {
    font-size: 16px ;
    margin: 0 0 1em 0 ;
    color: #343a40 ;
    line-height: 1.5 ;
}

/* Transparência no conteúdo principal */
.grid-container {
    background: rgba(255,255,255,0.3) ;
    border-radius: 12px ;
    padding: 20px ;
    margin: 20px 0 ;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 20px;
    box-sizing: border-box;
}

.column1, .column2 {
        background: rgba(255,255,255,0.2) ;
        border-radius: 8px ;
        padding: 15px ;
        margin: 10px 0 ;
        box-sizing: border-box;
}

/* 60% left, 40% right column grid for desktop */
.grid-container {
        flex-wrap: nowrap;
}
.column1 {
        width: 60%;
        min-width: 340px;
}
.column2 {
        width: 40%;
        min-width: 260px;
}

@media (max-width: 900px) {
    .grid-container {
        flex-direction: column;
        flex-wrap: wrap;
    }
    .column1, .column2 {
        width: 100%;
        min-width: 0;
    }
}

/* Site footer (landing page) */
.site-footer {
    text-align: center ;
    padding: 20px ;
    margin-top: 40px ;
    background-color: rgba(234, 216, 231, 0.8);
    box-shadow: 0 8px 32px 0 rgba(31,38,135,0.25);
    border-radius: 12px ;
    border-top: 1px solid rgba(233,236,239,0.5) ;
    color: #343a40 ;
    font-size: 14px ;
}

.footer-badges {
    display: flex ;
    justify-content: center ;
    align-items: center ;
    gap: 20px ;
    margin-top: 15px ;
    flex-wrap: wrap ;
}

.github-link, .w3c-link {
    display: inline-flex ;
    align-items: center ;
    gap: 8px;
    color: #343a40 ;
    text-decoration: none ;
    font-size: 14px ;
}

.github-link:hover, .w3c-link:hover {
    color: #f14e32;
}

.footer-logo {
    height: 20px ;
    width: auto ;
    opacity: 0.8 ;
    transition: opacity 0.3s ;
}

.footer-logo:hover {
    opacity: 1 ;
}

/* Garantir que os títulos tenham fundo destacado igual ao "Introdução ao Git" */
.subject-title, .curse-title {
    background: rgba(241, 78, 50, 0.1) ;
    padding: 15px ;
    border-radius: 8px ;
    border-left: 4px solid #f14e32 ;
    margin-bottom: 20px ;
}

.subject-title h4, .subject-title h2, .curse-title h4, .curse-title h2 {
    margin: 0 ;
    color: #f14e32 ;
}

@media (max-width: 768px) {
    .construction-section {
        flex-direction: column ;
        text-align: center ;
    }
    .footer-badges {
        flex-direction: column ;
        gap: 10px ;
    }
}

/* Defensive image rules to avoid oversized/distorted images */
    .img-full, .img-half {
        max-width: 100%;
        height: auto;
        display: block;
        }
/* Provide sensible maximum widths for layout but keep images responsive */
    .img-half { max-width: 400px; }
    .img-full { max-width: 100%; }