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

@font-face {
  font-family: "Spiral";
  src: url("./Style/SpiralST.ttf") format("ttf");
}

@font-face {
  font-family: "Eskargot";
  src: url("./Style/ESKARGOT.ttf") format("ttf");
}

:root {
  --whitespace-s: 24px;
  --whitespace-m: 48px;
  --whitespace-l: 72px;
  --whitespace-xl: 96px;
}

/* MARK: items */
html {
  font-family: "Seraphs";
  /* background-image: repeating-linear-gradient(90deg, #f002 0 40px, #fff 0 60px); */
  background-position: left top;
  background-attachment: fixed;
}

/* MARK: HEADER */
header {
  img {
    width: 20%;
    padding-top: 24px;
  }
  grid-column: 1/-1;
  /* background-color: #0f06; */

  @media (width > 620px) {
    grid-column: 2/-2;
  }

  @media (width > 720px) {
    grid-column: 3/-3;
  }
}

/* MARK: BODY */

body {
  min-height: 100%;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(8, 24px);
  grid-template-rows: 24px;
  line-height: 1.5em;
  font-size: 20px;
  font-variation-settings:
    "wght" 137,
    "SRFS" 0;
  background-color: #76b945;

  @media (width > 620px) {
    grid-template-columns: repeat(10, 1fr);
  }

  @media (width > 720px) {
    grid-template-columns: repeat(12, 1fr);
  }
}

.gitaartje {
  position: absolute;
  top: 100px;
  left: 100px;

  z-index: 0;
  margin: 0;
  width: max-content;

  font-size: var(--whitespace-m);
  opacity: 0.15;
}

.gitaartje_2 {
  position: absolute;
  top: 170px;
  left: 150px;

  z-index: 0;
  margin: 0;
  width: max-content;

  font-size: var(--whitespace-m);
  opacity: 0.15;
}

/* MARK: MAIN */
main {
  /* dubbele */
  padding-top: 48px;
  grid-column: 1/-1;
  /* background-color: #00f6; */

  display: grid;
  grid-template-columns: subgrid;
}

main > p {
  grid-column: 1/-1;
  /* background-color: #f0f6; */

  @media (width > 620px) {
    grid-column: 2/-2;
  }

  @media (width > 720px) {
    grid-column: 3/-3;
  }
}

/* MARK: INTRO */
/* check, check */
.intro {
  grid-column: 2/-1;
  grid-row: 1;
  padding: 0;
  margin: 0;
  color: #f0f6;
  font-size: var(--whitespace-m);
  /* transform: rotate(-90deg); */

  @media (width > 620px) {
    grid-row: 3/3;
    grid-column: 2/3;
    transform: rotate(-90deg);
  }

  /* @media (width > 720px) {
    grid-row: 3/3;
    transform: rotate(-90deg);
  } */
}

/* one */
.one {
  grid-column: 3/-1;
  grid-row: 1/2;
  margin: 0;
  padding: 0;

  align-self: end;
  color: #dfff00;

  @media (width > 620px) {
    grid-column: 3/-1;
    grid-row: 1/2;
    margin: 0;
    padding: 0;

    align-self: end;
    color: #dfff00;
  }
}

/* two */
.two {
  grid-column: 4/-1;
  grid-row: 2/3;
  margin-bottom: 0;
  align-self: end;
  margin: 0;
  padding: 0;

  color: #dfff00;
}

/* MARK: COUPLET 1 */
/* Spitting in a */
.Spitting_a {
  grid-column: 4/-1;
  grid-row: 3;
  margin-bottom: 0;
  align-self: end;
  margin: 0;
  padding: 72px 0 0 0;
}

.wi- {
  grid-column: 4/-1;
  grid-row: 4;
  margin-bottom: 0;
  align-self: end;
  margin: 0;
  padding: 24px 0 0 0;
}

.shing {
  grid-column: 4/-1;
  grid-row: 5;
  margin-bottom: 0;
  justify-self: start;
  margin: 0;
  padding: 24px 0 0 0;
}

/* Blown to hell */
/* .hell {
  line-height: 1.5em;
} */

/* well */
.w {
  grid-column: 4;
  grid-row: 6;
  margin: 0;
  justify-self: end;
  padding: 24px 0 0 0;
}

