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

html, body {
	height:100%;
	width:100%;
}

body {
	background-color:#f0f0f0;
	overflow:hidden;
	
	display: flex;
	justify-content: center;
	align-items: center;
}

.wrapper {
    min-width: 800px;
	flex-basis:800px;
    height: 386px;
    
    position: relative;
}

/******************/
/* DE ACHTERGROND */
/******************/
.achtergrond .bol {
	position: absolute;
	bottom: 0;
	background-color: #FAD0D0;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.achtergrond .bol.links {
    width: 37.5rem;
    height: 21.8rem;
    left: 0;
}
.achtergrond .bol.rechts {
    width: 27rem;
    height: 14rem;
    right: 0;
}

/******************/
/* HUIS EN GARAGE */
/******************/
.huis, .garage {
	position: absolute;
	bottom: 0;
	background-color: #fff;
}

.huis {
    height: 16rem;
    width: 14rem;
    left: 42%;
}

.garage {
    height: 9rem;
    width: 11rem;
    right: 12.3%;
    border-top: 2rem solid #FA6460;
}

/* ramen en deuren */
.raam, .deur, .poort {
	position: absolute;
	bottom: 0;
	background-color: #4A1553;
	box-shadow: inset 11px 1px 0px -3px #FAD0D0;
}

.raam {
    height: 6rem;
    width: 5rem;
    border-radius: 45%;
    left: 33%;
    top: 8%;
}

.deur {
    height: 7.5rem;
    width: 6.25rem;
    border-radius: 45% 45% 0 0;
    left: 28%;
}

.poort {
    height: 4rem;
    width: 3.75rem;
    left: 39%;
}

