:root {
    --clair: rgb(233, 219, 203);
    --sombre: rgb(27, 21, 22);
    --header: 64px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

header, .section {
    padding: 30px Max(Calc((100vw - 1200px) / 2), 10%);
}

header {
    white-space: nowrap;
    overflow: hidden;
    background-color: var(--sombre);
    color: var(--clair);
    height: var(--header);
    display: flex;
    align-items: center;
    justify-content: space-between;

    * {
        display: inline-block;
        vertical-align: middle;
    }

    a.logo {
        display: flex;
        align-items: center;
        height: 100%;
        img {
            max-height: 36px; /* Slightly smaller than header height (42px) */
            width: auto;
            margin-right: 8px;
        }
        h1 {
            font-size: 18px; /* Reduce font size to fit in header */
            white-space: nowrap;
        }
    }

    nav {
        flex: 1;
        text-align: center;
        ul {
            list-style: none;
            display: inline-flex;
            li {
                margin: 0 15px;
            }
        }
    }

    a {
        color: var(--clair);
        text-decoration: none;
    }
}

.banner {
    width:100%;
    /*max-height:50vh;*/
    object-fit: cover;
    vertical-align: bottom;
}

/*
@media(max-width: 768px) {
    .banner {
        min-height: 50vh;
        max-height:auto;
        max-width:100vw;
    }
}*/

.button {
    border-radius: 8px;
    padding: 8px 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 200% 100% !important;
    background-position: 100% 0% !important;
    transition: background-position 0.5s ease;
    font-size:1.2em;
    text-decoration: none;
    * {
        vertical-align: middle;
    }
    span {
        font-weight:bold;
        color: var(--clair);
    }
    img {
        height: 24px;
        margin-right: 6px;
    }
    
    &.social {
        padding: 12px 20px;
        font-weight: bold;
    }

    &.clair {
        background: linear-gradient(to right, hsl(33, 43%, 60%), hsl(33, 43%, 85%), hsl(33, 43%, 100%));
        span {
            text-decoration: none;
            color: var(--sombre);
        }
    }
    &.sombre {
        background: linear-gradient(to right,hsl(350 12.5% 4.4%), hsl(350 12.5% 9.4%), hsl(350 12.5% 20.4%));
    }

    &.discord {
        background: linear-gradient(to right, hsl(235 86% 45%), hsl(235 86% 65%), hsl(235 86% 70%));
    }
    &.youtube {
        background: linear-gradient(to right,hsl(0, 100%, 30%),  hsl(0, 100%, 50%), hsl(0, 100%, 67%));
    }
    &.reddit {
        background: linear-gradient(to right, hsl(16, 100%, 25%), hsl(16, 100%, 50%), hsl(16, 100%, 67%));
    }
    &:hover {
        background-position: 0% 0% !important;
    }
}

.section {
    h3 {
        font-size:24px;
    }
    h2 {
        position: relative;
        display: inline-block;
        width:100%;
        font-size: 32px;
        margin-bottom: 40px;
        @media (max-width: 768px) {
            font-size: 28px;
            margin-bottom: 30px;
        }
        &::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -10px;
            height: 3px;
            width: 100%;
        }
    }
    p {
        line-height: 1.7;
        margin-bottom: 25px;
        font-size: clamp(18px, 3vw, 22px); /* Much larger responsive font size */
    }
    &.sombre {
        background-color: var(--sombre);
        color: var(--clair);
        h2::after {
            background-color: var(--clair);
        }
    }
    &.clair {
        background-color: var(--clair);
        color: var(--sombre);
        h2::after {
            background-color: var(--sombre);
        }
    }
    
    & > .illustration {
        flex: 1;
        display: flex;
        justify-content: center;

        img {
            max-width: 100%;
            height: auto;
            object-fit: contain;
        }
    }
}

.intro, .blog {
    width: 100%;
    max-width: 100%; /* Take full width of the screen */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    
    & div:first-child {
        flex: 3;
        padding-right: 30px;
        h2 {
            font-size: clamp(28px, 6vw, 42px); /* Much larger responsive font size */
            margin-bottom: 20px;
            font-weight: bold;
        }
    }
}

.blog div:first-child {
    flex: 2;
}