.e {
  grid-column: 5;
  grid-row: 7;
  margin: 0;
  justify-self: start;
  padding: 24px 0 0 5px;
}

.l {
  grid-column: 5;
  grid-row: 8;
  margin: 0;
  justify-self: center;
  /* padding-left: 240px; */
}

.l_2 {
  grid-column: 5;
  grid-row: 9;
  margin: 0;
  justify-self: end;
  /* padding-left: 300px; */
}

/* Blown to hell */
.hell {
  grid-column: 4/-1;
  grid-row: 10;
  margin-bottom: 0;
  align-self: end;
  margin: 0;
}

.crash {
  grid-column: 4/-1;
  grid-row: 11;
  margin: 0;
  transform: skew(-40deg);
  font-style: italic;
  /* font-size: 8em; */
  /* let op: niet de standaard! */
  line-height: 0.8em;

  font-size: clamp(50px, 10vw, 128px);
}

/* I'm the last splash */
.I_splash {
  grid-column: 4/-1;
  grid-row: 12;
  margin: 0;
  letter-spacing: -1px;
}

/* I know you */
.I_you {
  grid-column: 4/-1;
  grid-row: 13;
  margin: 0;
}

.little {
  grid-column: 4/-1;
  grid-row: 14;
  margin: 0;
  font-style: italic;
  /* aangepast! */
  font-size: 1em;
}

.libertine {
  grid-column: 4/-1;
  grid-row: 15;
  margin: 0;

  transform: skew(20deg);
  /* font-size: 2em; */
  /* font-variation-settings:
    "wght" 100,
    "SRFS" 40; */

  /* background-color: #0f06; */
  letter-spacing: 3px;

  /* @media (width > 620px) {
    grid-column: 2/-2;
  }

  @media (width > 720px) {
    grid-column: 3/-3;
  } */
}

/* I_real */
.nog-een {
  grid-column: 1/-1;
  /* background-color: #0f06; */
  align-items: end;

  /* houd deze media queries aan voor de andere elementen */
  @media (width > 620px) {
    grid-column: 2/-1;
  }

  @media (width > 720px) {
    grid-column: 4/-1;
  }

  display: grid;
  grid-template-columns: subgrid;
  /* grid-template-columns: repeat(7, max-content); */
  /* grid-template-rows: repeat(5, max-content); */
  grid-template-areas:
    "text text text c   u . . "
    ".    .    .    c_2 . . .  "
    ".    .    .    .   k . .  "
    ".    .    .    .   . o .  "
    ".    .    .    .   . . o_2";

  @media (width > 620px) {
    grid-template-areas:
      "text text c u .   . . .  "
      ".    .    . . c_2 . . .  "
      ".    .    . . .   k . .  "
      ".    .    . . .   . o .  "
      ".    .    . . .   . . o_2";
  }

  @media (width > 720px) {
    grid-template-areas:
      "text c u . . . . .  "
      ".    . . c_2 . . .  "
      ".    . . . . k . .  "
      ".    . . . . . o .  "
      ".    . . . . . . o_2";
  }
}

.I_real {
  grid-area: text;
}

.c {
  font-family: "Eskargot";
  grid-area: c;
}

.u {
  grid-area: u;
  transform: rotate(20deg);
  margin-bottom: 0;
}

.c_2 {
  font-family: "spiral";
  grid-area: c_2;
  transform: rotate(40deg);
  margin-top: 0;
  justify-self: start;
}

.k {
  font-family: "spiral";
  grid-area: k;
  transform: rotate(45deg);
  margin-top: 0;
}

.o {
  font-family: "spiral";
  grid-area: o;
  transform: rotate(80deg);
  margin-top: 0;
}

.o_2 {
  font-family: "spiral";
  grid-area: o_2;
  margin-top: 0;
}

/* MARK: REFREIN */
/* want you */
.wantyou {
  grid-column: 3/-1;
  grid-row: 17;
  margin: 0;

  font-weight: bolder;
  font-size: 40px;
}

/* cuckoo */
.cuckoo {
  font-family: "Eskargot";
  grid-column: 3/-1;
  grid-row: 18;
  margin: 0;

  font-weight: bolder;
  font-size: 40px;
}

