@font-face {
  font-family: "Seraphs";
  src: url(../type/SeraphsVF.woff2); /* Modern Browsers */
}

*{
  box-sizing: border-box; 
}





body {
  margin: 0;              /* Geen buitenrand in website */
  padding: 2.5rem 1.5rem; 
  font-family: "seraphs";
  overflow-x: hidden;     /* Geen horizontale schuifbalk op telefoon */
}




/* MARK: voor ik vergeet */
h1 {
  display: flex;          
  flex-direction: column; 
  gap: 0rem;           /* ruimte tussen de regels */
  margin: 2em 0 5em 2em;     /* 1e=bovenkant, 2e=rechterkant, 3=onderkant, 4=linkerkant */
  line-height: .9;         /* ruimte tussen regels */
}

h1 div {
  display: flex;          /* Zet woorden binnen één regel op dezelfde rij */
  align-items: baseline;  
  gap: .2rem;            /* Witruimte tussen het kleine en grote woord */
}

h1 span {
  font-size: clamp(2.4rem, 6vw, 4.2rem); 
  font-variation-settings: 
    "wght" 200, 
    "SRFS" 42;                    
}

h1 div:nth-of-type(2) {
  margin-left: 2.5rem;   
}

h1 div:nth-of-type(2) span:nth-of-type(1) {
  font-size: clamp(1.1rem, 2.8vw, 1.7rem); 
  font-variation-settings: 
    "wght" 100, 
    "SRFS" 42;    
}

h1 div:nth-of-type(3) {
  margin-left: 5rem;
}

h1 div:nth-of-type(3) span:nth-of-type(1) {
  font-size: clamp(1.1rem, 2.8vw, 1.7rem); 
  font-variation-settings: 
    "wght" 100, 
    "SRFS" 42;                       
}

h1 div:nth-of-type(4) span:nth-of-type(1){
  margin-top: 1.3rem;          
  font-size: clamp(1.1rem, 2.8vw, 1.7rem); 
  font-variation-settings: 
    "wght" 100, 
    "SRFS" 42;   
}




/* MARK: koninginnendag */
h2 {
  position: relative;     
  width: min(100%, 28rem);
  height: 9rem;           /* Hoogte van de boog */
  margin: 0 auto;         /* Centreert de boog */ 
}

h2 span {
  position: absolute;   
  font-size: clamp(2rem, 5.5vw, 3rem); 
  font-variation-settings: 
    "wght" 200, 
    "SRFS" 60;       
  
}

/* Coördinaten en rotaties voor letterboog */
h2 span:nth-of-type(1)  { left: 3%;  top: 74%; transform: rotate(-55deg); } /* k */
h2 span:nth-of-type(2)  { left: 8%;  top: 54%; transform: rotate(-44deg); } /* o */
h2 span:nth-of-type(3)  { left: 14%; top: 37%; transform: rotate(-33deg); } /* n */
h2 span:nth-of-type(4)  { left: 21%; top: 24%; transform: rotate(-24deg); } /* i */
h2 span:nth-of-type(5)  { left: 28%; top: 14%; transform: rotate(-16deg); } /* n */
h2 span:nth-of-type(6)  { left: 36%; top: 7%;  transform: rotate(-9deg);  } /* g */
h2 span:nth-of-type(7)  { left: 44%; top: 3%;  transform: rotate(-3deg);  } /* i */
h2 span:nth-of-type(8)  { left: 51%; top: 3%;  transform: rotate(3deg);   } /* n */
h2 span:nth-of-type(9)  { left: 59%; top: 7%;  transform: rotate(9deg);   } /* n */
h2 span:nth-of-type(10) { left: 67%; top: 14%; transform: rotate(17deg);  } /* e */
h2 span:nth-of-type(11) { left: 74%; top: 24%; transform: rotate(26deg);  } /* n */
h2 span:nth-of-type(12) { left: 81%; top: 38%; transform: rotate(36deg);  } /* d */
h2 span:nth-of-type(13) { left: 88%; top: 54%; transform: rotate(47deg);  } /* a */
h2 span:nth-of-type(14) { left: 93%; top: 74%; transform: rotate(57deg);  } /* g */




