body{
    margin: 0;
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
}
.bodycenter{
    width: 1200px;
    margin: auto;
}

a{
    color: inherit;
    text-decoration: none;
}
.dark{
    background-color: #4f4d5e;
}
.pink{
    background-color: #ff66c4;
}

header{
    width: 90vw;
    height: 90px;
    z-index: 10;
    margin: 0 5vw;
    overflow: hidden;
    cursor: auto;
    pointer-events: all;
}

.headercontainer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    
    margin: auto;
}
.headerlogo{
    height: 100%;
    display: flex;
} 
.headerlogo a{
    height: 70%;
    margin: auto;
}
.headerlogo img{
    height: 100%;
}

header ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
header li{
    float: left;
    padding: 10px 0;
    margin: 0 5px;
    font-size: 20px;
    color: #ff66c4;
    font-weight: 400;
    font-family: 'Quicksand', sans-serif;
}
header li a{
    padding: 10px 24px;
}
#darkscreen header .button, header .button{
    background-color: #ff66c4;
    border-radius:40px ;
    color: #4f4d5e;
    font-weight: 600;
}
#pinkscreen header .button{
    background-color: #4f4d5e;
    border-radius:40px ;
    color: #ff66c4;
    font-weight: 600;
}
#darkscreen header .hover, header li:hover{
    /* border: 2px solid #ff66c4; */
    -webkit-box-shadow: 0px 0px 0px 2px #ff66c4;
    -moz-box-shadow: 0px 0px 0px 2px #ff66c4;
    box-shadow: 0px 0px 0px 2px #ff66c4;
    border-radius:38px ;
}

#pinkscreen header .hover{
    /* border: 2px solid #4f4d5e; */
    -webkit-box-shadow: 0px 0px 0px 2px #4f4d5e;
    -moz-box-shadow: 0px 0px 0px 2px #4f4d5e;
    box-shadow: 0px 0px 0px 2px #4f4d5e;
    border-radius:38px ;
}
header .button{
    border: none !important;
}

header a:hover{
    cursor: pointer;
    
}
main{
    cursor: none;
    height: 100vh;
    width: 100vw;
}
.screen{
    height: 100vh;
    width: 100%;
    pointer-events: none;
    display: grid;
    align-content: space-between;
    place-items: center;
    
    overflow: hidden;
    position: absolute;

}
.screen h2{
    font-size: 7vw;
    font-weight: bold;
    
    margin: 0px 20vw;
    width: 60vw;
}


#darkscreen h2{
    color: white;
}
#darkscreen span{
    font-family: 'Indie Flower', cursive;
    color: #ff66c4;
}
#darkscreen, #darkscrene ,.mainpagelogo{
    background-color: #4f4d5e;
}
#pinkscreen header li{
    color: #4f4d5e;
}
#pinkscreen h2{
    color: #4f4d5e;
}
#pinkscreen span{
    font-family: 'Indie Flower', cursive;
    color: white;
}
#pinkscreen, #pinkscreen .mainpagelogo{
    background-color: #ff66c4;
}

#movebutton{
    display: none;
    content: '';
    z-index: 100;
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: white;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

#movebutton::before{
    content: '';
    display: block;
    background-color: transparent;
    width: 10px;
    height: 10px;
    animation: moveBefore 8s ease-in-out infinite;
    border-top: #4f4d5e 2px solid;
    border-left: #4f4d5e 2px solid;
}
#movebutton::after{
    content: '';
    display: block;
    background-color: transparent;
    width: 10px;
    height: 10px;
    animation: moveAfter 8s ease-in-out infinite;
    border-top: #4f4d5e 2px solid;
    border-left: #4f4d5e 2px solid;
}

@keyframes moveAfter {
    from{
        transform: rotate(135deg) translate(-15px, -18px);
    }
    5%{
        transform: rotate(135deg) translate(-18px, -21px);
    }
    10%{
        transform: rotate(135deg) translate(-15px, -18px);
    }
    15%{
        transform: rotate(135deg) translate(-18px, -21px);
    }
    20%{
        transform: rotate(135deg) translate(-15px, -18px);
    }
    to{
        transform: rotate(135deg) translate(-15px, -18px);
    }
}
@keyframes moveBefore {
    from{
        transform: rotate(-45deg) translate(-7px, 28px);
    }
    5%{
        transform: rotate(-45deg) translate(-10px, 25px);
    }
    10%{
        transform: rotate(-45deg) translate(-7px, 28px);
    }
    15%{
        transform: rotate(-45deg) translate(-10px, 25px);
    }
    20%{
        transform: rotate(-45deg) translate(-7px, 28px);
    }
    to{
        transform: rotate(-45deg) translate(-7px, 28px);
    }
}