/* cannonball */
.cannonball {
  grid-column: 3/-1;
  grid-row: 19;
  margin: 0;

  font-weight: bolder;
  font-size: 40px;
}

/* want you, */
.wantyou_2 {
  grid-column: 3/-1;
  grid-row: 20;
  margin: 0;
  padding-top: 24px;

  font-weight: bolder;
  font-size: 40px;
}

/* cuckoo */
.cuckoo_2 {
  font-family: "Eskargot";
  grid-column: 3/-1;
  grid-row: 21;
  margin: 0;

  font-weight: bolder;
  font-size: 40px;
}

/* cannonball */
.cannonball_2 {
  grid-column: 3/-1;
  grid-row: 22;
  margin: 0;

  font-weight: bolder;
  font-size: 40px;
}

/* In the shade, in the shade */
.shade {
  grid-column: 4/-1;
  grid-row: 23;
  margin: 0;
  padding-top: 48px;

  font-variation-settings:
    "wght" 100,
    "SRFS" 60;
  letter-spacing: 2px;
  font-style: italic;
}

/* In the shade, in the shade */
.shade_2 {
  grid-column: 4/-1;
  grid-row: 24;
  margin: 0;

  font-variation-settings:
    "wght" 100,
    "SRFS" 60;
  letter-spacing: 2px;
  font-style: italic;
}

/* MARK: COUPLET */

/* I 
know 
you, little libertine */
.I {
  grid-column: 4/-1;
  grid-row: 25;
  margin: 0;
  padding-top: 24px;
}

.know {
  grid-column: 4/-1;
  grid-row: 25;
  margin: 0;
  padding-top: 30px;
  padding-left: 10px;
}

.you_Libertine {
  grid-column: 4/-1;
  grid-row: 25;
  margin: 0;
  padding-top: 24px;
  padding-left: 56px;
}

/* I know you're a cannonball */

.I_2 {
  grid-column: 4/-1;
  grid-row: 26;
  margin: 0;
  padding-top: 24px;
}

.know_2 {
  grid-column: 4/-1;
  grid-row: 26;
  margin: 0;
  padding-left: 10px;
  padding-top: 30px;
}

.youre_cannonball {
  grid-column: 4/-1;
  grid-row: 26;
  margin: 0;
  padding-left: 64px;
  padding-top: 24px;
}

.Ill_your {
  grid-column: 4/-1;
  grid-row: 27;
  margin: 0;
  padding-top: 24px;
}

/* I'll be your whatever-you-want */
.whatever {
  grid-column: 4/-1;
  grid-row: 27;
  margin: 0;
  padding-top: 24px;
  padding-left: 240px;
  letter-spacing: 5px;
}

/* The bong in ths raggae song */
.bong {
  grid-column: 4/-1;
  grid-row: 28;
  margin: 0;
  padding-top: 24px;
}

/* MARK: REFREIN */
/* In the shade, in the shade */
.shade_3 {
  grid-column: 4/-1;
  grid-row: 29;
  margin: 0;
  padding-top: 24px;

  font-variation-settings:
    "wght" 100,
    "SRFS" 60;
  letter-spacing: 2px;
  font-style: italic;
}

/* In the shade, in the shade */
.shade_4 {
  grid-column: 4/-1;
  grid-row: 30;
  margin: 0;

  font-variation-settings:
    "wght" 100,
    "SRFS" 60;
  letter-spacing: 2px;
  font-style: italic;
}

/* Want you cuckoo cannonball */
.Wantyou_3 {
  grid-column: 3/-1;
  grid-row: 31;
  margin: 0;
  padding-top: 48px;

  font-weight: bolder;
  font-size: 40px;
}

.cuckoo_3 {
  font-family: "Eskargot";
  grid-column: 3/-1;
  grid-row: 32;
  margin: 0;

  font-weight: bolder;
  font-size: 40px;
}

.cannonball_3 {
  grid-column: 3/-1;
  grid-row: 33;
  margin: 0;

  font-weight: bolder;
  font-size: 40px;
}

/* Want you cuckoo cannonball */
.Wantyou_4 {
  grid-column: 3/-1;
  grid-row: 34;
  margin: 0;
  padding-top: 24px;

  font-weight: bolder;
  font-size: 40px;
}

