/* CSS RESET --> in 'all.css' is een kleine CSS reset opgenomen die je naar eigen voorkeur kunt aanvullen of uitkleden */

/* BLOKJES --> Elk blokje (li) heeft een ID, die je kunt gebruiken als "namespace" om CSS alleen voor dat blokje te laten gelden */


/**************/
/* TRANSFORMS */
/**************/

/* GENERAL CSS */
.transform-basis {
	display:flex;
	justify-content:center;
	align-items:center;
}

.transform-basis div {
   width:6rem; height:6rem;
   margin:.75em; padding:.375em;
   line-height:1.25em;
   background-color:crimson;
   display:flex;
   justify-content:center;
   align-items:center;
   text-align: center;
}


/* YOUR CSS */

/***************/
/* ID = rondje */
/***************/
#rondje div {
	border-radius:50%;
}


/******************/
/* ID = kwartrond */
/******************/
#blaadje div {
	border-radius:50% 0 50% 0;
}


/******************/
/* ID = taartpunt */
/******************/
#taartpunt div {
	border-radius:100% 0 0 0;
}


/*****************/
/* ID = schildje */
/*****************/
#schildje div {
	border-radius:0 0 65% 65% / 0 0 100% 100%;
}


/**************/
/* ID = eitje */
/**************/
#eitje div {
   border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
   transform:scaleY(1.25);
}


/**********************/
/* ID = driekwartboog */
/**********************/
#driekwartboog div {
   background: none;
   /* your code */
   border-style: solid;
   border-color:transparent crimson crimson;
   border-width:1.5em;
   border-radius:50%;
}


/****************/
/* ID = draaien */
/****************/
#draaien div {
	transform:rotate(45deg);
}


/**************************/
/* ID = rotateX-vs-scaleY */
/**************************/
#rotateX-vs-scaleY div:first-child {
	transform:rotateX(60deg);
}

#rotateX-vs-scaleY div:last-child {
	transform:scaleY(.5);
}


/***************/
/* ID = scheef */
/***************/
#scheef div {
	transform:skew(45deg);
}


/*******************************/
/* ID = verplaatsen-en-schalen */
/*******************************/
#verplaatsen-en-schalen div {
	width:3em; height:3em;
}

#verplaatsen-en-schalen div:nth-of-type(2) {
	/* your code */
	transform:scale(1.25) translate(0,-1em);
}


/********************/
/* ID = box-schaduw */
/********************/
#box-schaduw div {
	box-shadow:4px 4px 5px rgba(0,0,0,.5);
}


/*************************/
/* ID = smallere-schaduw */
/*************************/
#smallere-schaduw div {
	box-shadow:0 8px 5px -4px rgba(0,0,0,.5);
}


/**********************/
/* ID = inset-schaduw */
/**********************/
#inset-schaduw div {
	box-shadow: inset 4px 4px 5px rgba(0,0,0,.5);
}


/***************/
/* ID = knopje */
/***************/
#knopje {
   display:grid;
   grid-template-columns:min-content min-content;
   justify-content:center;
   align-content:center;
}

#knopje div {
	width:5em; height:5em;
}

#knopje div:nth-of-type(1) {
   /* your code */
	border-radius:1.25em;
}

#knopje div:nth-of-type(2) {        
   /* your code */
   border-radius:1.25em;
   box-shadow:        
      inset 4px 4px 5px rgba(255,255,255,.5),
      inset -4px -4px 5px rgba(0,0,51,.5);
}

#knopje div:nth-of-type(3) {        
   /* your code */
	border-radius:1.25em;
   box-shadow:
      1px 1px 5px 1px rgba(230,204,204,.75),
      -1px -1px 5px 1px rgba(26,0,0,.75),
      inset 4px 4px 5px rgba(255,255,255,.5),
      inset -4px -4px 5px rgba(26,0,0,.5);
}

#knopje div:nth-of-type(4) {
   /* your code */
   border:solid 2px rgb(153,102,102);
   border-radius:1.25em;
   box-shadow:
      1px 1px 5px 1px rgba(230,204,204,.75),
      -1px -1px 5px 1px rgba(26,0,0,.75),
      inset 4px 4px 5px rgba(255,255,255,.5),
      inset -4px -4px 5px rgba(26,0,0,.5);
}


/*********************/
/* ID = text-schaduw */
/*********************/
#text-schaduw div {
	font-weight:700;
	color:crimson;
}

#text-schaduw div:first-child {
	text-shadow:1px 1px 1px rgba(0,0,0,.75), -1px -1px 1px rgba(255,255,255,.875);
}