#intro{
    padding: 0px 25vw;
    margin-top: -10px;
    background: #3c3b47;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.intro-image img{
    object-fit: cover;
    aspect-ratio: 1/1;
    width: 16%;
    right: 15%;
    border-radius: 50%;
    margin-right: 30px;
    position: absolute;
}
.intro-image div{
    width: 70%;
}
#intro h1{
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    display: flex;
    gap: 10px;
}
#jumptext{
    display: flex;
    float: right;
    margin-right: auto;
}
#intro h1 span{
    color: #ff66c4;
}
.jump{
    animation:jump infinite 4s ;
}
@keyframes jump {
    from {
      transform: translateY(0px);
    }
    10% {
        transform: translateY(-10px);
    }    
    20% {
        transform: translateY(2px);
    }
    25%{
        transform: translateY(0px);
    }
    to {
        transform: translateY(0px);
    }
}
#intro h2{
    font-size:20px ;
    color: white;
}
#intro p{
    color: white;
}
#intro p span{
    color: #ff66c4;
    font-size: 24px;
}
#intro p .speels{
    font-family: 'Indie Flower', cursive;
    font-size: 28px;
}
#intro p .strak{
    font-family: 'Roboto Slab', serif;
}
#intro p .groei{
    font-family: 'Major Mono Display', monospace;
    font-size: 20px;
}
.aanbodcardcontainer{
    display: flex;
    flex-direction: column;
}
.aanbodcard{
    padding: 40px 30vw;
    max-width: 1100px;
    position: relative;
}
.aanbodcard ul{
    margin-left: auto;
    width: 100px;
    text-align: left;
}
.aanbodcard h2{
    color: #ff66c4;
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    margin: 0;
}
.aanbodcard h3{
    font-family: 'Quicksand', sans-serif;
    font-size: 18px;
    margin: 0;
}
.aanbodcard img{
    position: absolute;
    top: 50%;
    left: 35%;
    transform: translate(-50%, -50%);
    height: 65%;
}
.aanbodcard-pink p{
    width: 65%;
    text-align: left;
}
.aanbodcard-pink img{
    left: 70%;
    height: 60%;
}
.aanbodcard-pink h2{
    color: #4f4d5e;
    text-align: left;
}

.aanbodcard{
    text-align: right;
    color: white;
}
.aanbodcard-pink{
    background-color: #ff66c4;
    color: white;
}
.aanbodcard-img{
    height: 50px;
    width: 100vw;
}


.mail{
    background-color: #fcfcfc;
    color: #3c3b47;
    padding: 40px 60px;
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translate(-50%,-50%);
}



#contact{
    margin-top: 50px;
    margin-bottom: 100px;
    display: flex;
    justify-content: center;
    position: relative;
}

.contactform{
    display: flex;
    position: relative;
    width: 50%;
    align-items: center;
    background-color: #ff66c4;
    padding: 30px 30px;
    border-radius: 20px 0 0 20px;
}
.contactform form{
    width: 600px;
    display: flex;
    flex-direction: column;
}
.contactform label{
    width: 100%;
    margin-bottom: 5px;
}
.contactform input, .contactform select, .contactform textarea{
    border: 2px solid #3c3b47;
    outline: none;
    padding: 10px 20px;
    background-color: transparent;
    border-radius: 10px;
    font-size: 14px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 20%;
    resize: vertical;
}
.contactform input:focus, .contactform select:focus, .contactform textarea:focus{
    border: 2px solid #a33d7c;
}
.contactSendButton{
    outline: none;
    border: none;
    padding: 30px;
    background-color: #3c3b47;
    border-radius: 10px;
    color: #ff66c4;
    font-size: 14px;
    margin-top: 50px;
    margin-left: 10px;
    margin-right: 20%;
    transition: 200ms;
    cursor: pointer;
}
.contactsendbutton:hover{
    transform: scale(1.05);
}
@keyframes contactbtn {
    from {
      transform: scale(1);
    }
    40% {
      transform: scale(0.9);
    }
    to {
      transform: scale(1.1);
    }
  }

