/* Variabelen */
:root {
    /* Kleuren */
    --primary-color-red: #CA493B;
    --primary-color-blue: #303B4D;
    --secundary-color-blue: #8AA8D9;
    --white: #FFFFFF;


    /* Afmetingen */
    --padding-margin-large: 7rem;
    --padding-margin-medium: 3rem;
    --padding-margin-small: 1.5rem;
    --gap: 3rem;


    /* Afmetingen Mobiel */
    --padding-margin-mobiel-large: 2rem;
    --padding-margin-mobiel-medium: 1.5rem;
    --padding-margin-mobiel-small: 1rem;
    --gap-mobiel: 1rem;
}




/* Lettertypes - Fonts */
/**
* @license
*
* Font Family: Switzer
* Designed by: Jérémie Hornus
* URL: https://www.fontshare.com/fonts/switzer
* © 2024 Indian Type Foundry
*
* Switzer Regular 
* Switzer Bold 
*
*/
@font-face {
    font-family: 'Switzer-Regular';
    src: url('../fonts/Switzer-Regular.woff2') format('woff2'),
        url('../fonts/Switzer-Regular.woff') format('woff'),
        url('../fonts/Switzer-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: 'Switzer-Bold';
    src: url('../fonts/Switzer-Bold.woff2') format('woff2'),
        url('../fonts/Switzer-Bold.woff') format('woff'),
        url('../fonts/Switzer-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
    font-style: normal;
}

h1 {
    font-family: 'Switzer-Bold', sans-serif;
    font-size: 10rem;
    color: var(--primary-color-blue);
}

h2 {
    font-family: 'Switzer-Bold', sans-serif;
    font-size: 5rem;
    color: var(--primary-color-red);
}

h3 {
    font-family: 'Switzer-Bold', sans-serif;
    font-size: 2.5rem;
    color: var(--primary-color-blue);
}

h4 {
    font-family: 'Switzer-Bold', sans-serif;
    font-size: 1.5rem;
    color: var(--white);
}

p {
    font-family: 'Switzer-Regular', sans-serif;
    font-size: 1.5rem;
    margin-top: var(--padding-margin-small);
    margin-bottom: var(--padding-margin-small);
    color: var(--primary-color-blue);
}

li {
    font-family: 'Switzer-Regular', sans-serif;
    font-size: 1.5rem;
}

a {
    text-decoration: none;
}


.Button {
    font-family: 'Switzer-Bold', sans-serif;
    display: inline-block;
    font-size: 1.5rem;
    color: var(--white);
    background-color: var(--secundary-color-blue);
    padding: 1.5rem;
    border-top-left-radius: 2rem;
    margin-top: var(--padding-margin-small);
    margin-right: 1.5rem;
}


#container {
    width: 100%;
    margin: auto;
}




/* Header */
#HeroSection {
    height: 100vh;
    background-image: url('/images/HeroSection-WEB-V1.webp');
    background-size: cover;
    display: flex;
    flex-direction: column;
}

#HeroSection-Golf {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

#HeroSection-Golf img {
    width: 50%;
}

#HeroSection-Tekst {
    display: flex;
    flex-direction: column;
    text-align: left;
    margin-right: var(--padding-margin-large);
    margin-left: 30rem;
}

#HeroSection-Tekst p {
    margin-bottom: 0rem;
}

#HeroSection-Tekst div {
    display: flex;
}




/* Sectie 1 - Projecten */
#Projecten {
    background-color: var(--white);
    padding-top: var(--padding-margin-large);
    padding-left: var(--padding-margin-large);
    padding-right: var(--padding-margin-large);
    padding-bottom: var(--padding-margin-large);
}

.Card {
    color: var(--white);
    flex: 1 1 calc(20% - 1rem);
    max-width: calc(25%);
    width: 100%;
}

.CardLink {
    background-color: var(--primary-color-blue);
    display: block;
    height: 100%;
    width: 100%;
    transition-property: background-color;
    transition-duration: 0.5s;
}