/* MARK: mijn vrienden */
body > p:nth-of-type(1) {
  text-align: center;  
  font-size: clamp(1.1rem, 2.8vw, 1.4rem); 
  margin: 0.5rem 0 9rem 0; 
  letter-spacing: 0.05em; 
  font-variation-settings: 
    "wght" 100, 
    "SRFS" 0;  
}



/* MARK: niet meer weet */
body > div:nth-of-type(1) {
  display: flex;
  justify-content: space-around; /* Zorgt voor overal evenveel tussenruimte */
  max-width: 80rem; 
  margin: 1rem auto; /* boven en onder, links en rechts */
  padding: 1rem;
}

body > div:nth-of-type(1) > p:nth-of-type(1) {
  display: flex;
  flex-direction: column;
  margin: 0;
  line-height: 1.05;
  font-variation-settings: 
    "wght" 100, 
    "SRFS" 0;  
}

body > div:nth-of-type(1) > p:nth-of-type(1) span {
  font-size: clamp(1.1rem, 3vw, 3rem);
}

/* 2e e in nieeets */
body > div:nth-of-type(1) > p:nth-of-type(1) span:nth-of-type(2) span:nth-of-type(1) {
  font-size: clamp(1.3rem, 4vw, 3rem);
}

/* 3e e in nieeets */
body > div:nth-of-type(1) > p:nth-of-type(1) span:nth-of-type(2) span:nth-of-type(2) {
  font-size: clamp(1.4rem, 4.5vw, 3.5rem);
}

body > div:nth-of-type(1) > p:nth-of-type(1) span:nth-of-type(5) {
  font-variation-settings: 
    "wght" 150, 
    "SRFS" 0;  
  margin-top: 2rem;
}




/* MARK: straten en examen */
h3 {
  position: relative;
  width: 48vw;             
  height: 48vw;
  margin: 4rem 0; /* boven en onder, links en rechts */
}

h3 span {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 3.5vw;          
  font-variation-settings: 
    "wght" 200, 
    "SRFS" 60;
  text-align: center;
  margin-left: -0.5em; 
}

/* bovenste boog */
h3 span:nth-of-type(1)  { transform: rotate(-95deg) translateY(-17vw); } /* s */
h3 span:nth-of-type(2)  { transform: rotate(-83deg) translateY(-17vw); } /* t */
h3 span:nth-of-type(3)  { transform: rotate(-72deg) translateY(-17vw); } /* r */
h3 span:nth-of-type(4)  { transform: rotate(-60deg) translateY(-17vw); } /* a */
h3 span:nth-of-type(5)  { transform: rotate(-49deg) translateY(-17vw); } /* t */
h3 span:nth-of-type(6)  { transform: rotate(-38deg) translateY(-17vw); } /* e */
h3 span:nth-of-type(7)  { transform: rotate(-26deg) translateY(-17vw); } /* n */
h3 span:nth-of-type(8)  { transform: rotate(-14deg) translateY(-17vw); } /* e */
h3 span:nth-of-type(9)  { transform: rotate(-2deg)  translateY(-17vw); } /* n */
h3 span:nth-of-type(10) { transform: rotate(10deg)  translateY(-17vw); } /* e */
h3 span:nth-of-type(11) { transform: rotate(22deg)  translateY(-17vw); } /* x */
h3 span:nth-of-type(12) { transform: rotate(34deg)  translateY(-17vw); } /* a */
h3 span:nth-of-type(13) { transform: rotate(47deg)  translateY(-17vw); } /* m */
h3 span:nth-of-type(14) { transform: rotate(62deg)  translateY(-17vw); } /* e */
h3 span:nth-of-type(15) { transform: rotate(74deg)  translateY(-17vw); } /* n */
h3 span:nth-of-type(16) { transform: rotate(86deg)  translateY(-17vw); } /* s */