.contactadress{
    color: white;
    margin: auto 0;
    margin-right: 50px;
    padding: 30px 30px 30px 20%;
    border-radius: 0 20px 20px 0;
    width: 30%;
    background-color: #3c3b47
}
.contactitem{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
}
.emailVerification{
    display: flex;
    height: 90vh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.emailStatusImage{
    
    height: 20%;
}
.emailVerification a{
    background-color: #ff66c4;
    border-radius: 40px;
    color: #4f4d5e;
    font-weight: 600;
    padding: 20px;
    font-size: 24px;
}




footer{
    position: relative;
    display: flex;
    flex-direction: column;
}
footer > img{
    width: 100vw;
}
.fbg-1{
    background-color: #3c3b47;
}
.fbg-2{
    background-color: #4d4c66;
}
#footerlogos{
    background-color: #3c3b47;
    min-height: 80px;
    display: flex;
    gap: 4%;
    justify-content: center;
    padding: 20px;
    align-items: center;
    overflow: unset;
}
#footerbottom{
    background-color: #2c2c30;
}

.footerlogo{
    height: 75%;
    max-width: 160px;
}

#footercontent{
    display: flex;
    justify-content: center;
    gap: 5%;
    padding: 50px;
    padding: 50px;
    background-color: #4d4c66;

}
#footercontent div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: left;
    gap: 5px;
    width: 25%;
    color: #bdbdbd;
}
#footercontent span, #footercontent form{
    width: 100%;
}
.footercontact form{
    display: flex;
    align-items: center;
}
.footercontact input[type='email']{
    border: 2px solid #3c3b47;
    outline: none;
    width: 100%;
    padding: 10px 20px;
    background-color: transparent;
    border-radius: 10px;
    color: white;
    font-size: 14px;
    margin-right: 10px;
}
.footercontact input[type='email']:focus{
    border: 2px solid #ff66c4;
}
.footercontact button{
    outline: none;
    padding: 5px 20px;
    background-color: #3c3b47;
    border: 2px solid #3c3b47;
    color: #ff66c4;
    border-radius: 10px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    height: 40px;
}
.footercontact button:hover, .footercontact button:focus{
    color: #3c3b47;
    border: 2px solid #ff66c4;
    background-color: #ff66c4;
}
.footerlinks a:hover{
    color: #ff66c4;
}
.copyright{
    position: absolute;
    transform: translate(-50%, -50%);
    bottom: 3px;
    left: 50%;
    color: #bdbdbd;
}
.footerlogo img{
    width: 100%;
}


@media (max-width: 992px) { 
    .screen h2{
        font-size: 7vw;
        font-weight: bold;
        
        margin: 0px 10vw;
        width: 80vw;
    }
    header {
        overflow: unset;
        padding-bottom: 90px;
        margin-bottom: 20px;
    }
    .headercontainer{
        flex-direction: column;
        width: 100%;
    }
    .headercontainer ul{
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    #intro{
        padding: 40px 5vw;
        background-size: 200%;
        background-position: top;
    }
    #intro h1{
        flex-direction: column;
        margin-top: 20px;
    }
    .aanbodcard{
        padding: 40px 10vw;
    }
    .aanbodcard-img{
        margin: -1px 0;
    }
    .aanbodcard h2{
        text-align: center;
    }
    .aanbodcard h3{
        text-align: left;
    }
    .aanbodcard ul{
        margin-right:auto;
        margin-left: 0%;
    }
    .aanbodcard p{
        text-align: left;
        width: 100% !important;
    }
    .aanbodcard img{
        position: unset;
        transform: translate(0,0);
        margin: 10% 20% 0;
        width: 60%;
    }
    footer {
        font-size: 12px;
    }
    footer .footerbg{
        height: 40vh;
        transform: translateX(-25%);
    }
    footer .footerlogo{
        width: 30%;
    }
    #footercontent{
        flex-direction: column;
        align-items: center;
    }
    #footercontent div{
        width: 90%;
    }
    #footercontent .footerlinks{
        margin-top: 20px ;
        flex-direction: row;
    }
    .copyright{
        position: unset;
        text-align: center;
        background-color: #2c2c30;
        font-size: 12px;
        display: block;
        width: 100%;
        transform: translate(0,-50%);
    }

    #footerlogos{
        margin: -1px ;
        
    }
    .footerlogo img{
        width: 100%;
    }
    #footerlogos .footerlogo{
        width: 40%;
        max-width: 160px;
    }
    #contact{
        flex-direction: column-reverse;
    }
    #contact .contactform{
        width: 75%;
        margin-left: auto;
        padding-right: 0px;
    }
    #contact .contactadress{
        margin-left: 0;
        margin-top: 50px;
        width: 60%;
    }
    #intro{
        text-align: center;
    }
    .intro-image{
        flex-direction: column-reverse !important;
    }
    .intro-image img{
        position: unset;
        width: 250px;
        height: 250px;
        margin: auto;
        margin-top: 40px;
    }
    #intro #jumptext{
        margin-left: auto;
    }
    .intro-image div{
        width: 100%;
        padding: 0 10%;
    }
 }