.CardLink:hover {
    background-color: var(--secundary-color-blue)
}

.CardTekst {
    padding: var(--padding-margin-small);
    text-align: center;
}

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

#CardRij {
    margin-top: var(--padding-margin-medium);
    margin-bottom: var(--padding-margin-large);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--gap)
}





/* Overgang 2*/
#Overgang2 {
    width: 100%;
    height: auto;
    background-color: var(--primary-color-blue);
}




/* Sectie 2 - OverMij */
#OverMij {
    background-color: var(--primary-color-blue);
    padding-left: var(--padding-margin-large);
    padding-right: var(--padding-margin-large);
}

#OverMij h2 {
    color: var(--white);
}

#OverMij h3 {
    color: var(--white);
}

#OverMij h4 {
    color: var(--white);
}

#OverMij p {
    color: var(--white);
}

#OverMij li {
    color: var(--white);
}

#OverMijInhoud {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap);
    padding-top: var(--padding-margin-medium);
}

#OverMijBeeld,
#OverMijTekst {
    flex: 1;
}

#OverMijBeeld img {
    width: 100%;
    border-top-left-radius: 10rem;
    display: block;
}

#OverMijTekst h4 {
    margin-top: var(--padding-margin-small);
}

#OverMijTekst ul {
    list-style-type: disc;
    margin-left: 2rem;
    margin-top: 1rem;
}





/* Lijn */
#Lijn {
    background-color: white;
    height: 1rem;
    padding-left: var(--padding-margin-large);
    padding-right: var(--padding-margin-large);
}




/* Sectie 3 - Skills */
#Skills {
    background-color: var(--primary-color-blue);
    padding-top: var(--padding-margin-large);
    padding-bottom: var(--padding-margin-large);
    padding-left: var(--padding-margin-large);
    padding-right: var(--padding-margin-large);
}

#Skills h2 {
    color: var(--white);
}

#Skills p {
    color: var(--white);
}

#SkillsRij {
    margin-top: var(--padding-margin-medium);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

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

progress {
    margin-top: 1rem;
    width: 100%;
    height: 1rem;
    appearance: none;
}

progress[value]::-webkit-progress-bar {
    background-color: var(--white);
}

progress[value]::-webkit-progress-value {
    background-color: var(--secundary-color-blue);
}





/* Sectie 4 - Contact */
#Contact {
    background-color: var(--primary-color-blue)
}

#Contact-Afronding-Hoek {
    background-color: var(--white);
    padding-left: var(--padding-margin-large);
    padding-right: var(--padding-margin-large);
    padding-top: var(--padding-margin-large);
    padding-bottom: var(--padding-margin-large);
    border-top-right-radius: 15rem;

}

#ContactInhoud {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap);
    padding-top: var(--padding-margin-medium);
}

#ContactBeeld,
#ContactTekst {
    flex: 1;
}

#ContactBeeld img {
    width: 100%;
    border-top-left-radius: 15rem;
}

#Contact h4 {
    margin-top: 1rem;
    color: var(--primary-color-blue);
}




/* Footer */
footer {
    padding-top: var(--padding-margin-large);
    padding-left: var(--padding-margin-large);
    padding-right: var(--padding-margin-large);
    background-color: var(--primary-color-blue);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap);
}

#FooterLogo {
    padding-bottom: var(--padding-margin-large);
    flex: 1;
    max-width: 100%;

}

#FooterNav {
    padding-bottom: var(--padding-margin-large);
    flex: 3;
    display: flex;
    justify-content: center;
    transition-property: color;
    transition-duration: 0.5s;
}

footer a:hover {
    color: var(--secundary-color-blue);
}

#FooterElement {
    flex: 1;
    max-width: 100%;
}


footer li {
    display: inline;
    padding: 2rem;
}

footer a {
    color: var(--white);
}




/* PROJECTEN - PROJECTEN - PROJECTEN */
.ProjectRijBeelden-1,
.ProjectRijBeelden-2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--gap)
}

