/*voeg het font amaticsc toe vanuit de text folder*/
@font-face {
    font-family: amaticBold;
    src: url('../text/AmaticSC-Bold.ttf');
}

@font-face {
    font-family: amatic;
    src: url('../text/AmaticSC-Regular.ttf');
}




:root {
    --darkorange: #FCBB97;
    --lightorange:#FFD7CB;
    --background: #FDEEE9;
    --white: #FFFFFF;
    --grey: #B4B6B5;
    --blue: #BEC1FE;
    --activecolor: #5F5F5F;
    --darkblue: #8186FB;


}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--background);
    overflow-x: hidden;
    overflow-y: scroll;
}
h1 {
    font-family: 'amaticBold';
    font-weight: 700;
    font-size: 48px;
    margin-bottom: 0.5em;
}

h2 {
    font-family: 'amaticBold';
    font-weight: 700;
    font-size: 36px;
    margin-bottom: 0.5em;
}

h3 {
    font-family: 'amaticBold';
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 0.5em;
}
p{
    font-family: sans-serif;
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 0.5em;
}
nav {
    /*De navigatie zal langs de linkerkant op mobile verschijnen*/
    font-family: sans-serif;
    letter-spacing: 4px;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;

    display: flex;
    width: 10em;
    height: 100vh;
    flex-direction: column;
    justify-content: top;
    flex-shrink: 0;
    background-color: var(--lightorange);
    position: fixed;
    top: 0;
    left: -9em;
    z-index: 2;

    transition: transform 0.3s ease; /* Add a smooth transition */


    
}

nav a {
    text-decoration: none;
    color: var(--grey);
    padding: 0.5em 2em;
}
.active {
    color: var(--activecolor);
}

nav img {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    margin-bottom: 20px;
}


.opennav {
    cursor: pointer;

    transition: transform 0.3s ease-in-out;
}

.open{
    transform: translateX(90%);

}
.opennav svg {

    width: 30px;
    height: 30px;
    margin: 1em 0.0em;
    margin-bottom: 20px;
    fill: var(--grey);
    z-index: 3;
    position: fixed;
    /**/
}

main {
    margin-left: 10em;
    padding: 1em;
    position: relative;
    z-index: 0;
    top: 0em;

}

.mysql {
    background-color: var(--grey);
    position: absolute;
    display: block;
    width: 96px;
    height: 96px;
    text-align: center;
    border-radius: 100%;
    top: -150px;

    /*de div beweegt horizontaal over het scherm, en botst tegen de rand*/
    animation: move 5s infinite ease-in-out alternate;

}

.mysql h2 {
    font-family: 'amaticBold';
    font-weight: 700;
    font-size: 24px;
    /*in het midden van de div*/
    position: relative;
    top: 35%;
}

/*de div beweegt horizontaal over het scherm, en botst tegen de rand*/

@keyframes move {
    0% {
        left: -60%;
    }

    100% {
        left: 64%;
    }
}


.php {
    background-color: var(--blue);
    position: relative;
    display: block;
    width: 96px;
    height: 96px;
    text-align: center;
    border-radius: 100%;
    margin-top: -1em;

    /*de div beweegt horizontaal over het scherm, en botst tegen de rand*/
    animation: move 4s infinite ease-in-out alternate-reverse;

}

.php h2 {
    font-family: 'amaticBold';
    font-weight: 700;
    font-size: 24px;
    /*in het midden van de div*/
    position: relative;
    top: 35%;
}

.nodeJs {
    background-color: var(--lightorange);
    position: relative;
    display: block;
    width: 96px;
    height: 96px;
    text-align: center;
    border-radius: 100%;
    margin-top: 2em;

    /*de div beweegt horizontaal over het scherm, en botst tegen de rand*/
    animation: move 6s infinite ease-in-out alternate;

}

.nodeJs h2 {
    font-family: 'amaticBold';
    font-weight: 700;
    font-size: 24px;
    /*in het midden van de div*/
    position: relative;
    top: 35%;
}

