*, *::before, *::after {
  box-sizing:border-box;
  font-family:saira;  
}

html {
  height:100%;
}

body {
  --blauw: #444492;
  --groen: #449244;
  --rood: #924444;
  --witruimte:1rem;
  
  --main-color: var(--blauw);
  position:relative;
  height:100%;
  margin:0;
  background-color: #FCE0DD;
  overflow:hidden;
}

body.groen {
  --main-color: var(--groen);
}

body.rood {
  --main-color: var(--rood);
}

@media (min-width:40em) and (min-height:32em) {
  body {
    --witruimte:2rem;
  }
}

/*********/
/* TITEL */
/*********/
h1 {
  position:absolute;
  top:var(--witruimte); left:var(--witruimte);
  margin:0;
  font-weight:normal;
  line-height:3.2rem;
}

/***********/
/* PERSOON */
/***********/
@keyframes zweven {
  0%{
    transform:translate(8px,0);
  }
  100%{
    transform:translate(-8px,0);
  }
}

#persoon {
  position: fixed;
  width: 30em; height: 45.625em;
  left: calc(50% - 15em); bottom:2em;
  z-index:5;
  transition:.5s;
}

html.zen #persoon {
  bottom:calc(-30em + 50%);
  bottom: min(calc(-30em + 50%), -2em);
  
  animation:zweven 4s -2s ease-in-out infinite alternate;
}

/*********/
/* HOOFD */
/*********/
@keyframes bobblen {
  0%{
    transform:rotate(-3deg);
  }
  100%{
    transform:rotate(3deg);
  }
}

.hoofd{
  position: absolute;
  width: 6.875em; height: 8.25em;
  left: calc(50% - 3.4375em);
  z-index: 100;
  transform-origin:center top;
}

html.zen .hoofd {
  animation:bobblen 4s -2s ease-in-out infinite alternate;
}

/* haar */
.haar {
  position:absolute;
  width:100%; height:75%;
  left:0; top:0;
  border-radius:2em;
  transition:width 1s, height 1s, left 1s, top 1s, border-radius 1s;
}

html.kapper .haar {
  width:85%; height:72.5%;
  left:7.5%; top:12.5%;
  border-radius:4em;
}

.haar.achter {
  background-color: var(--main-color);
}

.haar div{
  position:absolute;
  background-color:inherit;
  opacity:0;
  transition:opacity 1s;
}

html.kapper .haar div {
  opacity:1;
}

.haar.achter div:nth-of-type(1) {
  width:50%; height:50%;
  top:-.2em; left:.4em;
  border-radius:40%;
  transform:rotate(10deg);
}

.haar.achter div:nth-of-type(2) {
  width:40%; height:40%;
  top:1.5em; left:-.25em;
  border-radius:40%;
  transform:rotate(40deg);
}

.haar.achter div:nth-of-type(3) {
  width:30%; height:50%;
  top:-.9em; left:2.3em;
  border-radius:45%;
  transform:rotate(50deg);
}

.haar.achter div:nth-of-type(4) {
  width:30%; height:50%;
  top:-.6em; left:3.15em;
  border-radius:50%;
  transform:rotate(-10deg);
}

.haar.achter div:nth-of-type(5) {
  width:30%; height:70%;
  top:-.35em; left:3.7em;
  border-radius:40%;
  transform:rotate(-30deg);
}

.haar.achter div:nth-of-type(6) {
  width:50%; height:50%;
  top:1em; left:3.3em;
  border-radius:35%;
  transform:rotate(30deg);
}

.haar.achter div:nth-of-type(7) {
  width:6%; height:12%;
  top:1em; left:-.6em;
  border-radius:50%;
  transform:rotate(30deg);
}

.haar.achter div:nth-of-type(8) {
  width:8%; height:16%;
  top:-1.2em; left:2.4em;
  border-radius:50%;
  transform:rotate(50deg);
}

.haar.achter div:nth-of-type(9) {
  width:5%; height:10%;
  top:.2em; left:5.2em;
  border-radius:50%;
  transform:rotate(-10deg);
}

