@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;1,200;1,300;1,400&family=Square+Peg&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=EB+Garamond:ital,wght@0,400;0,700;1,400&display=swap');
    @import url('https://www.hakendover.be/assets/css/crowl.animation.css');
    html {
        scroll-behavior: smooth;
    }
    
     :root {
        /*beige*/
        /*RAL 9002 of RAL 080 80 05*/
        --beige: #d5d0c3;
        --beige-rgb: rgb(213, 208, 195);
        /*blauw*/
        /*RAL 5003 of RAL 260 30 15*/
        --blauw: #324959;
        --blauw-rgb: rgb(50, 73, 89);
        --blauw-t: rgba(50, 73, 89, 0.5);
        --blauw-t4: rgba(50, 73, 89, 0.6);
        --blauw-t5: rgba(50, 73, 89, 0.7);
        --beige-t5: rgba(213, 208, 195, 0.6);
        --beige-t9: rgba(213, 208, 195, 0.9);
    }
    
    * {
        margin: 0;
        padding: 0;
        font-family: "Roboto Condensed", sans-serif;
        font-optical-sizing: auto;
        font-weight: 200;
        font-style: normal;
        color: var(--blauw);
    }
    
    body {
        background-color: #d5d0c3;
    }
    
    nav {
        position: fixed;
        top: 0px;
        left: 0px;
        background-color: var(--beige);
        /*border-radius: 3.5px;*/
        padding: 13px;
        width: 100%;
        z-index: 99999999999999;
    }
    
    nav a,
    nav a span {
        color: var(--blauw);
        text-decoration: none;
        font-weight: 300;
        padding: 13px;
    }
    
    nav a span {
        padding: 0px;
    }
    
    #home,
    #homepage {
        background-image: url(../images/sand1.jpg);
        background-size: cover;
    }
    
    #homepage figcaption {
        background-color: var(--beige-t5);
        padding: 3.5px;
        margin-top: 6.5px;
    }
    
    #homepage {
        height: 40vh;
        background-position: center;
    }
    
    #home img {
        width: 100%;
    }
    
    .nl {
        background-color: var(--blauw-t5);
        color: var(--beige);
        padding: 7.5px;
        border-radius: 13px;
        padding-left: 26px;
        padding-right: 26px;
        margin-bottom: 13px;
        text-decoration: none;
    }
    
    h3 {
        background-color: var(--beige-t5);
        color: var(--blauw);
        font-size: 2.3rem;
        padding: 7.5px;
        border-radius: 13px;
        padding-left: 26px;
        padding-right: 26px;
        margin-bottom: 13px;
    }
    
    ul {
        background-color: var(--beige-t5);
        color: var(--blauw);
        list-style-type: none;
        font-size: 1.3rem;
        padding: 7.5px;
        border-radius: 13px;
    }
    
    .rs {
        width: 100%;
        height: 100vh;
        overflow: hidden;
        display: flex;
    }
    
    #lune {
        height: 90vh;
    }
    
    .cs {
        width: 100vw;
        flex: 0 0 100%;
    }
    
    .pc {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    
    .pc h1 {
        font-size: 2.3rem;
        padding: 13px;
        font-weight: 400;
        color: white;
    }
    
    .pc p {
        font-size: 1.3rem;
        padding: 13px;
        max-width: 60vw;
        color: white;
        font-family: 'Nunito Sans', sans-serif;
    }
    
    #lune p,
    #lune h1 {
        color: var(--blauw);
    }
    
    #home figcaption {
        font-size: 1.4rem;
        font-weight: 400;
        text-align: center;
        padding-top: 26px;
    }
    
    .rs section {
        background-size: cover;
        background-position: center;
    }
    
    #wimpers {
        background-image: url(../images/wimpers.jpg);
    }
    
    #gelaatderma {
        background-image: url(../images/water.jpg);
    }
    
    #nagelsbiab {
        background-image: url(../images/nagels.jpg);
    }
    
    #nagelsgellak {
        background-image: url(../images/gellak.jpg);
    }
    
    #solutions {
        background-image: url(../images/beauty.jpg);
    }
    
    #laserontharing {
        background-image: url(../images/skin.jpg);
    }
    
    #laservoorbereiding {
        background-image: url(../images/woman.jpg);
    }
    
    #lune {
        /*background-image: url(../images/lune.jpg);*/
    }
    
    .split {
        display: flex;
        flex-direction: row;
        height: 100%;
    }
    
    .notsmall {
        flex: 0 0 calc(90vh * 0.75);
        background-size: cover;
        background-position: center;
    }
    /* Laat het section-element het resterende deel van de viewport innemen */
    
    .split section {
        flex: 1;
        padding-left: 26px;
        padding-right: 26px;
    }
    
    .split figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    
    #belofte {
        background-image: url(../images/2.jpg);
        background-position: 60% center;
    }
    
    #myname {
        width: 11%;
    }
    
    figure.notsmall {
        width: 100%;
        /* of de gewenste breedte */
        height: 100%;
        /* of de gewenste hoogte */
        background-size: cover;
        background-position: center;
        position: relative;
        /* Nodig voor positionering van het overgangsdiv */
    }
    
    .split p {
        margin: auto;
    }
    
    #solutions .pc,
    #wimpers .pc,
    #nagelsbiab .pc,
    #nagelsgellak .pc,
    #gelaatderma .pc,
    #laserontharing .pc,
    #laservoorbereiding .pc {
        background-color: var(--blauw-t4);
        height: 100%;
        width: 100%;
    }
    
    #belofte .pc,
    #lune .pc {
        background-color: var(--beige-t5);
    }
    
    #lune .pc,
    #belofte .pc {
        height: 100%;
        width: 100%;
    }
    
    iframe {
        border: 0px;
        width: 100%;
        height: 80%;
    }
    
    .longpage {
        margin: auto;
        max-width: 1200px;
        width: 80%;
        padding-top: 3vh;
        padding-bottom: 3vh;
    }
    
    .longpage h1 {
        font-size: 2rem;
        font-weight: 400;
        margin-top: 26px;
        margin-bottom: 13px;
    }
    
    .longpage h3 {
        font-size: 1.4rem;
        font-weight: 200;
        padding-left: 0px;
        border-bottom: 1px dotted var(--blauw-t);
        margin-top: 13Px;
    }
    
    .longpage p {
        font-size: 1.1rem;
        padding-top: 3.5px;
        padding-bottom: 3.5px;
        line-height: 1.4rem;
    }
    
    .longpage li {
        border: 1px solid var(--blauw-t5);
        margin-bottom: 3.5px;
        margin-top: 3.5px;
        font-size: 1.1rem;
        padding: 6.5px;
    }
    
    .longpage ul {
        margin: 0;
        padding: 0;
    }
    
    .longpage iframe {
        margin-top: 26px;
        margin-bottom: 26px;
        border: 0px;
    }
    
    footer {
        position: fixed;
        z-index: 1000;
        bottom: 0px;
        left: 0px;
        right: 0px;
        width: 100vw;
        height: 10vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--beige);
    }
    
    #boeking,
    .r100 {
        height: 120vh !important;
    }
    
    #boeking {
        background-color: #f9fafc;
    }
    
    footer section {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    footer a {
        padding: 6.5px;
        text-decoration: none;
    }
    
    @media (max-width:960px) {
        /*hier noteer je de uitzonderingsregels*/
        main {
            height: 60vh;
        }
        main img {
            width: 33%;
        }
        footer {
            height: 10vh;
        }
        footer section {
            display: flex;
            height: 100%;
            flex-direction: column;
            overflow: auto;
        }
        .pc p {
            font-size: 1.1rem;
        }
        nav a span {
            display: none;
        }
        h3 {
            font-size: 1.4rem;
        }
        .pc p {
            font-size: 1.2rem;
            padding: 13px;
            max-width: 80vw;
        }
        iframe {
            height: 65%;
        }
        .notsmall {
            display: none;
        }
        .split section {
            flex: 0 0 100%;
        }
        #myname {
            width: 19%;
        }
        #lune h1 {
            font-size: 1.4rem;
        }
        #home img {
            width: 113%;
        }
    }