#text-schaduw div:last-child {
	text-shadow:-1px -1px 1px rgba(0,0,0,.75), 1px 1px 1px rgba(255,255,255,.875);
}


/******************/
/* ID = transitie */
/******************/
#transitie div {
	/* your code */
	transition:1s;
}

#transitie:hover div {
	/* your code */
	background-color:gold;
}


/***********************/
/* ID = meer-transitie */
/***********************/
#meer-transitie div {
	transition:1s;
}

#meer-transitie:hover div {
	background-color:gold;
	border-radius:30%;
}


/*********************************/
/* ID = langzaam-heen-snel-terug */
/*********************************/
#langzaam-heen-snel-terug div {
	transition:.5s;
}

#langzaam-heen-snel-terug:hover div {
	background-color:gold;
	border-radius:30%;
	transform:rotateY(360deg);
	transition:2s;
}


/*********************************/
/* ID = meer-snelheden-transitie */
/*********************************/
#meer-snelheden-transitie div {
   transition:
      background-color .5s,
      border-radius 1.25s,
      transform 3s;
}

#meer-snelheden-transitie:hover div {
	background-color:gold;
	transform:rotate(45deg);
   border-radius:30%;
}


/*********************************************/
/* ID = meer-snelheden-transitie-met-uitstel */
/*********************************************/
#meer-snelheden-transitie-met-uitstel div {
   transition:
		background-color 1s, 
		border-radius 1s 1s, 
		transform 1s 2s;
}

#meer-snelheden-transitie-met-uitstel:hover div {
   background-color:gold;
   transform:rotate(45deg);
   border-radius:30%;
}


/********************************/
/* ID = draaien-met-perspectief */
/********************************/
/* perspective op de elementen zelf */
#draaien-met-perspectief {
	justify-content:space-around;
}

#draaien-met-perspectief div {
	/* your code */
	transform:perspective(10em) rotateX(45deg);
	transition:1s;
}

#draaien-met-perspectief:hover div {
	/* your code */
	transform:perspective(10em) rotateX(0);
}


/********************************/
/* ID = draaien-met-perspectief */
/********************************/
/* perspective op de ouder van de elementen */
#draaien-parent-perspectief {
	justify-content:space-around;
	/* your code */
	perspective:10em;
}

#draaien-parent-perspectief div {
	/* your code */
	transform:rotateX(45deg);
	transition:1s;
}

#draaien-parent-perspectief:hover div {
	/* your code */
	transform:rotateX(0);
}


/**********************/
/* ID = drieD-schaduw */
/**********************/
/* perspective nodig op de ouder */
#drieD-schaduw {
	perspective:10em;
}

#drieD-schaduw div {
	transform:rotateX(45deg);    
	box-shadow:0 40px 10px -10px rgba(0,0,0,.25);
}


/************************************/
/* ID = schaduw-met-before-en-after */
/************************************/
#schaduw-met-before-en-after div {
	width:9em;
	/* your code */
	position:relative;
	transform-style:preserve-3d;
}

#schaduw-met-before-en-after div::before,
#schaduw-met-before-en-after div::after {
   /* your code */
   content:"";
   position:absolute;
   width:calc(100% - 10px); height:12px;
   bottom:0;
   box-shadow:0 5px 5px rgba(0, 0, 0, 0.5);
}

#schaduw-met-before-en-after div::before {
   /* your code */
   left:5px;
   transform-origin:left bottom;
   transform:skewY(-4deg) translateZ(-1em);
}

#schaduw-met-before-en-after div::after {
   /* your code */
   right:5px;
   transform-origin:right bottom;
   transform:skewY(4deg) translateZ(-1em);
}


/***************/
/* ID = punten */
/***************/
/* een beetje een trucje met borders */
#punten div {
   padding:0;
   background:none;
   /*your code */
   border-style:solid;
   border-width:3em;
   border-color:transparent Crimson Crimson Crimson;
}

#punten:hover div {
	border-color:transparent dodgerblue yellowgreen gold;
}

/*****************/
/* ID = driehoek */
/*****************/
/* een beetje een trucje met borders */
#driehoek div {
   padding:0;
   background:none;
   /*your code */
   border-style:solid;
   border-width:0 3em 6em;
   border-color:transparent transparent crimson;
}


/****************/
/* ID = zesster */
/****************/
#zesster {
   display:flex;
   justify-content:center;
   align-items:center;
}

/* een beetje een trucje met borders */
#zesster div {
   position: relative;
   width:6.928203230275509em; height:8em;
}

