html {
    box-sizing: border-box;
    background-color: #f8fff0;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

:root {
    /* Schaal: 1 eenheid = 1px in een browservenster van 1920x910
       (een 1920x1080 scherm met browserbalken).
       --s schaalt mee met breedte EN hoogte (voor pagina's zonder scroll),
       --sw alleen met de breedte (voor pagina's die scrollen). */
    --s: min(100vw / 1920, 100vh / 910);
    --sw: calc(100vw / 1920);
    --topbar-h: 12vh;
    /* Ruimte tussen de blokken op projectpagina's (desktop) */
    --blokruimte: 12vh;
}

body {
    margin: 0;
    padding: 0;
    overflow-y: scroll;
    overflow-x: hidden;
}

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

video,
iframe {
    max-width: 100%;
}

#topbar {
    width: 100%;
    max-width: 100vw;
    height: var(--topbar-h);
    background-color: #b2d4b6;
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0px 2px 20px #3742389e;
    z-index: +3;
}

@font-face {
    font-family: Cooper;
    src: url(fonts/cooperl.ttf);
}

@font-face {
    font-family: Nunito;
    src: url(fonts/Nunito-VariableFont_wght.ttf);
}

#name {
    font-family: Cooper;
    font-size: clamp(15px, calc(32 * var(--s)), 32px);
    color: #374238;
}

a {
    text-decoration: none;
}

#uibuttons {
    position: absolute;
    right: 20px;
    width: 30vw;
    height: 12vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    padding: 20px;
}

.uicss {
    font-family: Nunito;
    color: #374238;
    font-size: clamp(13px, calc(22 * var(--s)), 22px);
}

.uicss:hover {
    text-decoration: underline;
    cursor: pointer;
}

#logo {
    width: 20%;
    height: 12%;
    position: fixed;
    top: 0;
    left: 20px;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}

#maintitle {
    width: 40vw;
    height: 20vh;
    position: fixed;
    left: 10vw;
    top: 25vh;
    font-family: Cooper;
    font-size: clamp(22px, calc(40 * var(--s)), 40px);
    color: #374238;
}

#indextext {
    width: 35vw;
    height: 40vh;
    position: fixed;
    left: 10vw;
    top: 40vh;
    font-family: Nunito;
    font-size: clamp(14px, calc(25 * var(--s)), 25px);
    color: #374238;
}

.rainbowroadindex {
    border: solid 10px #b2d4b6;
    border-radius: 30px;
    box-shadow: 5px 5px 10px #243125b6;
    object-fit: contain;
    z-index: -2;
}

#doorwayindex {
    border: solid 10px #b2d4b6;
    border-radius: 30px;
    box-shadow: 5px 5px 10px #243125b6;
    object-fit: contain;
    z-index: -2;
}

.titles {
    width: 100vw;
    height: 20vh;
    position: relative;
    top: 20vh;
    font-family: Cooper;
    font-size: clamp(26px, calc(50 * var(--sw)), 50px);
    color: #374238;
    text-align: center;
    font-weight: bold;
    text-shadow: 3px 3px 10px #363e36a1;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .2s ease;
    background-color: #6f9679b7;
    border-radius: 30px;
}

.text {
    color: #f8fff0;
    width: min(500px, 90%);
    font-size: clamp(13px, calc(23 * var(--s)), 23px);
    text-shadow: 5px 5px 10px #37423890;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    font-family: Nunito;
}

#container1:hover .overlay {
    opacity: 1;
}

#container1 {
    max-width: min(600px, calc(600 * var(--s)));
    position: fixed;
    right: 10vw;
    top: 16vh;
    z-index: +2;
}

#container2:hover .overlay {
    opacity: 1;
}

#container2 {
    max-width: min(600px, calc(600 * var(--s)));
    position: fixed;
    right: 10vw;
    top: 57vh;
    z-index: +2;
}

#containerp1:hover .overlay {
    opacity: 1;
}

#containerp1 {
    position: relative;
    max-width: min(500px, calc(500 * var(--sw)));
    z-index: +2;
}

#projecten1 {
    position: relative;
    top: 20vh;
    width: 100%;
    max-width: 100vw;
    min-height: 50vh;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-evenly;
    padding: 10px;
    flex-wrap: nowrap;
}

#projecten2 {
    position: relative;
    width: 100%;
    max-width: 100vw;
    min-height: 50vh;
    top: 10vh;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-evenly;
    padding: 10px;
    flex-wrap: nowrap;
}

#projecten3 {
    position: relative;
    width: 100%;
    max-width: 100vw;
    min-height: 40vh;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-evenly;
    padding: 10px;
    flex-wrap: nowrap;
}