/*****************/
/* DAK EN WIEKEN */
/*****************/
.dak {
   	position: absolute;
    height: 8.125rem;
	width: 14rem;
	bottom: 16rem;
    left: 42%;
	
	background-image: linear-gradient(130.746163563880808deg, transparent 50%, #FA6460 50%),
						linear-gradient(229.253836436119192deg, transparent 50%, #FA6460 50%);
	background-size:50% 100%;
	background-position:top left, top right;
	background-repeat:no-repeat;
}

/*wieken*/
.wieken { 
    position: absolute;
    width: 24rem;
	height: 24rem;
    left: calc(50% - 12rem);
    bottom: calc(40% - 12rem);
} 

.staaf1, .staaf2 {
	width: 1rem;
    height: 24rem;
    background-color: #4A1553;
    position: absolute;
    left: 11.5rem;
    bottom: 0;
} 
.staaf2 {
    transform: rotate(90deg);
}

.balk1, .balk2, .balk3, .balk4 {
	position: absolute;
	width: 3rem;
    height: 10rem;
	
	left:11.5rem;
    top:0;
	
    background-color: #4A1553;
	opacity: 0.7;
	
	transform-origin: .5rem 12rem;
	
	transition:width 2s, opacity 2s, border-radius 2s;
}
.balk2 {
	transform: rotate(90deg);
}
.balk3 {
	transform: rotate(180deg);
}
.balk4 {
	transform: rotate(270deg);
}

body[data-snelheid="snelheid2"] .balk1,
body[data-snelheid="snelheid2"] .balk2,
body[data-snelheid="snelheid2"] .balk3,
body[data-snelheid="snelheid2"] .balk4 {
	width: 4.5rem;
	opacity: 0.6;
	border-radius:0 .5rem .5rem 0; 
}

body[data-snelheid="snelheid3"] .balk1,
body[data-snelheid="snelheid3"] .balk2,
body[data-snelheid="snelheid3"] .balk3,
body[data-snelheid="snelheid3"] .balk4 {
	width: 8rem;
	opacity: 0.5;
	border-radius:0 100% 100% 0 / 0 50% 50% 0;
}

.blokje {
    height: 2rem;
    width: 2rem;
    background-color: #7F275C;
    position: absolute;
    left: 11rem;
    top: 11rem;
}

/* struiken */
.bolletjes, .bollekes {
	display: flex;
    flex-direction: row;
    position: absolute;
    bottom: 0;
}
.bolletjes {   
    left: 25%;
}
.bollekes {
    right: 1%;
}

.bolletjes div,
.bollekes div{
	background-color: #FA6460;
    width: 5rem;
    height: 3rem;
    border-radius: 100px 100px 0 0;
}

/* boom */
.boom {
	position: absolute;
    display: flex;
    flex-direction: column;
    bottom: 3%;
    left: 28%;
}

.deel1,.deel2,.deel3 {
    height: 5.5rem;
    width: 5.5rem;
    background-color: #4A1553;
    border-radius: 50%;
    margin: -0.5rem 0;
}

.streep {
    position: absolute;
    width: 0.4rem;
    height: 11.5rem;
    bottom: 0;
    left: 2.55rem;
    background-color: #FAD0D0;
	border-radius:1em;
}

/**********/
/* WOLKJE */
/**********/
.wolkje1 {
    height: 5rem;
    width: 12rem;
    position: absolute;
	
	left: calc(-50vw + 50% );
	
    animation:run 5s cubic-bezier(0.000, 0.125, 1.000, 0.875) infinite alternate;
    bottom:calc(100% + 3em);
}

:target .wolkje1 {
	animation:run-extra 5s cubic-bezier(0.000, 0.125, 1.000, 0.875) infinite alternate;
}


@-webkit-keyframes run {
    0%{
		left: calc(-50vw + 50% );
	}
    100%{
		left: calc(50vw + 50% - 12rem);
	}
  }

@-webkit-keyframes run-extra {
    0%{
		left: calc(-50vw + 50% );
		transform-origin:left bottom; 
		transform: scale(.9, 1.1) skewX(15deg) rotate(-3deg);
	}
	5%{
		left: calc(-50vw + 50% );
		transform-origin:left bottom; 
		transform: scale(1) skewX(0);
	}
	95%{
		left: calc(50vw + 50% - 12rem);
		transform-origin:right bottom; 
		transform: scale(1) skewX(0);
	}
    100%{
		left: calc(50vw + 50% - 12rem);
		transform-origin:right bottom;
		transform: scale(.9, 1.1) skewX(-15deg) rotate(3deg);
	}
  }

.rondje1, .rondje2, .rondje3 {
	background-color: #fff;
	border-radius: 100px 100px 0 0; 
    position: absolute;
}
.rondje1 {
    width: 5rem;
    height: 3rem;
    bottom:0;
    left:0;
}
.rondje2 {
    width: 7rem;
    height: 5rem;
    left: 2.25rem;
}
.rondje3 {
    width: 5rem;
    height: 3rem;
    bottom:0;
    left: 7rem;
}

/**********/
/* SCHAAP */
/**********/
.schaap {
    width: 7rem;
    height: 9rem;
    position: absolute;
    bottom: 0;
    left: 10%;
    transition: .5s;
	transition-timing-function: ease-in-out;
    transform-origin: bottom;
    animation: bounce-1 3s infinite ease;
	cursor:pointer;
}

@keyframes bounce-1 {
        0% { transform: scale(1,1)    translateY(0); }
		20%  { transform: scale(1.1,.9) translateY(0); }
        30%  { transform: scale(.9,1.1) translateY(-20%); }
        50%  { transform: scale(1,1)    translateY(0); }
        100% { transform: scale(1,1)    translateY(0); }
		
    }

.vliegen .schaap {
    bottom: calc(50vh + 50% - .5em);
	transition: 5s;
	cursor:default;
}

body.vliegen:target .schaap {
	cursor:pointer;
}

/* body parts */
.lichaam {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background-color: #FA6460;
    position: absolute;
    bottom: 16%;
    left: 7%;
}

.haar {
    width: 3.5rem;
    height: 2.5rem;
    background-color: #fff;
    position: absolute;
    border-radius: 50%;
    left: 24%;
    bottom: 51%;
}

.hoofd {
    width: 3rem;
    height: 4rem;
    background-color: #FAD0D0;
    position: absolute;
    border-radius: 50%;
    left: 28.7%;
    bottom: 26%;
}

.oor1, .oor2 {
	 width: 1rem; 
    height: 3rem;
    background-color: #4A1553;
    border-radius: 50%;
    position: absolute;
	top: 26%;
	
	animation-duration: 0.05s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out; 
}
.oor1 {
    left: 15%;
    transform-origin:left 1em;
    transform: translate(0.5em, -0.3em) rotate(36deg);
    animation-name: linkeroor;
}
.oor2 {
    left: 70%;
    transform-origin:right 1em;
    transform: translate(-0.5em, -0.3em) rotate(-36deg);
    animation-name: rechteroor;
}

@keyframes linkeroor {
	from{
	   	transform: translate(0.5em, -0.3em) rotate(36deg);
	}
	to{
		transform: translate(0.5em, -0.3em) rotate(80deg);
	}
}

 @keyframes rechteroor {
	from{
	  	transform: translate(-0.5em, -0.3em) rotate(-36deg);
	}
	to{
		transform: translate(-0.5em, -0.3em) rotate(-80deg);
	}
}

.voetje1, .voetje2, .voetje3, .voetje4 {
	height: 3rem;
    width: 0.5rem;
    background-color: #4A1553;
    position: absolute;
    bottom: 0;
	border-radius:.25rem;
}
.voetje1 {
    left: 34%;
}
.voetje2 {
    left: 57%;
}
.voetje3 {
    left: 70%;
}
.voetje4 {
    left: 21%;
}


/***********/
/* KNOPJES */
/***********/
.knopjes {
	display:none;
	position:absolute;
	bottom:0;
	left:50%;
	padding:1em;
	
	background:#f0f0f0;
	background:rgba(240,240,240,.9);
	border-radius:3em 3em 0 0;
	
	transform:translateX(-50%);
	transition:1s;
}

:target .knopjes {
	display:flex;
}

.knopjes li {
	display: flex;
	align-items: flex-end;
    padding:0 .25rem;
}

input {
	position:absolute;
	width:0;
	height:0;
	opacity:0;
}

label {
	box-sizing: content-box;
	height:2.5em;
	width:6em;
	padding:.25em 0;
	overflow:hidden;
	
	display:flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	
	font-family: 'Roboto Slab', serif;
	font-weight: bold;
	color:#4A1553;
	
	background-color:#FAD0D0;
	border-bottom:solid .5rem #4A1553;
	border-radius:2em;
	box-shadow: inset 0 0 0 #4A1553, inset 0 0 0 rgba(0,0,0,.5);
	
	transition:border-width .2s .2s, padding .2s, box-shadow .2s;
	transition-timing-function:linear;
	
	cursor:pointer;
}

input:focus + label {
	color:#FA6460;
	background:white;
	border-color:#FA6460;
}

label:hover {
	color:#FA6460;
	background:white;
	border-color:#FA6460;
}

input:checked + label {
	padding:.5em 0 0;
	
	border-bottom:solid 0 #4A1553;
	box-shadow: inset 0 .5em 0 #4A1553, inset 0 .75em .75em rgba(0,0,0,.5);
	
	transition:border-width .2s, padding .2s .2s, box-shadow .2s .2s;
	transition-timing-function: linear;
}

input:checked + label:hover {
	border-color:#FA6460;
}

/************/
/* SCHUIFJE */
/************/
.extras {
    --extras-font:'Roboto Slab', sans-serif;
    --extras-margin:.25em;
    --extras-size:1rem;
    
    --extras-title-active-color:#4A1553;
    
    --extras-schuif-idle-color:rgba(0,0,0,.0625);
    --extras-schuif-active-color:#FA6460;
    --extras-schuif-active-background:white;
    --extras-schuif-border-width:2px;

    --extras-neg-text:"nee";
    --extras-pos-text:"ja";
}