.intro {
    margin: 0; /* Remove horizontal margin */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

    .buttons {
        display: flex;
        gap: 30px; /* Increased gap between buttons */
        margin-top: 30px;
        flex-wrap: wrap;
        width: 100%;
        justify-content: space-between; /* This spreads them apart */
    }

    .button {
        padding: 16px 28px;
    }
}

.section.latest-video {
    flex-grow:1;

    .video-container {
        position: relative;
        width: 100%;
        padding-bottom: 56.25%; /* 16:9 aspect ratio (9 ÷ 16 = 0.5625 ou 56.25%) */
        height: 0;
        overflow: hidden;
        iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }
    }
}

.socials {
    & > div {
        display: flex;
        flex-wrap: wrap;
        margin-top: 40px;
        gap: 30px;
        & > div:first-child{
            flex: 3;
            min-width: 300px;
            line-height: 1.6;
            p {
                padding: 0;
                white-space: pre-line; /* Preserve line breaks in the text */
            }
        }
        
        & > div:last-child {
            flex: 2;
            min-width: 300px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            & > .button {
                padding: 12px 20px;
                font-weight: bold;
            }
        }
    }
}

.section.screens {
    .screens-container {
        display:grid;
        grid-template-columns: 1fr 1fr;
        padding-bottom:40px;
        gap: 30px;
        img {
            max-width:100%;
            height:auto;
        }
    }
}

.preview-blog {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    .blog {
        img {
            max-width:100%;
            height:auto;
        }
        .desc {
            padding:10px;
            display:flex;
            flex-direction:column;
            background-color:rgb(160, 89, 25);
            h3 {
                font-size: 24px;
                margin-bottom: 10px;
                color: var(--clair);
            }
            p {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                max-width: 100%;
                white-space: normal;
            }
            .button {
                margin-left: auto;
                color:var(--sombre);
                max-width: fit-content;
            }
        }
    }
}

footer {
    border-top:1px solid var(--sombre);
    color: var(--sombre);
    background-color: var(--clair);
    padding: 40px Max(Calc((100vw - 1200px) / 2), 5%);
    
    .footer-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
        
        @media (max-width: 768px) {
            grid-template-columns: 1fr;
        }
    }
    
    .footer-column {
        display:flex;
        flex-direction: column;
        justify-content: space-between;
        h3 {
            font-size: 18px;
            margin-bottom: 20px;
            position: relative;

            a {
                color: var(--sombre);
                text-decoration: none;
                font-weight: bold;
            }
            
            &::after {
                content: '';
                position: absolute;
                left: 0;
                bottom: -8px;
                height: 2px;
                width: 40px;
                background-color: var(--clair);
            }
        }
        
        p {
            line-height: 1.6;
        }
        
        ul {
            list-style: none;
            
            li {
                &:not(:last-child) {
                    margin-bottom: 10px;
                }
                
                a {
                    color: var(--sombre);
                    text-decoration: none;
                    transition: opacity 0.2s;
                    
                    &:hover {
                        opacity: 0.8;
                    }
                }
            }
        }
        &:last-child {
            text-align:right;
        }
    }
}

/*
/ * Add media queries for responsive layout * /
@media (min-width: 801px) {
    .intro-content {
        flex: 2; / * Takes up 2/3 of the available width on larger screens * /
        max-width: 66.67%; / * Ensure it doesn't exceed 2/3 of the width * /
    }
    
    .intro-image {
        flex: 1; / * Takes the remaining 1/3 on larger screens * /
    }
}

@media (max-width: 768px) {
    .intro-section {
        flex-direction: column;
    }
    
    .intro-content {
        flex: 1 0 100%;
        padding-right: 0;
        margin-bottom: 20px;
        max-width: 100%;
    }
    
    .intro-image {
        flex: 1 0 100%;
        margin-top: 20px;
    }
    
    .social-networks-grid {
        grid-template-columns: 1fr;
    }
    
    .social-network-card {
        margin-bottom: 20px;
    }
}

@media (max-width: 768px) {
    .social-networks-grid {
        grid-template-columns: 1fr;
    }
    
    .social-network-card {
        margin-bottom: 20px;
    }
}
*/