@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Comfortaa:wght@300..700&family=Monda:wght@400..700&display=swap');

:root {
    --navbar-height: 8vw;
    --accent-color: rgb(228 255 0);
}

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

body {
    font-family: 'Poppins', sans-serif;
    color: #fff;
    background-color: #000000;
    overflow-x: hidden;
    height: 100%;
    padding-bottom: 3vh;
}

#navbar {
    display: flex;
    padding: 1vw 2vw;
    align-items: center;
    width: 100%;
    height: var(--navbar-height);
}

#logo-container {
    flex: 1;
    align-items: center;
    justify-items: start;
    height: 75%;
}

#logo-container img {
    flex: 1;
    align-items: center;
    justify-items: left;
    display: flex;
    height: 100%;
}


#navigation-container {
    display: flex;
    align-items: center;
    gap: 2vw;

}

#social-container {
    display: flex;
    align-items: center;
    gap: 1vw;
}

#social-container img {
    height: 1.5vw;
}

#navbar #social-container a:hover {
    border-color: black;
}


#navbar a {
    font-family: "Bebas Neue";
    font-size: 3vw;
    position: relative;
    border-bottom: solid 4px;
    border-color: black;
    padding-top: 0.4vw;
    transition: 0.2s;
    color: var(--accent-color);
    text-decoration: none;
    width: fit-content;
    display: block;
    height: 100%;
    line-height: 1vw;
}

section:not(:first-of-type) {
    margin-top: 50px;
}

section.padded {
    margin-left: 12vw;
    margin-right: 12vw;
    font-family: "Monda";
    font-size: 1.2rem;

}

img.picture-full {
    width: 100%;
    object-fit: cover;

}

h1 {
    font-family: "Bebas Neue";
    font-size: 4rem;

}

h1 p {
    display: inline;
    color: var(--accent-color);
    font-size: 3rem;

}

h2 {
    font-family: "Bebas Neue";
    font-size: 2.5rem;

}

h3 {
    font-family: "Monda";
    text-align: center;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 6vw;
    font-size: 0.8em;
    scroll-snap-align: start;
    margin-top: 2vw;
}

.full-width-content {
    margin-top: 1vw;
    width: 100%;
    object-fit: cover;
    max-height: 40vw;
}

.main-video {
    margin-top: 0vw;
    margin-left: 12vw;
    margin-right: 12vw;
}

.full-width-separator {
    margin-top: 1vw;
    width: 100%;
    object-fit: cover;
    max-height: 60vw;
}

.gallery {
    margin-top: 3vw;
    margin-left: 4vw;
    margin-right: 4vw;
    /*display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20vw, 1fr));
    justify-content: center;
    gap: 1vw;*/
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1vw;
}

.gallery-small img {
    /*width: 100%;
    height: auto;
    object-fit: cover;*/
    flex: 1 1 20vw;
    max-width: 20vw;
    width: 100%;
    height: 10vw;
    object-fit: cover;

}

.gallery-big img {
    /*width: 100%;
    height: auto;
    object-fit: cover;*/
    flex: 1 1 30vw;
    max-width: 30vw;
    width: 100%;
    height: 15vw;
    object-fit: cover;

}


/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    html {
        scroll-snap-type: inherit;
            overflow-x: hidden;
    }

    #navbar {
        height: 100%;
        background: #000000;
        background: radial-gradient(circle, rgb(0 0 0 / 88%) 0%, rgba(0, 0, 0, 0) 100%);
        flex-direction: column;

    }

    #logo-container {
        flex: none;
        height: fit-content;
        margin: 0;
        margin-top: 2vh;
    }

    #navbar a {
        font-size: 4vh;
        border: none;
    }

    #logo-container img {
        height: 10vh;
        margin-bottom: 2vh;
        margin-right: 10vh;
        margin-left: 6vh;
    }

    #logo-container img {
        height: 10vh;
        margin-bottom: 2vh;
    }

    #navigation-container {
        flex-direction: column;
        gap: 1vh;
    }

    #social-container {
        gap: 2vh;
        margin-top: 2vh;
        margin-bottom: 2vh;
    }

    #social-container img {
        height: 3vh;
    }

    h1,
    h2 {
        font-size: 2rem;
    }

    h1 p {
        font-size: 1.5rem;
    }

    section.padded{
        margin-top: 50px;
    }

   .main-video{
                margin-top: 25px;
                width: 100%;
                margin-left: 0;
                margin-right: 0;

    }

    #picture-thumb,
    .gallery{
        flex-direction: column;
    }

    .gallery{
        display: block;
        margin-left: 0;
        margin-right: 0;
    }

    .gallery img{
        width: 100%;
        max-width: 100%;
        display: block;
        height: 40vw;
        margin-bottom: 10px;
    }
}