#aboutmetext {
    width: 35vw;
    height: 40vh;
    position: fixed;
    right: 20vw;
    top: 30vh;
    font-family: Nunito;
    font-size: clamp(14px, calc(22 * var(--s)), 22px);
    color: #374238;
    text-align: center;
}

#mefoto {
    max-width: min(380px, calc(380 * var(--s)));
    position: relative;
    left: 20vw;
    top: 18vh;
}

#contacttitle {
    height: 12vh;
    font-family: Cooper;
    font-size: clamp(26px, calc(50 * var(--sw)), 50px);
    color: #374238;
    text-shadow: 3px 3px 10px #363e36a1;
}

#contacttext {
    width: 35vw;
    height: 15vh;
    font-family: Nunito;
    font-size: clamp(15px, calc(23 * var(--sw)), 23px);
    color: #374238;
    text-align: center;
}

#contact {
    width: 100vw;
    height: auto;
    position: relative;
    top: 20vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2vh;

}

#contactinfo {
    font-family: Nunito;
    font-size: clamp(14px, calc(20 * var(--sw)), 20px);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL'0,
        'wght'400,
        'GRAD'0,
        'opsz'24;
    background-color: #b2d4b6;
    color: #374238;
    border-radius: 30px;
    padding: 10px;
    display: inline-block;
    vertical-align: middle;
}

#insta {
    background-color: #b2d4b6;
    color: #374238;
    border-radius: 30px;
    padding: 10px;
    display: inline-block;
    vertical-align: middle;
}

/* width */
::-webkit-scrollbar {
    width: 15px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f8fff0;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #b2d4b6;
    height: 10px;
    border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #758c78;
}

.inhoudfoto {
    max-width: min(500px, calc(500 * var(--sw)));
}

.inhoudfotoklein {
    max-width: min(400px, calc(400 * var(--sw)));
}

.inhoudfotostaand {
    max-width: min(300px, calc(300 * var(--sw)));
}

.inhoudfotogroot {
    max-width: min(600px, calc(600 * var(--sw)));
}

.inhoudfotoxl {
    max-width: min(1000px, calc(1000 * var(--sw)));
}

.inhoudfotostaandgroot {
    max-width: min(400px, calc(400 * var(--sw)));
}

.inhoud {
    width: 70vw;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}

.projecttekst {
    width: 30vw;
    height: 30vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: Nunito;
    font-size: clamp(14px, calc(20 * var(--sw)), 20px);
    text-align: center;
    color: #374238;
}

.projecttekst2 {
    width: 70vw;
    height: 30vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: Nunito;
    font-size: clamp(14px, calc(20 * var(--sw)), 20px);
    text-align: center;
    color: #374238;
}

#projectinhoud {
    width: 100vw;
    height: 100vh;
    position: relative;
    top: 20vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#logoflower {
    width: 30%;
    position: absolute;
    left: 87%;
    top: -1%;
}

/* Decoratieve bloemen: breedte zoals voorheen, maar nooit hoger dan 30% van het scherm */
#twof {
    width: 15%;
    max-height: 30vh;
    object-fit: contain;
    object-position: left bottom;
    position: fixed;
    bottom: 2%;
    left: 3%;
}

#heartscontact {
    width: 20%;
    max-height: 30vh;
    object-fit: contain;
    object-position: right bottom;
    position: fixed;
    bottom: 2%;
    right: 5%;
}

#tulips {
    width: 15%;
    max-height: 30vh;
    object-fit: contain;
    object-position: right bottom;
    position: fixed;
    bottom: 2%;
    right: 3%;
}

#tulips2 {
    width: 15%;
    max-height: 30vh;
    object-fit: contain;
    object-position: right bottom;
    position: fixed;
    bottom: 2%;
    left: 3%;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}


/* ---------- Projectpagina's op desktop: echte ruimte tussen de blokken ----------
   Vervangt de per-pagina "top"-waardes (#inhoud1 { top: 55vh } enz.), die de
   blokken alleen visueel verschoven. Pas --blokruimte bovenin aan voor meer of minder ruimte. */
@media (min-width: 901px) {
    .inhoud {
        top: 0 !important;
    }

    .titles+#projectinhoud {
        height: auto;
        top: 0;
        margin-top: 20vh;
        padding-bottom: 10vh;
        justify-content: flex-start;
        gap: var(--blokruimte);
    }

    .projecttekst,
    .projecttekst2 {
        height: auto;
    }
}