.singer {
    background-color: var(--white);
    position: relative;
    display: block;
    width: 96px;
    height: 96px;
    text-align: center;
    border-radius: 100%;
    margin-top: 2em;

    /*de div beweegt horizontaal over het scherm, en botst tegen de rand*/
    animation: move 7s infinite ease-in-out alternate-reverse;

}

.singer h2 {
    font-family: 'amaticBold';
    font-weight: 700;
    font-size: 24px;
    /*in het midden van de div*/
    position: relative;
    top: 35%;
}

header {
    position: relative;
    top:  42em;
    left: 2em;

}

header h1, p {
    width: 90%;
}
header p {
    margin-top: 2em;
}



.buttons {
    display: flex;
    justify-content: start;
    margin-top: 2em;
    font-family: sans-serif;

}
/*2de element van class button*/
.buttons a:nth-child(2) {
    margin-left: 1em;
}

.about {
    background-color: var(--darkblue);
    display: block;
    padding: 0.8em 2em;
    text-decoration: none;
    color: var(--white);    border-radius: 10px;



}

.contact {
    background-color: var(--darkorange);
    display: block;
    padding: 0.8em 2em;
    text-decoration: none;
    color: var(--white);
    border-radius: 10px;


}


footer {
    position: relative;
    top: 20em;  
    background-color: var(--lightorange);
    width: 100%;
    text-align: center;
    padding-top: 2em;
    height: 100%;
   
}

.socialMedia {
    margin-top: 2em;
}

.socialMedia svg {
    width: 50px;
    height: 50px;
    margin: 0.5em 0.5em;
    fill: var(--grey);
}

.email {
    position: relative;
    margin-top: 2em;
    top: 1em;
}


/*about*/

.aboutMain {
    position: relative;
    top: 0em;
    left: -8em;
    width: 90%;
    height: 100%;
}

.mystory div {
    background-color: var(--white);
    margin-top: 2em;
    padding: 1em 0.5em;
}

.mystory div:nth-child(1) {
    border-radius: 2em 2em 0em 2em;

}
.mystory div:nth-child(2) {
    border-radius: 2em 2em 2em 0em;

}
.mystory div:nth-child(3) {
    border-radius: 2em 2em 0em 2em;

}
.mystory div:nth-child(4) {
    border-radius: 2em 2em 2em 0em;

}

.mystory div:nth-child(5) {
    border-radius: 2em 2em 0em 2em;

}

/*work*/

.workMain {
    position: relative;
    top: 0em;
    left: -8em;
    width: 90%;
    height: 100%;
}

.workmain .projects div {
    background-color: var(--white);
    margin-top: 2em;
    padding: 1em 0.5em; 
    border-radius: 2em;

}

.projects div h3 {
    margin-top: 1em;
    text-align: center;

}
.projects div img {
    margin-top: 1em;
    position: relative;
    left: 2em;
    width: 80%;
    border-radius: 2em;

}
.projects div p {
    margin-top: 1em;
}



.projects div:nth-child(2) {
    border-radius: 2em 2em 0em 2em;

}   

.projects div span {
    display: inline-block;
    padding: 0.5em 1em;
    border: var(--blue) solid 1px;
    border-radius: 2em;
    margin-top: 1em;
    margin-left: 1em;


}

.projects div a {
    text-decoration: none;
    color: var(--darkblue);
    font-weight: 700;
    font-size: 16px;
    margin-left: 0em;
    margin-top: 1em;
    display: grid;

}

.workFooter {
    position: relative;
    top: 280em;
    height: 20em;
    
}

.musicMain {
    position: relative;
    top: 0em;
    left: -8em;
    width: 90%;
    height: 100%;

}

.musicProject  {
    background-color: var(--white);
    width: 100%;
    padding: 2em 1em;
    border-radius: 2em;
    margin-top: 2em;
    margin-bottom: 2em;
   
}

.musicProject img {
    width: 100%;
    height: 100%;
    border-radius: 2em;
}