.ProjectRijBeelden-1 img,
.ProjectRijBeelden-2 img {
    display: block;
    height: auto;
    width: auto;
    max-width: calc(50% - var(--gap) / 2);

}

.ProjectRijBeelden-2 img {
    margin-top: var(--gap);
    max-width: calc(33.333% - var(--gap) * 2 / 3);
}

.Project {
    background-color: var(--white);
    padding-top: var(--padding-margin-large);
    padding-bottom: var(--padding-margin-large);
    padding-left: var(--padding-margin-large);
    padding-right: var(--padding-margin-large);
}

.Project h2 {
    color: var(--primary-color-red);
    text-align: center;
}

.Project p {
    text-align: center;
    margin-bottom: var(--padding-margin-medium);
    margin-left: 5rem;
    margin-right: 5rem;
}

.Project a {
    text-align: center;
}

.Button-Project {
    margin-top: var(--padding-margin-small);
    display: flex;
    justify-content: center;
}



.WillekeurigeProjecten {
    background-color: var(--primary-color-red);
    padding-left: var(--padding-margin-large);
    padding-right: var(--padding-margin-large);
    padding-bottom: var(--padding-margin-large);
}

.WillekeurigeProjecten h2 {
    color: var(--white);
    text-align: center;
    padding-top: var(--padding-margin-large);
    padding-bottom: var(--padding-margin-large);
    padding-left: var(--padding-margin-large);
    padding-right: var(--padding-margin-large);
}

.WillekeurigeProjecten-Rij {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap);
}

.WillekeurigProject1,
.WillekeurigProject2 {
    background-color: var(--white);
    transition-property: background-color;
    transition-duration: 0.5s;
    border-top-left-radius: 15rem;
}

.WillekeurigeProjecten h4 {
    color: var(--primary-color-blue);
    text-align: center;
    margin-bottom: var(--padding-margin-small);
}

.WillekeurigeProjecten img {
    height: auto;
    width: auto;
    margin-bottom: var(--padding-margin-small);
    border-top-left-radius: 15rem;
}

.WillekeurigeProjecten a {
    text-decoration: none;
    color: var(--primary-color-blue);
}

.WillekeurigProject1:hover {
    background-color: var(--secundary-color-blue);
}

.WillekeurigProject2:hover {
    background-color: var(--secundary-color-blue);
}




