.background {
    width: 1425px;
    height: 700px;
    background-color: rgb(55, 47, 192);
    position: absolute;
    transform:
        translate(0px, 0px) skew(0deg, 0deg) rotate(0deg);

    animation-name: day_night;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes day_night {
    0% {
        background-color: rgb(147, 228, 233);
    }

    15% {
        background-color: rgb(147, 228, 233);
    }

    35% {
        background-color: rgb(28, 29, 87);
    }

    65% {
        background-color: rgb(28, 29, 87);
    }

    85% {
        background-color: rgb(147, 228, 233);
    }

    100% {
        background-color: rgb(147, 228, 233);
    }
}

.moon {
    width: 200px;
    height: 200px;
    background-color: rgb(55, 47, 192);
    position: absolute;
    border-radius: 50%;
    transform:
        translate(100px, 150px) skew(0deg, 0deg) rotate(0deg);

    animation-name: moon;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes moon {
    0% {
        background-color: rgb(147, 228, 233);
    }

    15% {
        background-color: rgb(147, 228, 233);
    }

    35% {
        background-color: rgb(227, 228, 203);
    }

    65% {
        background-color: rgb(227, 228, 203);
    }

    85% {
        background-color: rgb(147, 228, 233);
    }

    100% {
        background-color: rgb(147, 228, 233);
    }
}

.cresent {
    width: 200px;
    height: 200px;
    background-color: rgb(55, 47, 192);
    position: absolute;
    border-radius: 50%;
    transform:
        translate(175px, 150px) skew(0deg, 0deg) rotate(0deg);

    animation-name: cresent;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes cresent {
    0% {
        background-color: rgb(147, 228, 233);
    }

    15% {
        background-color: rgb(147, 228, 233);
    }

    35% {
        background-color: rgb(28, 29, 87);
    }

    65% {
        background-color: rgb(28, 29, 87);
    }

    85% {
        background-color: rgb(147, 228, 233);
    }

    100% {
        background-color: rgb(147, 228, 233);
    }
}


.sun {
    width: 200px;
    height: 200px;
    background-color: rgb(233, 187, 20);
    position: absolute;
    border-radius: 50%;
    transform:
        translate(1125px, 150px) skew(0deg, 0deg) rotate(0deg);

    animation-name: sun;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes sun {
    0% {
        background-color: rgb(233, 187, 20);
    }

    15% {
        background-color: rgb(233, 187, 20);
    }

    35% {
        background-color: rgb(28, 29, 87);
    }

    65% {
        background-color: rgb(28, 29, 87);
    }

    85% {
        background-color: rgb(233, 187, 20);
    }

    100% {
        background-color: rgb(233, 187, 20);
    }
}


.neck {
    width: 400px;
    height: 300px;
    background-color: rgb(39, 52, 15);
    position: absolute;
    transform:
        translate(500px, 400px) skew(0deg, 0deg) rotate(0deg)
}

.neck_shadow {
    width: 400px;
    height: 150px;
    background-color: rgb(24, 33, 8);
    position: absolute;
    transform:
        translate(500px, 400px) skew(0deg, 0deg) rotate(0deg)
}

.forehead_back {
    width: 300px;
    height: 300px;
    background-color: rgb(38, 51, 16);
    position: absolute;
    transform:
        translate(550px, 75px) skew(0deg, 0deg) rotate(45deg);
    border-radius: 50px
}

.head_base_1 {
    width: 400px;
    height: 300px;
    background-color: rgb(39, 52, 15);
    position: absolute;
    transform:
        translate(400px, 100px) skew(0deg, 0deg) rotate(10deg)
}

.head_base_2 {
    width: 400px;
    height: 300px;
    background-color: rgb(39, 52, 15);
    position: absolute;
    transform:
        translate(600px, 100px) skew(0deg, 0deg) rotate(-10deg)
}

.jaw_base_1 {
    width: 300px;
    height: 200px;
    background-color: rgb(61, 82, 23);
    position: absolute;
    transform:
        translate(450px, 275px) skew(0deg, 0deg) rotate(10deg)
}

.jaw_base_2 {
    width: 300px;
    height: 200px;
    background-color: rgb(61, 82, 23);
    position: absolute;
    transform:
        translate(650px, 275px) skew(0deg, 0deg) rotate(-10deg)
}

.forehead {
    width: 250px;
    height: 250px;
    background-color: rgb(60, 79, 24);
    position: absolute;
    transform:
        translate(575px, 100px) skew(0deg, 0deg) rotate(45deg);
    border-radius: 50px
}

.block_1 {
    width: 200px;
    height: 200px;
    background-color: rgb(39, 52, 15);
    position: absolute;
    transform:
        translate(400px, 100px) skew(10deg, 10deg) rotate(0deg)
}

.block_2 {
    width: 200px;
    height: 200px;
    background-color: rgb(54, 71, 23);
    position: absolute;
    transform:
        translate(400px, 100px) skew(10deg, 10deg) rotate(30deg)
}

.block_3 {
    width: 200px;
    height: 200px;
    background-color: rgb(72, 93, 32);
    position: absolute;
    transform:
        translate(400px, 100px) skew(10deg, 10deg) rotate(60deg)
}

.block_4 {
    width: 200px;
    height: 200px;
    background-color: rgb(109, 142, 47);
    position: absolute;
    transform:
        translate(400px, 100px) skew(10deg, 10deg) rotate(90deg)
}

.block_5 {
    width: 200px;
    height: 200px;
    background-color: rgb(39, 52, 15);
    position: absolute;
    transform:
        translate(800px, 100px) skew(-10deg, -10deg) rotate(0deg)
}

.block_6 {
    width: 200px;
    height: 200px;
    background-color: rgb(54, 71, 23);
    position: absolute;
    transform:
        translate(800px, 100px) skew(-10deg, -10deg) rotate(30deg)
}

.block_7 {
    width: 200px;
    height: 200px;
    background-color: rgb(72, 93, 32);
    position: absolute;
    transform:
        translate(800px, 100px) skew(-10deg, -10deg) rotate(60deg)
}

.block_8 {
    width: 200px;
    height: 200px;
    background-color: rgb(109, 142, 47);
    position: absolute;
    transform:
        translate(800px, 100px) skew(-10deg, -10deg) rotate(90deg)
}

.eye_1 {
    width: 150px;
    height: 75px;
    background-color: rgb(255, 255, 255);
    position: absolute;
    transform:
        translate(450px, 150px) skew(0deg, 0deg) rotate(-70deg);
    border-radius: 50px;
}

.eye_2 {
    width: 150px;
    height: 75px;
    background-color: rgb(255, 255, 255);
    position: absolute;
    transform:
        translate(800px, 150px) skew(0deg, 0deg) rotate(70deg);
    border-radius: 50px;
}

.brow_1 {
    width: 150px;
    height: 200px;
    background-color: rgb(54, 71, 23);
    position: absolute;
    transform:
        translate(450px, 25px) skew(10deg, 10deg) rotate(-70deg);
    border-radius: 50px;
}

.brow_2 {
    width: 150px;
    height: 200px;
    background-color: rgb(54, 71, 23);
    position: absolute;
    transform:
        translate(800px, 25px) skew(-10deg, -10deg) rotate(70deg);
    border-radius: 50px;
}

.forehead_front {
    width: 150px;
    height: 150px;
    background-color: rgb(78, 105, 27);
    position: absolute;
    transform:
        translate(625px, 100px) skew(0deg, 0deg) rotate(45deg);
    border-radius: 50px
}

.eyelid_left {
    width: 100px;
    height: 100px;
    background-color: rgb(109, 142, 47);
    position: absolute;
    transform:
        translate(505px, 85px) skew(0deg, 0deg) rotate(-65deg);
    border-radius: 50px;
    animation-name: eye_shut_left;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes eye_shut_left {
    0% {
        transform: translate(495px, 85px);
    }

    25% {
        transform: translate(495px, 85px);
    }

    50% {
        transform: translate(470px, 165px);
    }

    75% {
        transform: translate(495px, 85px);
    }

    100% {
        transform: translate(495px, 85px);
    }
}

.eyelid_right {
    width: 100px;
    height: 100px;
    background-color: rgb(109, 142, 47);
    position: absolute;
    border-radius: 50px;
    transform:
        translate(810px, 85px) skew(0deg, 0deg) rotate(65deg);

    animation-name: eye_shut_right;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes eye_shut_right {
    0% {
        transform: translate(805px, 85px);
    }

    25% {
        transform: translate(805px, 85px);
    }

    50% {
        transform: translate(830px, 165px);
    }

    75% {
        transform: translate(805px, 85px);
    }

    100% {
        transform: translate(805px, 85px);
    }
}

.star1_1 {
    width: 20px;
    height: 20px;
    background-color: rgb(227, 228, 203);
    position: absolute;
    border-radius: 0px;
    margin-left: 1100px;
    margin-top: 100px;
    transform:
        translate(1150px, 100px) skew(0deg, 0deg) rotate(0deg);

    animation-name: twinkle_1;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.star1_2 {
    width: 20px;
    height: 20px;
    background-color: rgb(227, 228, 203);
    position: absolute;
    border-radius: 0px;
    margin-left: 1100px;
    margin-top: 100px;

    transform:
        translate(1150px, 100px) skew(0deg, 0deg) rotate(0deg);

    animation-name: twinkle_2;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.star2_1 {
    width: 20px;
    height: 20px;
    background-color: rgb(227, 228, 203);
    position: absolute;
    border-radius: 0px;
    margin-left: 1300px;
    margin-top: 400px;
    transform:
        translate(1150px, 100px) skew(0deg, 0deg) rotate(0deg);

    animation-name: twinkle_1;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.star2_2 {
    width: 20px;
    height: 20px;
    background-color: rgb(227, 228, 203);
    position: absolute;
    border-radius: 0px;
    margin-left: 1300px;
    margin-top: 400px;

    transform:
        translate(1150px, 100px) skew(0deg, 0deg) rotate(0deg);

    animation-name: twinkle_2;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.star3_1 {
    width: 20px;
    height: 20px;
    background-color: rgb(227, 228, 203);
    position: absolute;
    border-radius: 0px;
    margin-left: 250px;
    margin-top: 550px;

    animation-name: twinkle_1;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.star3_2 {
    width: 20px;
    height: 20px;
    background-color: rgb(227, 228, 203);
    position: absolute;
    border-radius: 0px;
    margin-left: 250px;
    margin-top: 550px;

    animation-name: twinkle_2;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes twinkle_1 {
    0% {
        transform: rotate(45deg);
        background-color: rgb(147, 228, 233);
    }

    15% {
        background-color: rgb(147, 228, 233);
    }

    35% {
        background-color: rgb(227, 228, 203);
    }    

    65% {
        background-color: rgb(227, 228, 203);
    } 

    85% {
        background-color: rgb(147, 228, 233);
    } 

    100% {
        transform: rotate(405deg);
        background-color: rgb(147, 228, 233);
    }
}

@keyframes twinkle_2 {
    0% {
        transform: rotate(0deg);
        background-color: rgb(147, 228, 233);
    }

    15% {
        background-color: rgb(147, 228, 233);
    }

    35% {
        background-color: rgb(227, 228, 203);
    }    

    65% {
        background-color: rgb(227, 228, 203);
    } 

    85% {
        background-color: rgb(147, 228, 233);
    } 

    100% {
        transform: rotate(360deg);
        background-color: rgb(147, 228, 233);
    }
}

/************************************************************************************************* navigatie*/


body, body *{
    box-sizing: border-box;
}


/*HAMBURGER MENU*/
.menu-toggle,
.hamburger{/*hamburger en menu-toggle checkbox zijn net zo groot en staan over elkaar heen, menu-toggle checkbox bovenaan*/
    position: fixed;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    margin: 0;
    cursor: pointer;
}
.hamburger{/*hamburger ligt onder de menu-toggle checkbox*/
    z-index: 99998;
    transition: 0.3s;
    background-color: #fff;/*achtergrondkleur en randkleur zijn  nodig als het menu over een donker of zwart vlak valt bij scrollen*/
    border: 10px solid #FFF;
    border-bottom-width: 0;
    box-sizing: content-box;
}
.menu-toggle:checked + .hamburger {/*bij selected hamburgerknopje geen achtergrondkleur en randkleur*/
    background-color: transparent;
    border-color: transparent;
}
.menu-toggle{/*menu-toggle checkbox ligt boven alles*/
    z-index: 99999; 
    opacity: 0;
}
.menu{
    opacity: 0;/*volledig transparant*/
    position: fixed;
    top:0;
    right: -50vw;/*menu staat buiten beeld*/
    width: 50vw;/*menu is zo breed als een halve pagina, en hij staat buiten beeld*/
    height: 100vh;
    z-index: 99997;/*de menu liggen overal overheen, behalve over de menu-toggle checkbox en het hamburgermenu*/
    background-color: rgba(0, 0, 0, 0.8);
    transition: opacity 1s, right 1s;
}

.menu-toggle:checked ~ .menu{/*menu wordt zichtbaar bij klik op menu-toggler checkbox*/
    opacity: 100;/*volledig zichtbaar*/
    right: 0;
}
/***************************************************************Hamburgermenu balkjes die bij hover en select een kruis worden*/
.hamburger .bar {
    width: 100%;
    height: 16%;
    padding-top: 16%;
    background-color: #000;
    margin: 16% 0 0 0;
    transition: 0.2s;
    
}
.hamburger:hover, 
.menu-toggle:hover + .hamburger{
    transform: scale(1.05);
}

.menu-toggle:checked + .hamburger .bar{background-color:#FFF;}
.hamburger .bar1{margin-top: 0;}
.hamburger .bar2{margin-bottom: 0;}
.hamburger .bar3{margin-top: -16%;}

.menu-toggle:checked + .hamburger .bar1, 
.menu-toggle:checked + .hamburger .bar4 {opacity: 0;}

.menu-toggle:checked + .hamburger .bar2 {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transform-origin: center center;
}
.menu-toggle:checked + .hamburger .bar3 {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    transform-origin: center center;
}

/************************************************************************************************* navigatie hyperlinks */
#nav > ul,
#nav > ul > li{
	list-style: none;
}
#nav > ul {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
    margin: 0;
    padding: 15px 0 0 0;  
}
#nav > ul > li{
	
	flex:0 1 auto;
    margin:0;
    padding: 0 90px 0 0;
    text-align: right;
    border-bottom: 1px solid transparent;
}
#nav a {
	display: block;
	color: #FFF;
	padding: 0 2em;
	text-decoration: none;
	line-height: 3em;
}
#nav a:hover,
#nav a.selected {
	background-color: #FFF;
    color:#000;
}
/*clearfix is om de float op te heffen*/
.clearfix::after{
	content:'';
	clear:both;
	display:table;
}