* {
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
    background-color: #071426;
    color: #FFFFFF;
    line-height: 1.6;
}

header {
    background-color: #071426;
    padding: 20px 50px;
    position: sticky;
    z-index: 999;
}

h1,
h2,
h3 {
    color: #F2C94C;
}

h2 {
    margin-left: 2.6%;
}

nav {
    background-color: #071426;
    display: grid;
    grid-template-columns: 0.5fr 3fr 0.5fr;
    align-items: center;
    grid-template-areas: "logo navbar login";
    width: 90%;
}


.navlogo {
    grid-area: logo;
    align-items: center;
}

img {
    width: 100%;
    display: block;
}

.submenu li {
    width: 100%;
    margin: 0;
}

.dropdown {
    position: relative;
}

.dropdown summary {
    color: white;
    cursor: pointer;
    list-style: none;
}


.navbar {
    display: flex;
    justify-content: start;
    align-items: center;
    grid-area: navbar;
}

.inlog {
    grid-area: login;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative; 
}

.inlog .submenu {
    display: flex;
    flex-direction: column;
    background-color: #071426;
    position: absolute;
    top: 100%;       
    left: 50%;                 
    transform: translateX(-50%); 
    z-index: 1000;
    padding: 10px;
    gap: 5px;
    min-width: 140px;
}

ul {
    display: flex;
    padding: 0;
    margin: 0;
    gap: 1em;
}

.navbar>li {
    background-color: #1F7A63;
    list-style: none;
    text-align: center;
    padding: 1%;
    flex: 1;
    margin-left: 3%;
    position: relative; 
}

.inlog>li {
    list-style: none;
    text-align: center;
    position: relative;
}
.inlog summary {
    font-size: 1.4rem;
    color: white;
}
li:hover {
    background-color: lightseagreen;
}
a {
    text-decoration: none;
    color: white;
}
.kleinscherm>details>summary {
    color: #1F7A63;
    font-size: 1.6rem;
    font-weight: 600;
}
.submenu {
    display: flex;
    flex-direction: column;
    background-color: #071426;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    padding: 10px;
    gap: 5px;
    min-width: 140px;

}
.submenu li {
    display: flex;
    background-color: #1F7A63;
    list-style: none;
    text-align: center;
    padding: 8px;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    width: 100%;


}


.inlog .submenu li {

    background-color: #1F7A63; 
    border-radius: 8px;
    padding: 8px;
    justify-content: center;
    align-items: center;
    width: 100%;

}

.submenu li:hover {
    background-color: lightseagreen;
    ;

}

.kleinscherm {
    display: none;
}

.grootscherm>summary {
    display: none;
}


.grootscherm {
    display: unset;
}



.btn {
    background-color: #1F7A63;
    padding: 0.5em;
    position: absolute;
    margin-top: -18%;
    margin-left: 9%;

}

.btn:hover {
    background-color: #F2C94C;
}

.nieuwscontainer {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-content: space-evenly;

}

.btnInshrijving {
    background-color: #1F7A63;
    padding: 0.5em;
    position: absolute;
    margin-top: -11%;
    margin-left: 7.4%;
}

.btnInshrijving:hover {
    background-color: #F2C94C;
}


footer {
    background-color: #0B1F3A;
    color: white;
    padding: 60px 50px 30px;
}

.footerContainer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1440px;
    align-items: flex-start;
}

.footerLogoInfo {
    flex: 1;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footerLogoInfo p {
    text-align: center;
}

.footerLogoInfo img {
    width: 250px;
    margin-bottom: 10px;
    align-self: center;
}

.footerLogoInfo p {
    color: #a0b4c8;
    font-size: 0.9rem;
    margin: 0;
}

.footerLinks,
.footerSocialsTraining,
.footerSponsors {
    flex: 1;
    min-width: 150px;
}

.footerContainer h3 {
    margin-bottom: 15px;
    color: #F2C94C;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footerLinks h4 {
    color: #F2C94C;
    font-size: 0.85rem;
    text-transform: uppercase;
    margin-top: 20px;
    margin-bottom: 10px;
}

.footerContainer a {
    display: block;
    margin-bottom: 10px;
    color: #a0b4c8;
    text-decoration: none;
    font-size: 0.9rem;

}

.footerContainer a:hover {
    color: #1F7A63;
    padding-left: 5px;
}

.footerSocialsTraining p {
    color: #a0b4c8;
    font-size: 0.9rem;
    margin: 0;
}

.sponsors {
    display: flex;
    flex-direction: column;
    gap: 5px;

}

.sponsors p {

    border: 1px solid #1F7A63;
    color: #a0b4c8;
    padding: 8px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 0.85rem;
    max-width: 149px;
    text-transform: uppercase;

}

.sponsors p:hover {
    border-color: #F2C94C;
    color: #F2C94C;
}

.footerLijn {

    border: 1px solid #1a3a5c;
    margin: 35px;
    max-width: 1440px;
}

.copyright {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    color: #a0b4c8;
    font-size: 0.85rem;
}
.submenu li.nietzichtbaar {
    display: none;
}
.footerLinks a.nietzichtbaar {
    display: none;
}
@font-face {
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Open+Sans:wght@400;500&display=swap');
}



@media screen and (max-width: 800px) {
    nav {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: "logo navbar login";
        width: 90%;
    }

    .kleinscherm details>ul {
        align-items: center;
        width: 100%;
    }

    .kleinscherm details {
        width: 100%;
        text-align: center;
    }

    .navbar {
        width: 50%;
    }
    .submenu {
        min-width: 110px;      
        padding: 6px;
    }

    .submenu li {
        padding: 5px;          
        font-size: 0.9rem;    
    }

    .inlog summary {
        font-size: 2rem;
    }

    h2 {
        margin-left: 5.5%;
    }

    .btn {
        margin-left: 11%;

    }

    .btnInshrijving {
        margin-top: -15%;
        margin-left: 9%;
    }

    .footerLogoInfo img {
        width: 195px;
    }

    .sponsors {
        flex-direction: row;
        justify-content: space-between;
    }

}

@media screen and (max-width: 426px) {
    nav {
        grid-template-columns: 1fr;
        grid-template-areas: "logo"
            "navbar"
            "login";
        width: 100%;
        justify-items: center;
        padding: 10px;
    }
    .submenu {
        position: relative;    
        top: 0;
        left: 0;
        transform: none;      
        width: 100%;          
        box-shadow: none;
        padding: 5px 0;
    }

    .submenu li {
        font-size: 0.9rem;
        padding: 8px;
    }
    .inlog {
        margin-top: 5%;

    }

    .inlog summary {
        font-size: 1.5rem;
    }

    .navbar>li {

        width: 100%;
        margin-left: 0;
        padding: 5px;
        min-width: 100px;

    }
    .navbar {
        flex-direction: column;
        align-items: center;
    }

    .kleinscherm {
        display: unset;
    }
    .grootscherm {
        display: none;
    }
    ul {

        flex-direction: column;
    }
    h2 {
        margin-left: 14%;
    }
    .nieuwscontainer {
        flex-direction: column;
    }
    .btn {
        padding: 0.1em;
        margin-top: -17%;
        margin-left: 17%;
        font-size: 10px;
    }
    .btnInshrijving {
        font-size: 10px;
        padding: 0.1em;
        margin-top: -35%;
        margin-left: 20%;
    }
    .footerLogoInfo img {
        width: 150px;

    }
    .sponsors {

        flex-direction: column;


    }
    .footerLijn {


        margin: 10px;

    }
}