/***********************************/
/* CODE VOOR DE FONTS - @FONT-FACE */
/***********************************/

/* jouw code hier */
/* alle fonts (@font-face's) zet je bovenaan je css */
/* kijk even naar oefening 1 hoe je @font-face gebruikt */
@font-face {
	font-family:"expletus";
	src:url("../fonts/Montserrat-Thin.ttf");
	font-weight:100; /* 400 is de code voor dikte normal */
	font-style: normal; /* hier niet perse nodig - maar goed om wel toe te voegen */
	font-display: fallback; /* dit is goed om altijd op te nemen */
}

@font-face {
	font-family:"expletus";
	src:url("../fonts/SairaCondensed-Bold.ttf");
	font-weight:700; /* 700 is de code voor dikte bold */
	font-style: normal;
	font-display: fallback;
}

html  {
    --background: light-dark(white, black);
    --color-LightDark: light-dark(black, white);
}

#HeaderKop {
  display: grid;
  width: 100%;
  grid-template-columns: 3fr 1fr 3fr;
  grid-template-rows: auto auto;
  align-items: center;
}

#HeaderKop h1 {
  font-size: 80px;
}

/*******************************/
/* CODE VOOR HET EERSTE BLOKJE */
/*******************************/

/* hiermee selecteer je de eerste li */
.YGG-li:nth-of-type(1) {
  /* h2 in het midden van de li */
  /* hoef je nu nog niet te snappen - mag wel ;-) */
  display:grid;
  place-items:center;

	
	/* jouw code hier */
  background-color: rgb(0 24 54);	
}

/* hiermee selecteer je de h2 in de eerste li */
.YGG-li:nth-of-type(1) .YGG {
  /* de h2 wordt zo smal als het langste woord */
	/* daardoor staat elk woord op een nieuwe regel */
	width:min-content;
	/* en dan gecentreerd */
	text-align:center;
	
	/* jouw code hier */
  font-family:"expletus";
  font-size: 3rem;
	font-weight:100; /* 700 is de code voor dikte bold */
  color: hsl(0 0% 100%);
  line-height: .8em;
  text-transform: uppercase;
  text-shadow: 0 0 0.2em cyan, 0 0 0.4em cyan, 0 0 0.4em cyan;
}

/*******************************/
/* CODE VOOR HET TWEEDE BLOKJE */
/*******************************/

.GVO-li:nth-of-type(2) {
	/* h2 in het midden van de li */
  display:grid;
  place-items:center;

	/* jouw code hier */
  background-color: rgb(230 127 138);

	
} 

.GVO-li:nth-of-type(2) .GVO {
  width:min-content;
	text-align:center;
	
	/* jouw code hier */
  font-family:"expletus";
	font-weight:700; /* 700 is de code voor dikte bold */
  font-size: 3.5em;
  line-height: 1em;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: .1em .1em 0 rgb(0 0 0 / .5);
  transform: skewY(-10deg);
  color: white;

}

/*************************************/
/* BASIS - HOEF JE NIETS MEE TE DOEN */
/*************************************/

@layer basis {
  *, *::after, *::before {
    box-sizing:border-box;  
  }
  
  .CSS-DeepDive-HEADER, .CSS-DeepDive-MAIN {
	width:min(100%, 30rem);
    margin-inline:auto;
  }

  .HeaderLINK {
    color: var(--color-LightDark);
    text-decoration: none;
    display: block;
  }

  .HeaderLINK:hover {
    text-decoration: underline;
  }

  .CSS-DeepDive-2 {
    margin:0;
    padding:0;
    list-style-type:"";
    display:grid;
    gap:var(--template-size-whitespace);
  }

    .YGG-li, .GVO-li {
    height:clamp(14em, 80vw, 18em);
    background-color:white;
		border-radius:1em;
		color:black;
  } 
}

/*
MARK: Mobiel screen 768px (iphone 17)
*/
@media screen and (max-width: 768px) {

  #HeaderKop {
    display: grid;
    width: 100%;
    grid-template-columns: max-content;
    grid-template-rows: auto auto;
    align-items: center;
  }

  #HeaderKop h1 {
    font-size: 6vw;
    animation: --puff-ani 1.5s infinite alternate ease-in-out paused;

    &:hover {
      -webkit-text-stroke-width: .1em;
      -webkit-text-stroke-color: var(--color-LightDark);
      text-shadow: 0px 0px 20px var(--background-ikea);
      animation-play-state: running;
    }
  }

  @keyframes --puff-ani {
    0% {
        letter-spacing: 0em;
    }
    100% {
        letter-spacing: 8px;
        font-size: 6vw;
    }
  }

  .CSS-DeepDive-MAIN {
    margin: 5% 0px;
    border-top: 2px solid var(--color-LightDark);
    border-bottom: 2px solid var(--color-LightDark);
    transition: border 0.4s ease-in-out, padding 0.4s ease-in-out;

    &:hover {
      border-top: 5px dotted var(--Custom-ColorY);
      border-bottom: 5px dotted var(--Custom-ColorY);
      animation: BTmove 10s infinite;
    }
  }

  @keyframes BTmove {
  25% {
    border-top: 10px dotted var(--Boder-bottom-CustomY);
    border-bottom: 10px dotted var(--Boder-bottom-CustomY);
  }
  75% {
    border-top: 21px dotted var(--Border-bottom-CustumB);
    border-bottom: 21px dotted var(--Boder-bottom-CustomB);
  }
}

.CSS-DeepDive-MAIN > article > p {
  margin: 5%;
  word-break: break-word;
}

 .CSS-DeepDive-2 {
    display: grid;
    grid-template-rows: auto auto;
    place-items: center;
    width: 100%;
    gap: 1rem;
    margin: 5% 0px;
 }

 .YGG-li:nth-of-type(1) {
  place-items: center;
  background-color: rgb(0 24 54);
  width: 90%;
  height: 250px;
 }

 .GVO-li:nth-of-type(2) {
  place-items: center;
  background-color: rgb(230 127 138);
  width: 90%;
  height: 250px;
 }

}