* {
    margin: 0;
    padding:0;
    list-style:none;
}

html,body{
    height:100%;
    width:100%;
}
body{
    position:relative;
    background:linear-gradient(-45deg, #D5EBF8 25%, #6D8BB0 75%);
    
    display:flex;
    justify-content:center;
    align-items: center;
    
    overflow: hidden;
}

/**************************/
/* ZON EN MAAN CONTAINERS */
/**************************/
body > article:first-child {
    position:absolute;
    right:calc(50% + 7.75em);
    bottom:calc(50% + 6.5em);
}

body > article:nth-child(2) {
    position:absolute;
    left:calc(50% + 7.75em);
    top:calc(50% + 4.5em);
}

/***************/
/* ZON EN MAAN */
/***************/

article > section:first-child {
    width:8.5rem; height:8.5rem;
    border-radius: 50%;
}

#maan > section:first-child {
    background-color: #E8E2CF;
    box-shadow: 0 0 2em .8em rgba(255,255,255,.5);
    animation: ademen 2s infinite linear alternate;
}

#zon > section:first-child {
    background-color: #FFEE00;
    box-shadow: 0 0 2em 2em rgba(255,238,0,.7);
    animation: ademen 2.4s infinite linear alternate;
}

@keyframes ademen {
    0% {
        transform:scale(1.5) rotate(22.5deg);
    }

    50%, 100% {
        transform:scale(1.4) rotate(22.5deg);
    }
}

/* ogen */
.ogen {
    padding-top:1.5em;
    display: flex;
    justify-content: center;
}

#zon .ogen {
    transform: scaleX(-1);
}

.oog {
    height: .8em; width: .8em;
    background-color: #654F33;
    border-radius: 50%;
    margin: 1em .5em 1em 1.5em;
}

/* mond en wangen */
.mondwang {
    display: flex;
    margin-right: 0;
    margin-top: -1.5em;
}

#zon .mondwang {
    transform: scaleX(-1);
}

.mond {
    width: 1.5em; height: 1em;
    border-style: solid;
    bordr-width:.2em;
    border-color: transparent transparent #654F33 transparent;
    border-radius: 0 0 50% 50%;
}

.wang {
    height: .8em; width: 1.5em;
    background-color: #F09DB1;
    border-radius: 50%;
    margin:1em 1em .75em 1.5em;
}

.wang:last-child{
    margin:1em .5em .75em 1em;
}

/* vlekken */
.vlekjes {
    padding-left:1.5em;
}

.vlekjes div {
    border-radius: 50%;
    background-color: #DAD2B7;
}

.vlek1 {
    height:1em; width:2.7em;
    transform: rotate(25deg);
    margin-top: 1.5em
}

.vlek2 {
    height:.5em; width:1em;
    transform: rotate(-15deg);
    margin-top: -2.1em;
}

.vlek3 {
    height:.8em; width:1.5em;
    transform: rotate(20deg);
    margin-left: 2em;
}


/***********/
/* HARTJES */
/***********/
.hartje{
    position:absolute;
    background-color: #F17A8C;
    height: 3em; width: 3em;
    top:3.25em; left:2.25em;
    transform-origin: bottom left;
    transform: rotate(0deg) scale(0) translate(-16em,16em);
    transition: 1s;
    z-index:-1;
}

#zon .hartje{
    transform-origin: bottom right;
    transform: rotate(0deg) scale(0) translate(-16em,16em);
}

.hartje:before,
.hartje:after {
    content: "";
    position: absolute;
    height: 3em; width: 3em;
    background-color:inherit;
    border-radius: 50%;
}

.hartje:before {
    top: -1.5em; left: 0;
}

.hartje:after {
    left: 1.5em;
}

/* maan en zon bewegen */
#maan section:first-child:hover + section:last-child,
#maan .hartje.showmaan {
    transform: rotate(0deg) scale(1) translate(12rem,9.75rem);
}

#zon section:first-child:hover + section:last-child,
#zon .hartje.showzon {
    transform: rotate(0deg) scale(1) translate(-12rem,-9.75rem);
}


/**********/
/* BALLON */
/**********/

/*class toevoegen met java*/
aside {
    position:absolute;
    top:100%; left:20%;
    transition:6s;
    transition-timing-function:ease-out;
}

aside.toonBallon{
    top:calc(50% - 192px); left:calc(50%);
}

.balloon{
    width:100px; height:130px;
    
    font-family: sans-serif;
    text-align: center;
    line-height: 5em;
    font-size: 1.6em;
    
    color: white;
    background:#e33333;
    border-radius:50%;
    box-shadow:inset -20px -20px 20px #d52020;
    opacity:0.9;
    
    animation:float 5s ease-in-out infinite;
}

.balloon:before{
    content:"";
    position:absolute;
    width:0px; height:0px;
    top:130px; left:40px;
    
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:10px solid #d52020;
}

.balloon:after{
    content:"";
    position:absolute;
    width:1px; height:200px;
    left:50px; top:135px;
    
    background:rgba(33,33,33,0.6);
}

@keyframes float{
    0%,100%{
        transform: translateY(0px) rotate(3deg);
    }
    50%{
        transform: translateY(25px) rotate(-5deg);
    }
}

aside.stuk .balloon{
    animation:stuk .25s forwards;
}

@keyframes stuk {
    0% {
        transform: scale(1);
    }
    50%{
        transform: scale(.875);
        opacity:1;
    }
    100%{
        transform: scale(2);
        opacity:0;
    }
}