.haar.achter div:nth-of-type(10) {
  width:4%; height:6%;
  top:3.8em; left:5.8em;
  border-radius:50%;
  transform:rotate(10deg);
}

.haar.voor {
  z-index:200;
  overflow:hidden
}

.haar.voor div:nth-of-type(1) {
  width:50%; height:50%;
  top:-.5em; left:1.4em;
  border-radius:30%;
  transform:rotate(50deg);
  background-color: var(--main-color);
}

.haar.voor div:nth-of-type(2) {
  width:20%; height:40%;
  top:1.4em; left:4.7em;
  border-radius:50%;
  transform:rotate(-10deg);
  background-color: var(--main-color);
}

.haar.voor div:nth-of-type(3) {
  width:20%; height:40%;
  top:1.6em; left:-.1em;
  border-radius:50%;
  transform:rotate(0deg);
  background-color: var(--main-color);
}

/* oren */
.oren{
  position:absolute;
  width:100%; height:1.125em;
  left:0; top:5.188em;
  display:flex;
  justify-content:space-between;
}

.oor{
  width:1.125em; height:1.125em;
  margin: 0em 0.688em;
  background-color: #E97847;
  border-radius:50%;
}

/* gezicht */
.gezicht{
  position: absolute;
  width: 4.313em; height: 5.250em;
  top: 3em; left: calc(50% - 2.1565em);
  background-color: #F79968;
  border-radius: 40% 40% 85% 85%;
}

