* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    width: 100vw;
    height: 100vh;
    background-color: var(--primary);
    font-family: Arial, Helvetica, sans-serif;
}
h1 {
    position: absolute;
    font-size: 4vmin;
    top: 10vmin;
    left: 50%;
    transform: translateX(-50%);
    background: var(--light);
    padding: 1vmin 10vmin;
    color: var(--text);
}
h2 {
    color: white;
    margin-top: 3vmin;
    font-size: 3vmin;
}
/* --- root --- */
:root{
    --primary: #060057;
    --dark: #00000040;
    --light: #FFFFFF80;

    /* --character: #ff229c; */
    --character: #836EAF;

    --text: #ffffff;
}


/* ------------------------
    TAMAGOTCHI 
------------------------ */
.tamagotchi {
    width: 100vw;
    height: 100vh;
    /* flex */
    display: flex;
    justify-content: center;
    align-items: center;
}
.tamagotchi article {
    background: var(--dark);
    width: 55vmin;
    height: 55vmin;
    border-radius: 50%;
    /* border: 2vmin rgb(79, 118, 190) solid; */
    /* flex */
    display: flex;
    justify-content: center;
    align-items: center;
}
/* ------------------------
    END TAMAGOTCHI 
------------------------ */








/* ------------------------
    CHARACTER
------------------------ */
.character {
    width: 50%;
    height: 75%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* --- head --- */
.head {
    position: relative;
    width: 19vmin;
    height: 19vmin;
    border-radius: 100%;
    background-color: var(--character);
}
/* --- eyes --- */
/* eyes animation -- geleerd bij SPR weken van Sanne */
@keyframes knipperen {
    0%{
        transform:scaleY(1) translateX(-50%);
    }
    48% {
        transform:scaleY(1) translateX(-50%);
    }
    50% {
        transform:scaleY(0) translateX(-50%);
    }
    52% {
        transform:scaleY(1) translateX(-50%);
    }
    100% {
        transform:scaleY(1) translateX(-50%);
    }
}
.eyes {
    position: absolute;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    top: 5vmin;
    /*animatie defineren*/
    animation-name:knipperen;
    animation-duration:4s;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
}

.eyes .eye {
    width: 7vmin;
    height: 7vmin;
    background: white;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: .2vmin;
    margin-left: .2vmin;
}
/* --- randje om ogen --- */
.eyes .eye::before {
    content: '';
    position: absolute;
    width: 7.5vmin;
    height: 7.5vmin;
    background-color: var(--dark);
    border-radius: 100%;
    z-index: -2;
}
.eyes .eye div{
    position: relative;
    width: 3vmin;
    height: 3vmin;
    background: black;
    border-radius: 100%;
}
.eyes .eye div::before {
    position: absolute;
    right: 0.5vmin;
    top: 0.5vmin;
    content: '';
    width: .75vmin;
    height: .75vmin;
    background-color: white;
    border-radius: 100%;
}
/* --- mouth --- */
/* https://codepen.io/TiagoLopes/pen/jbJLgr */
.mouth {
    width: 60%;
    height: 30%;
    border-radius: 0 0 6vmin 6vmin;
    box-sizing: border-box;
    position: absolute;
    bottom: 5%;
    background: var(--dark);
    transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
    left: 50%;
    transform: translateX(-50%);
}
.normal .mouth {
    border-radius: 6vmin;
    height: 5%;
    width: 40%;
    bottom: 25%;
}
.sad .mouth {
    width: 40%;
    height: 20%;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    bottom: 18%;
    border-bottom: 0;
}

/* --- body --- */
.character .body {
    position: relative;
    width: 17vmin;
    height: 17vmin;
    border-radius: 20vmin 20vmin 24vmin 24vmin;
    background-color: var(--character);
}

/* --- arms --- */
/* arms animation -- geleerd bij SPR weken van Sanne */
@keyframes dansenL {
    0%{
        /* background-color: turquoise; */
        transform: rotate(25deg);
    }
    100% {
        /* background-color: pink; */
        transform: rotate(125deg);
    }
}
@keyframes dansenR {
    0%{
        /* background-color: turquoise; */
        transform: rotate(-25deg);
    }
    100% {
        /* background-color: pink; */
        transform: rotate(-125deg);
    }
}
.arms::before,
.arms::after {
    position: absolute;
    content: '';
    top: 4vmin;
    background-color: var(--character);
    width: 4vmin;
    height: 8.5vmin;
    border-radius: 0 0 10vmin 10vmin;
    transform-origin: top center;
    transition: transform .5s ease-in-out;
    /*animatie defineren*/
    animation-duration: .5s;
    animation-timing-function:ease-in-out;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate-reverse;
}
.arms::before {
    left: 1vmin;
    transform: rotate(25deg);
}
.arms::after {
    right: 1vmin;
    transform: rotate(-25deg);
}
/* --- add music --- */
.dansen .arms::before {
    animation-name: dansenL;
}
.dansen .arms::after {
    animation-name: dansenR;
}

/* --- legs --- */
.legs::before,
.legs::after {
    position: absolute;
    bottom: -5vmin;
    content: '';
    background-color: var(--character);
    width: 4vmin;
    height: 7.5vmin;
    border-radius: 0 0 10vmin 10vmin;
    transform-origin: top center;
}
.legs::before {
    left: 20%;
}
.legs::after {
    right: 20%;
}
/* ------------------------
    END CHARACTER 
------------------------ */







/* ------------------------
    CHOISES
------------------------ */
/* --- left --- */
.choises article {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 35%;
    height: 55vmin;
    /*flex*/
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: flex-end;
}
.choises article div {
    position: relative;
    width: 15vmin;
    height: 15vmin;
    border-radius: 50%;
    background: var(--light);
    /*flex*/
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.5s ease;
}
/* --- hover --- */
.choises article div:hover {
    cursor: pointer;
    background-color: #FFFFFF95;
}

.choises article div:nth-child(2) {
    margin-right: 10vmin;
}

/* --- right --- */
.choises article:nth-of-type(2) {
    right: 0;
    align-items: flex-start;
}
.choises article:nth-of-type(2) div:nth-child(2) {
    margin-left: 10vmin;
}
/* --- images in circle --- */
.choises article div::before {
    content: '';
    position: absolute;
    width: 65%;
    height: 65%;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}
.choises article div.music::before {
    background-image: url(../images/music_note_v2.svg);
}
.choises article div.healthy::before {
    background-image: url(../images/healthy_food.svg);
}
.choises article div.fastfood::before {
    /* https://www.netclipart.com/pp/m/106-1068231_hamburgers-clipart-comic-hamburger-png.png */
    background-image: url(../images/fast_food.svg);
}

.choises article div.love::before {
    background-image: url(../images/love.svg);
}
.choises article div.game::before {
    background-image: url(../images/game.svg);
}
.choises article div.water::before {
    background-image: url(../images/water_food.svg);
}

.choises article div p {
    position: absolute;
    bottom: -3vmin;
    color: var(--text);
}











/* ------------------------
    PROCESSBAR
------------------------ */
.processBar {
    width: 100%;
    height: 12vmin;
    position: absolute;
    bottom: 4vmin;
    display: flex;
    justify-content: center;
    align-items: center;
}
.processBar > div {
    position: absolute;
    width: 60vmin;
    height: 45%;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* new */
/* --- process processbar --- */
/* https://css-tricks.com/html5-progress-element/ */
.processBar progress {
    appearance: none;
    width: 100%;
    height: 100%;
    border: none;
}
progress[value]::-webkit-progress-bar {
    background: transparent;
}
.healthBar progress::-webkit-progress-value {
    background-color: #70EF3A;
}
/* healt 2nd */
.emotionBar progress::-webkit-progress-value {
    background-color: #F08CB1;
}
/* end new */


/* --- health bar --- */
.processBar > div:nth-of-type(1) {
    top: 0;
    border: .5vmin solid #58B72C;
}
.processBar div:nth-of-type(1) div {
    position: absolute;
    left: 0;
    height: 100%;
}
.processBar .healthBar::before,
.processBar .healthBar::after,
.processBar .emotionBar::before,
.processBar .emotionBar::after  {
    position: absolute;
    content: '';
    width: 4vmin;
    height: 4vmin;
    /* flex */
    display: flex;
    justify-content: center;
    align-items: center;
    /* background */
    background-position: center;
    background-size: cover;
    color: var(--text);
}
.processBar .healthBar::before {
    content: '0%';
    right: 104%;
}
.processBar .healthBar::after {
    content: '100%';
    left: 104%;
}


/* --- emotion bar --- */
.processBar > div:nth-of-type(2) {
    bottom: 0;
    border: .5vmin solid  #C47294;
}
.processBar .emotionBar::before {
    content: '';
    right: 104%;
    background-image: url('../images/sad_emoji.png');
    /* bron afbeelding: https://i.pinimg.com/originals/32/3e/3b/323e3b47f07fa1fb0a4b2ecb03b2c965.png */
}
.processBar .emotionBar::after {
    content: '';
    left: 104%;
    background-image: url('../images/happy_emoji.png');
    /* bron afbeelding: https://www.google.com/url?sa=i&url=https%3A%2F%2Femojiisland.com%2Fproducts%2Fsmiling-face-emoji-icon&psig=AOvVaw2GShpDoMEFP7GeyQUhxPIw&ust=1616246629885000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCNil04S6vO8CFQAAAAAdAAAAABAI */
}
/* ------------------------
    END PROCESSBAR 
------------------------ */




/* ------------------------
    GEGEVENS
------------------------ */
.gegevens {
    position: absolute;
    top: 0;
    width: 35vmin;
    height: 100vh;
    padding: 5vmin 2vmin;
    background: var(--dark);
    left: 0;
    transition: .75s ease-in-out;
}
/* --- field --- */
.gegevens input#name {
    width: 100%;
    padding: 1vmin;
}
input[type="submit"] {
    padding: 1vmin;
    border: none;
    background: var(--character);
    border-radius: .75vmin;
    margin-top: 2vmin;
    color: var(--text);
    transition: background-color .35s ease-in-out;
}
input[type="submit"]:hover {
    cursor: pointer;
    background-color: var(--light);
}

.gegevens h2 {
    margin-bottom: 1em;
}
.gegevens h2:nth-of-type(2) {
    margin-top: 4vmin;
}

.gegevens .toggle {
    position: absolute;
    right: calc(0vmin - 8.2vmin);
    padding: 2vmin;
    text-align: center;
    background: var(--light);
    transform: rotate(90deg);
    cursor: pointer;
}
/* if toggle wordt geklikt */
.gone .gegevens {
    left: -35vmin;
}

/* --- colorScheme --- */
.colorScheme {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.colorScheme div {
    position: relative;
    width: 8vmin;
    height: 8vmin;
    background-color: red;
    border-radius: 100%;
    /* -- flex -- */
    display: flex;
    justify-content: center;
}
/* --- hover --- */
.colorScheme div:hover {
    cursor: pointer;
}

.colorScheme div  p {
    color: white;
    position: absolute;
    bottom: -4vmin;
}

/* --- color divs --- */
/* https://blog.prototypr.io/css-only-multi-color-backgrounds-4d96a5569a20 */
.colorScheme .space {
    background: linear-gradient(110deg, #090180 60%, #836EAF 60%);
}
.colorScheme .sunset {
    background: linear-gradient(110deg, #ff5722 60%, #ffc107 60%);
}
.colorScheme .candy {
    background: linear-gradient(110deg, #ff83d3 60%, #8DEDF7 60%);
}

/* ------------------------
    END GEGEVENS
------------------------ */





/* ------------------------
    POPUP
------------------------ */
section.container_popUp {
    display: none;
}
.dead section.container_popUp {
    display: block;
}
.dead .popUp {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    left: 50%;
    width: 50vw;
    height: 50vh;
    background-color: white;
    border-radius: 3vmin;
    /* -- flex -- */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.dead .popUp h2 {
    font-size: 4vmin;
    color: black;
    margin-top: 0;
    margin-bottom: 2vmin;
}
.dead .popUp button {
    padding: 1vmin;
    border: none;
    background: var(--character);
    border-radius: .75vmin;
    margin-top: 2vmin;
    color: var(--text);
    font-size: 3vmin;
    transition: background-color .35s ease-in-out;
}
.dead .popUp button:hover {
    cursor: pointer;
    background-color: var(--dark);
}
/* ------------------------
    END POPUP
------------------------ */