@font-face {
    font-family: "Scribble";
    src: url(Scribble.ttf);
}
@font-face {
  font-family: "Sans";
  src: url(Qdbettercomicsans-jEEeG.ttf);
}



body {
  margin: 0;
  padding: 0;
  min-height: 100vh
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('Long_10112024154.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: black; /* fallback */
  z-index: -1;
  pointer-events: none; /* allows clicks to pass through */
}


h1 {
  font-family: "Scribble";
  font-weight: 70;
  margin: 50px 0 30px;
  text-align: center;
  font-size: clamp(2rem, 6vw, 7rem);
  font-weight: bold;
  color: aliceblue;
  text-shadow: 2px 2px 4px black;

}

p { 
  max-width: 90%;
  margin: clamp(1rem, 3vh, 2rem) auto;
  text-align: center;
  font-size: clamp(1.2rem, 4vw, 2rem);
  line-height: 1.6;
  color: aliceblue;
  text-shadow: 2px 2px 4px black;
}

.music-icon {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 100px;
  height: 100px;
  background-image: url('Music.gif');
  background-size: cover;
  cursor: pointer;
  z-index: 1000;
  border: none;        /* Remove border */
  background-color: transparent; /* Remove background color */
  padding: 0;          /* Remove padding */
  font-size: 0;        /* Hide any text */
  line-height: 0;      /* Hide any text */
  color: transparent;  /* Hide text color */
}

#youtubeLink {
  position: fixed;
  top: 130px; /* Below the music icon */
  right: 20px;
  width: 100px;
  height: 100px;
  cursor: pointer;
  z-index: 1001;
  display: none; /* Hidden by default */
}
.music-icon:hover {
  transform: scale(1.1);
}


h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
position: relative;
margin-top: 8rem;
margin-left: auto;
font-size: clamp(2rem, 6vh, 4rem);
color: aliceblue;
  text-shadow: 2px 2px 4px black;
}

p { 
    font-family: "Sans";
    font-size: clamp(2rem, 5vw,);
}
.spiff {
    position: fixed;
    top: 10px;
    width:100%;
    color: rgb(255, 253, 253);
  

}
.gif {
  position: absolute;
  top: 10vh;
  left: 8vw;
  width: clamp(30px, 10vw, 150px);
}

.about {
  position: absolute;
  top: 10vh;
  left: 55vw;
  width: clamp(40px, 15vw, 200px);
}

.phone {
  position: absolute;
  top: 10vh;
  left: 30vw;
  width: clamp(25px, 8vw, 90px);
}

.CD {
  position: absolute;
  top: 10vh;
  left: 75vw;
  width: clamp(30px, 12vw, 160px);
}
h2{
  font-family: "Sans";
  font-size: clamp(2rem, 6vw, 5rem);
  font-weight: bold;
  color: blanchedalmond;
  text-shadow: 1px 1px 2px black;
}

.Under {
  max-width: 10vw;
  position: absolute; 
  left: 90vw; 
  top: -20vh;  
  margin: 0; 
}

.Rage{
  max-width: 10vw;
  position: absolute;
  left: 20vw;
  top: -20vh;
  margin: 0;
}

.Finn{
  max-width: 20vw;
  position: absolute;
  left: 70vw;
  top: -20vh;
  margin: 0;
}

.Header{
  max-width: 20vw;
  position: absolute;
  left: 5vw;
  top: -10vh;
  margin: 0;
}

.Destijl{
  width: 800px;

}

* {
  box-sizing: border-box;
}

.Destijl, .Under, .Working, pre {
  width: 52.5vw;     /* 80% of viewport width */
  height: auto;
}

/* keeps them all on the same horizontal line, 20 vh from the top */
.gif   { position:absolute; top:25vh; left:10vw;  width:15vw; max-width:200px; }
.phone { position:absolute; top:25vh; left:31vw;  width: 8vw; max-width:100px; }
.about { position:absolute; top:25vh; left:62vw;  width:18vw; max-width:250px; }
.CD    { position:absolute; top:25vh; left:79vw;  width:15vw; max-width:200px; }


.container {
  position: relative;
  height: 13vh;
}

.Working {
  position: absolute;
  margin: auto;
  width: 25%;
  top: 500%;
  left: 2.5%;
}
.Working2 {
  position: absolute;
  margin: auto;
  width: 25%;
  top: 190%;
  left: 2.5%;
}
.pre2{
  font-family:'Times New Roman';
  position: absolute; 
  top: 193%; 
  left: 8.5%;
  color: aliceblue;
  margin: auto;
  font-weight: 50;
  font-size: clamp(1rem, 2vw, 2rem);
  text-shadow: 1px 1px 2px black;
      font-style: italic;
}

pre{
    font-family:'Times New Roman';
    position: absolute; 
    top: 503%; 
    left: 8.5%;
    color: aliceblue;
    margin: auto;
    font-weight: 50;
    font-size: clamp(1rem, 2vw, 2rem);
    text-shadow: 1px 1px 2px black;
        font-style: italic;
}

@media screen and (max-width: 600px) {

  body {
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Fix background */
    background-position: center center;               /* Still fills the screen */
  }

  .Working{
    position: relative;
  margin: 2rem auto;
  margin-left: -14.5rem;
  margin-top: -20rem;

    }

    pre{
      position: relative;
      margin-left: -6rem;
      margin-top: -20rem;
    white-space: pre-wrap;
    word-break: break-word;
      font-size: clamp(.4rem, 3vw, 1rem);
    }

    .Working2{position: relative;
      margin: 2rem auto;
      margin-left: auto;
      margin-top: -10rem;

    }

    .pre2{
      position: relative;
      margin-left: -6rem;
      margin-top: -10rem;
    white-space: pre-wrap;
    word-break: break-word;
      font-size: clamp(.4rem, 3vw, 1rem);
    }


    .Working, pre, .Working2, .pre2 {
      display: inline-block;
      vertical-align: top;
    }

    .spiff{
      position: fixed;
      width: 200%;

    }

    h3{
      font-size: clamp(1rem, 2.5vh, 3rem);
      margin-top: 5rem;
    }

    h2{
      font-size: clamp(1.5rem, 3vw, 2rem);
    }
    .Rage{
      max-width: 10vh;
      left: 10vw;
    }
    .Finn{
      max-width: 10vh;
      left: 70vw;
    }

    .gif   { position:absolute; top:12vh; left:10vw;  width:15vw; max-width:200px; }
.phone { position:absolute; top:12vh; left:31vw;  width: 8vw; max-width:100px; }
.about { position:absolute; top:12vh; left:62vw;  width:18vw; max-width:250px; }
.CD    { position:absolute; top:12vh; left:79vw;  width:15vw; max-width:200px; }

  }

  .Under{
    max-width: 20rem;
    left: 60vw;
  }


  .spacer {
    height: 20000px;
  }