#zesster div::before,
#zesster div::after {
   /*your code */
   content:"";
   position: absolute;
   left:0;
   border-style:solid;
   border-width:0 3.464101615137755em 6em;
   border-color:transparent transparent crimson;
}

#zesster div::before {
   /*your code */
   top:0;
}

#zesster div::after {
   /*your code */
   bottom:0;
   transform:rotate(180deg);
}

/* hover effect */
#zesster:hover div::before,
#zesster:hover div::after{
	opacity:.5;
}


/*****************/
/* ID = vijfster */
/*****************/
/* een beetje een raar trucje met borders */
#vijfster div,
#vijfster div::before,
#vijfster div::after {
	position:absolute;
}

#vijfster div {
   left:calc(50% - 1.5em); top:calc(50% - 4em);
   border-left:1.5em solid transparent;
   border-right:1.5em solid transparent;
   border-bottom:4em solid crimson;
   transform:scale(.86);
}

#vijfster div::before,
#vijfster div::after {
	content:'';
	top:3em;
	border-right:5em solid transparent;
	border-left:5em solid transparent;
	border-bottom:3.5em solid crimson;
}
#vijfster div::before {
	left:-4.75em;
	transform:rotate(35deg);
}
#vijfster div::after {
	left:-5.25em;
	transform:rotate(-35deg);
}

#vijfster:hover div,
#vijfster:hover div::before,
#vijfster:hover div::after {
	opacity:.5;
}


/***********************/
/* ID = clip-path-ster */
/***********************/
/* mooier en robuster - maar nog niet overal ondersteund */
#clip-path-ster div {
   position:absolute;
   width:9em; height:9em;
   left:calc(50% - 4.5em); top:calc(50% - 4.5em);
   /* your code */
   background-color:crimson;
   -webkit-clip-path:polygon(50% 0, 61.2% 34.5%, 97.6% 34.5%, 68.2% 55.9%, 79.4% 90.4%, 50% 69%, 20.6% 90.4%, 31.8% 55.9%, 2.4% 34.5%, 38.8% 34.5%, 50% 0);
   clip-path:polygon(50% 0, 61.2% 34.5%, 97.6% 34.5%, 68.2% 55.9%, 79.4% 90.4%, 50% 69%, 20.6% 90.4%, 31.8% 55.9%, 2.4% 34.5%, 38.8% 34.5%, 50% 0);
}


/***************/
/* ID = hartje */
/***************/
#hartje div {
	position:relative;
	width:7.5em; height:7.5em;
	left:calc(50% - 3.75em); top:calc(50% - 3.75em);
}

#hartje div::before,
#hartje div::after {
   /* your code */
   position:absolute;
   content:"";
   width:60%; height:90%;
   bottom:3%;
   background-color:crimson;
   border-radius:100em 100em 0 0;
}

#hartje div::before {
   /* your code */
   left:50%;	
   transform-origin:0 100%;
   transform:rotate(-45deg);
}

#hartje div::after {
   /* your code */
   left:-10%;	
   transform-origin:100% 100%;
   transform:rotate(45deg);
}

/* hover effect */
#hartje:hover div::before,
#hartje:hover div::after {
    opacity:.5;   
}


/***********************/
/* ID = zoek-met-focus */
/***********************/
/* nb. ook op je telefoon(s) testen */
#zoek-met-focus form {
	text-align:right;
}

#zoek-met-focus input {
   width:2.5em;
   font-size:inherit;
   line-height:2.5em;
   margin:0; padding:0 .5em 0 2em;
   overflow:hidden;

   -webkit-appearance:none;
   background:white url(../images/ui-zoek.svg) .5em center / 1.5em no-repeat;
   border:solid 2px crimson;
   border-radius:.5em;
   outline:none;

   /* your code */
   transition:.5s ease-out;
}

#zoek-met-focus input:focus {
   /* your code */
   width:100%;
}

#zoek-met-focus button {
   /* https://a11yproject.com/posts/how-to-hide-content/ */
   position: absolute !important;
   height: 1px; 
   width: 1px;
   overflow: hidden;
   clip: rect(1px 1px 1px 1px);
   clip: rect(1px, 1px, 1px, 1px);
   white-space: nowrap;
}


/*****************/
/* ID = starwars */
/*****************/
#starwars {
   padding:0;
   overflow:hidden;
   background:url(../images/image-stars.jpg) no-repeat center center / cover;
}

#starwars div {
   position:absolute;
   width:14em; height:14em;
   left:calc(50% - 7em); top:calc(50% - 7em);
   transform:perspective(7em) rotateX(30deg) ;
}

#starwars div p {
	color:rgba(255,255,255,.8);
	text-align:center;
}