/* onderste boog */
h3 span:nth-of-type(17) { transform: rotate(50deg)  translateY(17vw); } /* e */
h3 span:nth-of-type(18) { transform: rotate(40deg)  translateY(17vw); } /* n */
h3 span:nth-of-type(19) { transform: rotate(30deg)  translateY(17vw); } /* v */
h3 span:nth-of-type(20) { transform: rotate(20deg)  translateY(17vw); } /* a */
h3 span:nth-of-type(21) { transform: rotate(10deg)  translateY(17vw); } /* k */
h3 span:nth-of-type(22) { transform: rotate(0deg)   translateY(17vw); } /* a */
h3 span:nth-of-type(23) { transform: rotate(-10deg) translateY(17vw); } /* n */
h3 span:nth-of-type(24) { transform: rotate(-20deg) translateY(17vw); } /* t */
h3 span:nth-of-type(25) { transform: rotate(-30deg) translateY(17vw); } /* i */
h3 span:nth-of-type(26) { transform: rotate(-40deg) translateY(17vw); } /* e */
h3 span:nth-of-type(27) { transform: rotate(-50deg) translateY(17vw); } /* s */



/* MARK: ruzie op feest */
body > div:nth-of-type(1) > p:nth-of-type(2) {
  display: flex;
  flex-direction: column;
  align-self: flex-end;          
  text-align: right;
  margin: 0;
  font-variation-settings: 
    "wght" 100, 
    "SRFS" 0;  
}

body > div:nth-of-type(1) > p:nth-of-type(2) span {
  font-size: clamp(1.1rem, 3vw, 3rem);
}


/* MARK: Biltstraat */
body > div:nth-of-type(2) {
  display: flex;
  align-items: center;    
  gap: 0.5rem;            
  margin: 6rem auto;     
  text-align: center;
  flex-direction: column;
}

body > div:nth-of-type(2) > p {
  display: flex;
  gap: 1.65rem;           
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.2;
}

body > div:nth-of-type(2) > p:first-of-type > span:nth-of-type(2),
body > div:nth-of-type(2) > p:first-of-type > span:nth-of-type(4) {
  font-variation-settings: 
    "wght" 200, 
    "SRFS" 0; 
}

body > div:nth-of-type(2) > p:last-of-type > span:nth-of-type(2),
body > div:nth-of-type(2) > p:last-of-type > span:nth-of-type(4) {
  font-variation-settings: 
    "wght" 200, 
    "SRFS" 0; 
}



/* MARK: animatietje */
@keyframes dunNaarDik {
  0% {
    font-variation-settings: 
      "wght" 100, 
      "SRFS" 0;
  }
  100% {
    font-variation-settings: 
      "wght" 200, 
      "SRFS" 60;
  }
}

@keyframes dikNaarDun {
  0% {
    font-variation-settings: 
      "wght" 200, 
      "SRFS" 60;
  }
  100% {
    font-variation-settings: 
      "wght" 100, 
      "SRFS" 0;
  }
}

body > div:nth-of-type(2) > p > span {
  font-variation-settings: 
    "wght" 100, 
    "SRFS" 0;
  animation: dunNaarDik 2s ease-in-out infinite alternate;
}

body > div:nth-of-type(2) > p:first-of-type > span:nth-of-type(2),
body > div:nth-of-type(2) > p:first-of-type > span:nth-of-type(4),
body > div:nth-of-type(2) > p:last-of-type > span:nth-of-type(2),
body > div:nth-of-type(2) > p:last-of-type > span:nth-of-type(4) {
  font-variation-settings: 
    "wght" 200, 
    "SRFS" 60;
  animation: dikNaarDun 2s ease-in-out infinite alternate;
}