.cuckoo_4 {
  font-family: "Eskargot";
  grid-column: 3/-1;
  grid-row: 35;
  margin: 0;

  font-weight: bolder;
  font-size: 40px;
}

.cannonball_4 {
  grid-column: 3/-1;
  grid-row: 36;
  margin: 0;

  font-weight: bolder;
  font-size: 40px;
}

/* MARK: COUPLET */
/* Spitting in a wishing well */
.Spitting_well {
  grid-column: 4/-1;
  grid-row: 37;
  margin: 0;
  padding-top: 48px;
}

/* Blown to hell, crash */
.Blown_crash {
  grid-column: 4/-1;
  grid-row: 38;
  margin: 0;
  padding-top: 24px;
}

/* I'm the last splash */
.Im_splash {
  grid-column: 4/-1;
  grid-row: 39;
  margin: 0;
  padding-top: 24px;
}

/* I'll be your whatever-you-want */
.I_want {
  grid-column: 4/-1;
  grid-row: 40;
  margin: 0;
  padding-top: 24px;
}

/* The bong in ths raggae song */
.bong_2 {
  grid-column: 4/-1;
  grid-row: 41;
  margin: 0;
  padding-top: 24px;
}

/* MARK: REFREIN */
/* Want you cuckoo cannonball */
.Wantyou_5 {
  grid-column: 3/-1;
  grid-row: 42;
  margin: 0;
  padding-top: 24px;

  font-weight: bolder;
  font-size: 40px;
}

.cuckoo_5 {
  font-family: "ESkargot";
  grid-column: 3/-1;
  grid-row: 43;
  margin: 0;

  font-weight: bolder;
  font-size: 40px;
}

.cannonball_5 {
  grid-column: 3/-1;
  grid-row: 44;
  margin: 0;

  font-weight: bolder;
  font-size: 40px;
}

/* Want you cuckoo cannonball */
.Wantyou_6 {
  grid-column: 3/-1;
  grid-row: 45;
  margin: 0;
  padding-top: 24px;

  font-weight: bolder;
  font-size: 40px;
}

.cuckoo_6 {
  font-family: "ESkargot";
  grid-column: 3/-1;
  grid-row: 46;
  margin: 0;

  font-weight: bolder;
  font-size: 40px;
}

.cannonball_6 {
  grid-column: 3/-1;
  grid-row: 47;
  margin: 0;

  font-weight: bolder;
  font-size: 40px;
}

.hey_now {
  grid-column: 4/-1;
  grid-row: 45;
  margin: 0;

  /* transform: rotate(40deg); */
  letter-spacing: 2px;
  color: #dfff00;
  font-weight: bolder;
}

.hey_now_2 {
  grid-column: 5;
  grid-row: 50;
  margin: 0;

  color: #dfff00;
  justify-self: end;
  font-weight: bolder;
}

/* In the shade, in the shade */
.shade_5 {
  font-family: "ESkargot";
  grid-column: 4/-1;
  grid-row: 48;
  margin: 0;
  padding-top: 24px;

  font-variation-settings:
    "wght" 100,
    "SRFS" 38;
  letter-spacing: 2px;
  font-style: italic;
}

/* In the shade, in the shade */
.shade_6 {
  grid-column: 4/-1;
  grid-row: 49;
  margin: 0;
  padding-top: 24px;

  font-variation-settings:
    "wght" 100,
    "SRFS" 60;
  letter-spacing: 2px;
  font-style: italic;
}

.shade_7 {
  grid-column: 4/-1;
  grid-row: 50;
  margin: 0;
  padding-top: 24px;
  padding-bottom: 72px;

  font-variation-settings:
    "wght" 100,
    "SRFS" 60;
  letter-spacing: 2px;
  font-style: italic;
}

/* .shade {
  font-weight: 200;
/* } */

h2,
h3,
h4,
h5,
h6,
p {
  /* font-size: 1em; */
  /* font-variation-settings:
    "wght" 142,
    "SRFS" 30; */
  /* margin-bottom: 24px; */
  grid-area: main;
}

h2 {
}

footer {
  grid-column: 1/-1;
  background-color: #0ff6;
}