/* ---------- Telefoon en kleine tablet ---------- */
@media (max-width: 900px) {

    :root {
        --topbar-h: 92px;
    }

    /* Topbar: naam bovenaan, menu eronder */
    #topbar {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        box-shadow: 0px 1px 10px #3742389e;
    }

    #logo {
        position: relative;
        left: 0;
        width: auto;
        height: auto;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    #name {
        margin: 0;
        font-size: clamp(18px, 5.5vw, 26px);
    }

    #logoflower {
        position: static;
        width: 44px;
    }

    #uibuttons {
        position: static;
        width: 100%;
        height: auto;
        padding: 0 16px;
    }

    .uicss {
        margin: 0;
        font-size: 16px;
    }

    /* De inhoud begint onder de vaste topbar */
    body {
        padding-top: calc(var(--topbar-h) + 24px);
    }

    /* Homepage: alles onder elkaar */
    #maintitle,
    #indextext {
        position: static;
        width: auto;
        height: auto;
        margin-left: 6vw;
        margin-right: 6vw;
    }

    #maintitle {
        font-size: clamp(26px, 7.5vw, 34px);
        margin-bottom: 12px;
    }

    #indextext {
        font-size: 17px;
        line-height: 1.5;
        margin-bottom: 8px;
    }

    #container1,
    #container2 {
        position: relative;
        right: auto;
        top: auto;
        width: 88vw;
        max-width: 520px;
        margin: 0 auto 24px;
    }

    #container1 img,
    #container2 img {
        display: block;
        width: 100%;
    }

    #twof {
        position: static;
        display: block;
        width: 28vw;
        max-width: 130px;
        max-height: none;
        margin: 8px auto 24px;
    }

    .text {
        font-size: 16px;
    }

    /* Projectenpagina */
    .titles {
        top: 0;
        height: auto;
        padding: 0 5vw;
        margin-bottom: 8px;
        font-size: clamp(26px, 8vw, 34px);
        text-shadow: 3px 3px 10px #363e3636;
    }

    #projecten1,
    #projecten2,
    #projecten3 {
        top: 0;
        min-height: 0;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        padding: 10px 5vw;
    }

    #containerp1 {
        width: 100%;
        max-width: 520px;
    }

    /* Projectpagina's */
    #projectinhoud {
        width: 100%;
        height: auto;
        min-height: 0;
        top: 0;
        padding: 0 5vw 40px;

    }

    .inhoud {
        flex-direction: column;
        width: 100%;
        gap: 16px;
        margin: 10px 0;
        /* Zet de per-pagina verschuivingen (#inhoud1 { top: 75vh } enz.) uit op telefoon */
        top: 0 !important;
    }

    .projecttekst,
    .projecttekst2 {
        width: 100%;
        height: auto;
        min-height: 0;
        font-size: 16px;
    }

    .inhoudfoto,
    .inhoudfotoklein,
    .inhoudfotostaand,
    .inhoudfotogroot,
    .inhoudfotoxl,
    .inhoudfotostaandgroot {
        max-width: min(100%, 420px);
    }

    /* Video's en embeds: volle breedte, hoogte volgt de beeldverhouding */
    video,
    iframe {
        width: 100%;
        height: auto;
    }

    iframe {
        aspect-ratio: 16 / 9;
    }

    /* Over mij */
    #aboutmetext {
        position: static;
        width: auto;
        height: auto;
        margin: 0 10vw 25px;
        font-size: 17px;
    }

    #mefoto {
        display: block;
        left: 0;
        top: 0;
        max-width: min(250px, 60vw);
        margin: 0 auto 16px;
    }

    /* Contact */
    #contact {
        top: 0;
        width: 100%;
        padding: 0 6vw;
        gap: 4vh;
    }

    #contacttitle {
        height: auto;
        margin-bottom: 12px;
        font-size: clamp(26px, 8vw, 34px);
    }

    #contacttext {
        width: 100%;
        height: auto;
        font-size: 17px;
    }

    #contactinfo {
        font-size: 16px;
    }

    /* Decoratieve bloemen/harten: onder de tekst in plaats van vast over het scherm */
    #heartscontact,
    #tulips,
    #tulips2 {
        position: static;
        display: inline-block;
        width: 34vw;
        max-width: 140px;
        max-height: none;
        margin: 24px 4vw;
    }

    body:has(#tulips, #tulips2) {
        text-align: center;
    }

    #heartscontact {
        display: block;
        margin: 24px auto;
    }
}

/* Touchscreens hebben geen hover: toon de projecttitel altijd onderaan de afbeelding */
@media (hover: none) {
    .overlay {
        opacity: 1;
        background: linear-gradient(to top, #6f9679e6 0%, #6f967900 55%);
    }

    .text {
        top: auto;
        bottom: 8%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}