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

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


/*****************/
/* MEDIA QUERIES */
/*****************/

/* ALGEMENE CSS */
article:not(#intro) {
	display:flex;
	justify-content:center;
	align-items:center;
}

article > div {
   width:90%; min-height:50%;
   padding:1em;

   display:flex;
   flex-direction:column;
   justify-content:center;
   align-items:center;
   text-align:center;

   border:solid .25em crimson;
   background-color:rgba(255,255,255,.75);
}


/**************/
/* ID = intro */
/**************/

#intro p {
	margin-top:0;
}

/*****************************/
/* ID = breedte-van-viewport */
/*****************************/
/* small screen --> image-1.jpg, rode border */
/* min-width: 30em --> image-2.jpg + blauwe rand */
/* min-width: 48em --> image-3.jpg + groene rand */
/* min-width: 84em --> image-4.jpg + goude rand */

#breedte-van-viewport {
	background:url(../images/image-1.jpg) center / cover;
}

#breedte-van-viewport div::before {
	content:"breedte: small";
}

/*your code */

@media (min-width: 30em) {
   #breedte-van-viewport { background-image:url(../images/image-2.jpg);}
   #breedte-van-viewport div { border-color:dodgerblue; }
   #breedte-van-viewport div::before { content:"breedte: min. 30em"; }
}

@media (min-width: 48em) {
   #breedte-van-viewport { background-image:url(../images/image-3.jpg);}
   #breedte-van-viewport div { border-color:yellowgreen; }
   #breedte-van-viewport div::before { content:"breedte: min. 48em"; }
}

@media (min-width: 84em) {
   #breedte-van-viewport { background-image:url(../images/image-4.jpg);}
   #breedte-van-viewport div { border-color:gold; }
   #breedte-van-viewport div::before { content:"breedte: min. 84em"; }
}


/**************************/
/* ID = hoogte-van-device */
/**************************/
/* small screen --> image-5.jpg, rode border */
/* min-height: 30em --> image-6.jpg + blauwe rand */
/* min-height: 48em --> image-7.jpg + groene rand */

#hoogte-van-viewport {
	background:url(../images/image-5.jpg) center / cover;
}

#hoogte-van-viewport div::before {
	content:"hoogte: small";
}

/*your code */

@media (min-height: 30em) {
   #hoogte-van-viewport { background-image:url(../images/image-6.jpg);}
   #hoogte-van-viewport div { border-color:dodgerblue; }
   #hoogte-van-viewport div::before { content:"hoogte: min. 30em"; }
}

@media (min-height: 48em) {
   #hoogte-van-viewport { background-image:url(../images/image-7.jpg);}
   #hoogte-van-viewport div { border-color:yellowgreen; }
   #hoogte-van-viewport div::before { content:"hoogte: min. 48em"; }
}


/**********************/
/* ID = hoog-of-breed */
/**********************/
/* min-width: 48em of min-height: 48em --> groene rand */

#hoog-of-breed {
	background:url(../images/image-8.jpg) center / cover;
}

#hoog-of-breed div::before {
	content:"breedte: small";
}

#hoog-of-breed div::after {
	content:"hoogte: small";
}

/*your code */

@media (min-width: 48em) {
	#hoog-of-breed div::before { content:"breedte: min. 48em"; }
}

@media (min-height: 48em) {
	#hoog-of-breed div::after { content:"hoogte: min. 48em"; }
}

@media (min-width: 48em), (min-height: 48em) {
   #hoog-of-breed div { border-color:yellowgreen; }
}


/**********************/
/* ID = hoog-en-breed */
/**********************/
/* min-width: 48em en min-height: 48em --> groene rand */

#hoog-en-breed {
	background:url(../images/image-9.jpg) center / cover;
}

#hoog-en-breed div::before {
	content:"breedte: small";
}

#hoog-en-breed div::after {
   content:"hoogte: small";
}

/*your code */

@media (min-width: 48em) {
	#hoog-en-breed div::before { content:"breedte: min. 48em"; }
}

@media (min-height: 48em) {
	#hoog-en-breed div::after { content:"hoogte: min. 48em"; }
}

@media (min-width: 48em) and (min-height: 48em) {
   #hoog-en-breed div { border-color:yellowgreen; }
}


/**********************************/
/* ID = verhouding-hoogte-breedte */
/**********************************/
/* hoger dan breed --> image-orientation-portrait + groene rand */

#verhouding-hoogte-breedte {
   background:url(../images/image-orientation-landscape.jpg) center / cover;
}

#verhouding-hoogte-breedte div::before {
   content:"breder dan hoog (landscape)";
}

/*your code */

@media (orientation: portrait) {
	#verhouding-hoogte-breedte div { width:50%; height:90%; border-color:yellowgreen; }
	#verhouding-hoogte-breedte div::before { content:"hoger dan breed (portrait)"; }
}