/* bril */
.bril {
  position:absolute; 
  width:100%; height:1.438em;
  left:0; top:1.313em;
  display:flex;
  justify-content:space-evenly;
  background-image:linear-gradient(
    to bottom,
    transparent calc(50% - 1px),
    var(--main-color) calc(50% - 1px),
    var(--main-color) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

.glas {
  width:1.438em; height:1.438em;
  border-radius:50%;
  background-color:white;
  background-image: linear-gradient(
    -45deg,
    white,
    white 40%,
    LightSkyBlue 55%,
    white 60%,
    LightSkyBlue 65%,
    white 70%,
    white
  );
  box-shadow: -.15em .1em rgba(233, 120, 71, 0.5);
}

/* mond */
.mond {
  position: absolute;
  width: 1.375em; height: .75em;
  left: calc(50% - 0.6875em); top: 2.75em;
  background-color: var(--main-color);
  border-radius: 10% 10% 50% 50%/ 10% 10% 90% 90%;
}

/* wangen */
.wangen{
  position:absolute;
  width:100%; height:0.438em;
  left:0; top:2.938em;
  display:flex;
  justify-content:space-between;
}

.wang{
  width:0.563em; height:0.438em;
  margin: 0em 0.5em 0em 0.5em;
  background-color: #F9A682;
  border-radius:50%;
}


/***********/
/* LICHAAM */
/***********/
.lichaam {
  position: absolute;
  width: 30em; height: 10.125em;
  top: 8.250em; left: calc(50% - 15em);
  z-index:10;
}

/* nek */
.nek {
  position:absolute;
  width: 1.5em;  height: 2em;
  left: calc(50% - 0.75em); bottom: 8.5em;
  background-color: #F79968;
  background-image: linear-gradient(#E97847 10%, #F79968 40%);
  border-radius: 0% 0% 50% 50%/ 0% 0% 40% 40%;
}

/* schouder en torso */
.schouder{
  position:absolute;
  width: 10.8em; height: 3.875em;
  left: calc(50% - 5.4em); top: 0.938em;
  background-color: #F15A29;
  border-radius: 40% 40% 15% 15% / 70% 70% 15% 15%;
}

.torso {
  position:absolute;
  width: 6.875em; height: 5.3em;
  left: calc(50% - 3.4375em); top: 4.75em;
  background-color: #F15A29;
  border-radius: 0% 0% 10% 10% / 60% 60% 70% 70%;
}

/* details - kraag en zipper */
.detail{
  position:absolute;
  background-color: #F15A29;
  filter: brightness(1.2) grayscale(.25);
}

.detail.kraag{
  width: 36px; height: 33px;
  left: calc(50% - 18px); top: -0.95em;
  border-radius: 50%;
}

.detail.shirt {
  width: 6px; height: 8.75em;
  left: calc(50% - 3px); top: -3.2em;
  border-radius: 0em 0em 2em 2em;  
}

/* armen */
.arm{
  position:absolute;
  width: 8.125em; height: 4.5em;
  top: 2.95em;
  background-image:radial-gradient(
    ellipse at center top,
    transparent calc(70.7% - 32px),
    #F15A29 calc(70.7% - 32px)
  );
  border-radius: 0% 0% 60% 60%/ 0% 0% 100% 100%;
}

.arm.links {
  left: -6.1em;
}

.arm.rechts {
  right: -6.1em;
}

/* handen */
.hand {
  position: absolute;
  width: 60px; height: 16px;
  background-color: #F79968;
  border-radius: 90% 40% 40% 90% / 80% 60% 60% 80%;
}

.hand.links{
  left: -1.5em; top: -0.85em;
}

.hand.rechts {
  right: -1.5em; top: -0.85em;
   transform:rotate(180deg);
}

/****************/
/* ONDERLICHAAM */
/****************/
.onderlichaam{
  position: absolute;
  width: 26.750em; height: 7.250em;
  left: calc(50% - 13.375em); top: 18.25em;
}

/* riem */
.riem {
  position: absolute;
  width: 6em; height: 0.625em;
  left: calc(50% - 3em);
  background-color: var(--main-color);
  filter: brightness(0.6);
}

/* bekken */
.bekken{
  position: absolute;
  width: 6em;
  height: 2em;
  left: calc(50% - 3em);
  background-color: var(--main-color);
  top: 0.625em;
  border-radius: 0 0 18px 18px;
}

/* bovenbenen */
.bovenbeen {
  position:absolute;
  width: 36px; height: 122px;
  top:0;
  background-color: var(--main-color);
  transform-origin:18px 18px;
  border-radius: 50% / 18px;
  transition:transform .5s;
}

.bovenbeen.links{
  left:0;
}

.bovenbeen.rechts{
  right:0;
}

html.zen .bovenbeen.links {
  transform: rotate(100deg);
}

html.zen  .bovenbeen.rechts {
  transform: rotate(-100deg);
}

/* onderbenen */
.onderbeen {
  position: absolute;
  width: 36px; height: 248px;
  left: 0; top: calc(100% - 36px);
  background-color: var(--main-color);
  border-radius: 50% 50% 0 0 / 18px 18px 0 0;
  transform-origin:18px 18px;
  transition:transform .5s;
}

.onderbeen::before {
  content:"";
  position:absolute;
  width:48px; height:12px;
  left:-6px; bottom:0;
  background-color: var(--main-color);
  border-radius:6px;
  filter: brightness(0.6);
}

.onderbeen::after {
  content:"";
  position:absolute;
  width:10px; height:22px;
  bottom:-5px;
  background-color: var(--main-color);
  border-radius:5px;
  filter: brightness(1.2);
}

.bovenbeen.links .onderbeen::after {
  left:5px;
}
.bovenbeen.rechts .onderbeen::after {
  right:5px;
}

html.zen .bovenbeen.links .onderbeen {
  transform: rotate(-175deg);
  background-image: linear-gradient(
    60deg,
    var(--main-color) 27%,
    rgba(0,0,26,.2) 31% 58%,
    var(--main-color) 62%
  );
} 

html.zen .bovenbeen.rechts .onderbeen {
  transform: rotate(175deg);
}

/* voeten */
@keyframes wapperen {
  0% {
    transform:perspective(5em) rotateX(-5deg);
  }
  100%{
    transform:perspective(5em) rotateX(5deg);
  }
}
.voet {
  position: absolute;
  width:  1.563em; height: 5.5em;
  left: calc(50% - 0.7815em);  top: 100%;
  background-color: #F79968;
  border-radius: 0px 0px 50px 50px;
  transform-origin:center top;
}

html.zen .voet {
  animation:wapperen 4s -2s infinite alternate ease-in-out;
}

html.zen .bovenbeen.rechts .voet {
  animation-direction:alternate-reverse;
}

/* sokken */
.sok{
  position: absolute;
  width:100%; height: 4.5em;
  bottom: 0;
  background-color: white;
  border-radius: 0px 0px 50px 50px;
}

/* schoenen */
.schoen {
  position: absolute;
  width:  1.563em; height: 3.5em;
  bottom: 0;
  background-color: var(--main-color);
  border-radius: 0px 0px 50px 50px;
}

.lip {
  position: absolute;
  width:15px; height:50px;
  top: -0.5em; left: calc(50% - 7.5px);
  
  background-color: var(--main-color);
  filter: brightness(0.6);
  border-radius: 50px 50px 35px 35px;
}

.veter {
  position: absolute;
  width:15px; height:42px;
  top:0; left: calc(50% - 7.5px);
  background-color:red;
  background: linear-gradient(
    45deg,
    rgba(255,255,255,0) 32%, 
    rgba(255,255,255,1) 32% 36%, 
    rgba(255,255,255,0) 36% 62%,
    rgba(255,255,255,1) 62% 66%, 
    rgba(255,255,255,0) 66%);
}

.veter.twee{
  transform:scaleX(-1);
}

/***********/
/* SCHADUW */
/***********/

.schaduw {
  position: absolute;
  width: 22.5em; height: 3.25em;
  left: calc(50% - 11.25em); bottom: 4.5em;
  background-color: #F8B0A8;
  border-radius: 50%;
  opacity:0;
  transition:.5s;
}

@media (min-height:32em) {
  html.zen .schaduw {
    opacity:1;
    transition:1s;
  }
}

/**********/
/* BUTTON */
/**********/
button {
  position:fixed;
  width:7em; height:3.2em;
  bottom:var(--witruimte);
  font-size:1em;
  text-align:center;
  border:none;
  border-radius:1.6em;
  outline:none;
  cursor:pointer;
  z-index:10;
}

button:focus {
  box-shadow:0 0 .5em .25em rgba(0,153,255,.75);
}

/* zen */
button.zen {
  left:var(--witruimte);
}

button.zen::before{
  content:"\1F9D8";
  font-size:2em;
}
button.zen::after{
  content:" zen";
}

html.zen button.zen::before{
  content:"\1F9CD";
  font-size:2em;
}
html.zen button.zen::after{
  content:"basta";
}

/* kapper */
button.kapper {
  right:var(--witruimte);
}

button.kapper::before{
  content:"\1F487\200D\2642\FE0F";
  font-size:2em;
}
button.kapper::after{
  content:"kapper";
}

html.kapper button.kapper::before{
  content:"\1F926\200D\2642\FE0F";
  font-size:2em;
}
html.kapper button.kapper::after{
  content:"oopsie";
}

/*****************/
/* RADIO BUTTONS */
/*****************/
aside {
  position:fixed;
  display:grid;
  grid-template-columns:min-content min-content min-content;
  right:var(--witruimte); top:var(--witruimte);
  z-index:10;
}

/* de radio buttons zelf verstoppen we */
input[type="radio"] {  
  position: absolute !important;
  width: 1px; height: 1px; 
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* de gebruiker kan ook op het label klikken */
label{
  display:flex;
  justify-content:center;
  align-items:center;
  width:2.6em; height:3.2em;
  cursor:pointer;
}

input[value='blauw'] + label {
  width:3em;
  padding-left:.4em;
  background-color:var(--blauw);
  border-radius:1.6em 0 0 1.6em;
}

input[value='groen'] + label {
  background-color:var(--groen); 
}

input[value='rood'] + label {
  width:3em;
  padding-right:.4em;
  background-color:var(--rood);
  border-radius:0 1.6em 1.6em 0;
}

input:checked + label::before {
  content:"\1F90D";
  font-size:1.5em;
}

input:focus + label {
  z-index:10;
  box-shadow:0 0 .5em .25em rgba(0,153,255,.75);
}

@media (min-width:40em) and (min-height:32em) {
  aside {
    grid-gap:.5em;
  }
  
  input[value='blauw'] + label,
  input[value='groen'] + label,
  input[value='rood'] + label {
    width:3.2em; 
    padding:0;
    border-radius:50%;
  }
}