/* Responsive mobiel */
@media screen and (max-width: 768px) {
    p {
        font-size: 1rem;
    }

    h1 {
        font-size: 5rem;
    }

    h2 {
        font-size: 2.5rem;
    }

    h3 {
        font-size: 2rem;
    }

    h4 {
        font-size: 1.5rem;
    }

    li {
        font-size: 1rem;
    }

    .Button {
        font-size: 1rem;
        padding: 1rem;
        border-top-left-radius: 1rem;
        margin-top: var(--padding-margin-small);
        margin-right: 1rem;
    }

    #HeroSection {
        height: 100vh;
        background-image: url('/images/HeroSection-Mobiel.jpg');
        background-size: cover;
        display: flex;
        flex-direction: column;
    }

    #HeroSection-Tekst {
        margin-right: var(--padding-margin-large);
        margin-left: var(--padding-margin-mobiel-large);
        margin-top: 12rem;
    }

    #HeroSection-Golf {
        width: 100%;
    }

    #HeroSection-Golf img {
        width: 80%;
    }

    #Projecten {
        background-color: var(--white);
        padding-top: var(--padding-margin-mobiel-large);
        padding-left: var(--padding-margin-mobiel-large);
        padding-right: var(--padding-margin-mobiel-large);
        padding-bottom: var(--padding-margin-mobiel-large);
    }

    .Card {
        flex: 1 1 calc(50% - 1rem);
        max-width: calc(50%);
    }

    .CardTekst {
        padding: var(--padding-margin-mobiel-small);
    }

    #CardRij {
        margin-top: var(--padding-margin-mobiel-medium);
        margin-bottom: var(--padding-margin-mobiel-large);
        gap: var(--gap-mobiel);
    }

    #OverMij {
        padding-left: var(--padding-margin-mobiel-large);
        padding-right: var(--padding-margin-mobiel-large);
    }

    #OverMijInhoud {
        gap: var(--gap-mobiel);
        padding-top: var(--padding-margin-mobiel-medium);
        padding-bottom: var(--padding-margin-mobiel-small);
    }

    #OverMijBeeld img {
        border-top-left-radius: 3rem;
        min-width: 10rem;
        padding-bottom: var(--padding-margin-mobiel-small);
    }

    #OverMijTekst h4 {
        margin-top: var(--padding-margin-mobiel-small);
    }

    #Lijn {
        height: 0.5rem;
    }

    #Skills {
        padding-top: var(--padding-margin-mobiel-large);
        padding-bottom: var(--padding-margin-mobiel-large);
        padding-left: var(--padding-margin-mobiel-large);
        padding-right: var(--padding-margin-mobiel-large);
    }

    #SkillsRij {
        margin-top: var(--padding-margin-mobiel-medium);
        gap: var(--gap-mobiel);
    }

    progress {
        margin-top: 0rem;
        margin-bottom: 1rem;
        height: 1rem;
    }

    #Contact-Afronding-Hoek {
        padding-left: var(--padding-margin-mobiel-large);
        padding-right: var(--padding-margin-mobiel-large);
        padding-top: var(--padding-margin-mobiel-large);
        padding-bottom: var(--padding-margin-mobiel-large);
        border-top-right-radius: 10rem;
    }

    #ContactInhoud {
        gap: var(--gap-mobiel);
        padding-top: var(--padding-margin-mobiel-medium);
    }

    #ContactBeeld img {
        border-top-left-radius: 3rem;
        min-width: 10rem;
    }

    footer {
        padding-top: var(--padding-margin-mobiel-large);
        padding-left: var(--padding-margin-mobiel-large);
        padding-right: var(--padding-margin-mobiel-large);
        background-color: var(--primary-color-blue);
        gap: var(--gap-mobiel);
        display: flex;
        flex-direction: column;
    }

    #FooterElement {
        min-width: 20rem;
    }

    #FooterLogo {
        min-width: 20rem;
        padding-bottom: var(--padding-margin-mobiel-medium);
    }

    #FooterNav {
        display: flex;
        flex-direction: column;
        justify-content: center;
        transition-property: color;
        transition-duration: 0.5s;
        padding-bottom: var(--padding-margin-mobiel-large)
    }

    footer li {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1rem;
    }

    .ProjectRijBeelden-1,
    .ProjectRijBeelden-2 {
        gap: var(--gap-mobiel);
        justify-content: center;
    }

    .ProjectRijBeelden-2 img {
        max-width: calc(50% - var(--gap) * 1 / 2);
        margin-top: var(--gap-mobiel);
    }

    .Project {
        padding-left: var(--padding-margin-mobiel-large);
        padding-right: var(--padding-margin-mobiel-large);
        padding-top: var(--padding-margin-mobiel-large);
        padding-bottom: var(--padding-margin-mobiel-large);
    }

    .Project p {
        text-align: center;
        margin-bottom: var(--padding-margin-mobiel-medium);
        margin-left: 0rem;
        margin-right: 0rem;
    }

    .WillekeurigeProjecten {
        padding-left: var(--padding-margin-mobiel-large);
        padding-right: var(--padding-margin-mobiel-large);
        padding-bottom: var(--padding-margin-mobiel-large);
    }

    .WillekeurigeProjecten h2 {
        padding-left: var(--padding-margin-mobiel-large);
        padding-right: var(--padding-margin-mobiel-large);
        padding-top: var(--padding-margin-mobiel-large);
        padding-bottom: var(--padding-margin-mobiel-large);
    }

    .WillekeurigeProjecten img {
        max-width: 100%;
        margin-bottom: var(--padding-margin-mobiel-small);
        border-top-left-radius: 3rem;

    }
}