/**************************/
/* ID = ongeveer-vierkant */
/**************************/
/* vierkant met marge 5% --> groene rand */

#ongeveer-vierkant {
   background:url(../images/image-2.jpg) center / cover;
}

#ongeveer-vierkant div::before {
	content:"niet vierkant";
}

/*your code */

@media (min-aspect-ratio: 19/20) and (max-aspect-ratio: 20/19) {
   #ongeveer-vierkant div { border-color:yellowgreen; width:70%; height:70%; }
   #ongeveer-vierkant div::before { content:"ongeveer vierkant"; }
}


/************************/
/* ID = schermresolutie */
/************************/
/* min-resolutie: 144dpi --> image-res-high.jpg + groene rand */
/* natuurlijk alleen te testen als je een high-res en een low-res device hebt - of in low-res in inspector mode */

#schermresolutie {
	background:url(../images/image-res-low.jpg) center / cover;
}

#schermresolutie div:before {
	content:"lage resolutie";
}

@media (min-resolution: 144dpi) {
   #schermresolutie { background-image:url(../images/image-res-high.jpg); }
   #schermresolutie div { border-color:yellowgreen; }
   #schermresolutie div:before { content:"hoge resolutie (min." "\00a0" "144dpi)"; }
}


/************************/
/* ID = scherm-of-print */
/************************/
/* voor scherm --> rode rand */
/* voor scherm --> groene rand */
#scherm-of-print { 
	background:url(../images/image-3.jpg) center / cover; 
}

@media screen {
   #scherm-of-print div {  border-color:crimson; }
   #scherm-of-print div::before {  content:"voor scherm"; }
}

@media print {
   #scherm-of-print div {  border-color:yellowgreen; }
   #scherm-of-print div::before {  content:"voor print"; }
}


/*******************************/
/* ID = prefers-reduced-motion */
/*******************************/
/* heeft voorkeur voor weinig beweging --> geen animatie + groene rand */

#prefers-reduced-motion {
	background:url(../images/image-4.jpg) center / cover;
}

@keyframes prefers-motions {
   from{ transform:rotate(-2deg); }
   to { transform:rotate(2deg); }
}

#prefers-reduced-motion div {
	animation:prefers-motions 1s infinite ease-in-out alternate running;
}

#prefers-reduced-motion div::before {
	content:"motion is geen probleem";
}

@media (prefers-reduced-motion: reduce) {
   #prefers-reduced-motion div { 
      border:solid 3px yellowgreen; 
      animation-play-state:paused;
   }
	
	#prefers-reduced-motion div::before {
		content:"weinig motion, a.u.b.";
	}
}


/*****************************/
/* ID = prefers-color-scheme */
/*****************************/
/* heeft voorkeur voor dark mode --> lichte tekst op donkere achtergrond + groene rand */
#prefers-color-scheme{
	background:url(../images/image-5.jpg) center / cover;
}

#prefers-color-scheme div::before {
	content:"lichte modus";
}

@media (prefers-color-scheme: dark) {
   #prefers-color-scheme div { 
      border-color:yellowgreen;
      background-color:rgba(0,0,0,.75);
      color:var(--main-background);
   }

   #prefers-color-scheme div::before {
      content:"donkere modus";
   }
}


/****************/
/* ID = pointer */
/****************/
/* input met je vinger --> groene rand */
#pointer {
	background:url(../images/image-6.jpg) center / cover;
}

#pointer div::before {
	content:"met een muis";
}

@media (pointer:coarse) {
   #pointer div { border-color:yellowgreen; }
   #pointer div::before { content:"met je vinger"; }
}


/****************/
/* ID = hover */
/****************/
/* er wordt gehovered --> blauwe rand */
/* hover werkt niet --> groene rand */
#hover {
	background:url(../images/image-7.jpg) center / cover;
}

#hover div::before {
	content:"ik ben te hoveren";
}

#hover div:hover {
	border-color:dodgerblue;
}

#hover div:hover::before {
	content:"ik wordt gehovered";
}


@media (hover:none) {
   #hover div { border-color:yellowgreen; }
   #hover div::before { content:"ik ben niet te hoveren"; }
}


/***************************/
/* ID = omgekeerde-kleuren */
/***************************/
/* omgekeerde kleuren --> groene rand */
/* tot nu alleen in safari */
#omgekeerde-kleuren {
	background:url(../images/image-8.jpg) center / cover;
}

#omgekeerde-kleuren div::before {
	content:"normale kleuren";
}

@media (inverted-colors:inverted) {
   #omgekeerde-kleuren div { border-color:yellowgreen; filter:invert(1);}
   #omgekeerde-kleuren div::before { content:"omgekeerde kleuren"; }
}