.guardianAngel {
    text-decoration: none;
    color: var(--darkblue);
    font-weight: 700;
    font-size: 16px;
    margin-left: 0em;
    margin-top: 1em;
    display: grid;
}


.musicFooter {
    position: relative;
    top:    2em;
    height: 20em;
}

/*contact*/

.email {
    text-decoration: none;
    color: var(--darkblue);
    font-weight: 700;
    font-size: 16px;
    margin-left: 0em;
    margin-top: 1em;
}

/*ipad mini*/

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    nav {
        width: 15em;
        left: -14em;
    }

    main {
        margin-left: 20em;
        top: 0em;

    }

    .mysql {
        position: relative;
        top: -8em;
    }

    .php {
        position: relative;
        top: -6em;
    }

    .nodeJs {
        position: relative;
        top: -4em;
    }

    .singer {
        position: relative;
        top: -2em;
    }

    header {
        position: relative;
        left: 2em;
    }

    .buttons {
        margin-top: 2em;
        margin-left: 2em ;
    }

    .contact {
        position: relative;
        left: 12em;

    }

    .aboutMain {

        left: -14em;
    }

    .mystory div {
        width: 90%;

    }

    .workMain {
        left: -14em;
    }

    .workmain .projects div {
        width: 90%;
    }

    .workFooter {
        position: relative;
        top: 320em;
        height: 20em;
    }

    /*music*/

    .musicMain {
        left: -14em;
    }

    .musicProject  {
        width: 90%;
    }

    iframe {
        width: 90%;
        position: relative;
    }

    .musicFooter {
        position: relative;
        top: 2em;
        height: 20em;
    }

    /*contact*/

    .contactFooter {
        position: relative;
        top: 25em;
        height: 20em;
    }



    

}

/*desktop*/

@media only screen and (min-width: 1025px) {
    

nav {
    width: 15em;
    left: 0em;
}

.opennav {
    display: none;
}

main {
    width: 80%;
    left: 30em;
}

.mysql{
    position: relative;
    top: -8em;
    left: 0em;
}

@keyframes move {


    0% {
        left: -26%;
    }

    100% {
        left: 64%;
    }
}

header {
    position: relative;
    top:  42em;
    left: 20em;
    
}

/*about*/

.aboutMain {

    left: 10em;
    width: 100%;

}

.mystory div {

    width: 40%;

}

.mystory div:nth-child(2) {
    margin-left: 40%;
}

.mystory div:nth-child(4) {
    margin-left: 40%;
}


/*work*/

.workMain {


    left: 10em;
    width: 80%;
    height: 100vh ;   
    position: absolute;

    


}

.projects {
    width: 100%;
    height: 100%;
}

.workmain .projects div {

    width: 30%;
    margin-left: 0%;
    position: relative;


}



.projects div:nth-child(3) {
    margin-left: 35%;
    top: -44.5em;
    position: relative;




}

.projects div:nth-child(4) {


margin-left: 70%;
    top: -91em;
    position: relative;
}

.projects div:nth-child(5) {
    margin-left: 0%;
    top: -80em;
    position: relative;
}

.projects div:nth-child(6) {
    margin-left: 35%;
    top: -123em;
    position: relative;
}


.projects div:nth-child(7) {
    margin-left: 70%;
    top: -167em;
    position: relative;
}

.projects div:nth-child(8) {
    margin-left: 0%;
    top: -155em;
    position: relative;
}

.workFooter {
    position: relative;
    top: 200em;
    height: 20em;   
}

/*music*/

.musicMain {



    left: 10em;
    width: 80%;
    height: 100% ;   
    position: relative;
}

.musicProject  {
    width: 30%;
    margin-left: 35%;
    position: relative;
    top: 0em;
}

iframe {
    width: 30%;
    position: relative;
    top: 0em;
    margin-left: 35%;


}

/*contatct*/

.contactFooter {

    position: relative;
    top: 60em;
    height: 20em;
}

.contactImg {
    width: 40%;
    position: relative;
    top: 0em;
    left: 0em;
    border-radius: 2em;
}








    }