/* ========================= */
/* GASP! You're checking out my code? :O Well alright, feel free to copy and paste but be warned! It is a big mess down here*/
/* ========================= */

@font-face {
  font-family: "report";
  src: url("report.ttf") format("truetype");
  
}

@font-face{
  font-family: "XTypewriter-Regular";
  src: url("XTypewriter-Regular.ttf") format("truetype");
  
}

html {
  margin: 0;
  min-height: 100%;
  overscroll-behavior-y: none;
}

body.home {
  margin: 0;

  background-image: url("Background.jpg");

  color: #282A36;
  font-family: "XTypewriter-Regular", monospace;
  -webkit-font-smoothing: none;

  cursor: url("cursor.png") 12 12, auto;

  overflow-x: hidden;
  overflow-y: auto;
}


/* ========================= */
/* GROTE SCENE               */
/* ========================= */

.site-scene {
  position: relative;

  width: 100vw;

  overflow: visible;
  transform: none;
}
/* ========================= */
/* ACHTERGROND-LAGEN         */
/* ========================= */

#leaves-bottom {
  position: absolute;

  width: 40vw;
  left: 50vw;
  top: 0vw;

  transform: translateX(-50%);

  z-index: 10;
  pointer-events: none;
}


/* ========================= */
/* SNAIL                     */
/* ========================= */

.frame {
  position: absolute;
  overflow: hidden;

  width: 3.5vw;
  height: 47vw;

  left: 66.1vw;
  top: 10vw;

  transform: translateX(-50%);

  z-index: 15;
}

#snail {
  position: absolute;
  left: 0;

  animation-name: walksnail;
  animation-duration: 150s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;

  z-index: 15;
}

#snail img {
  width: 3.5vw;

  animation-name: flipsnail;
  animation-duration: 300s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(1, end);

  z-index: 15;
}

@keyframes walksnail {
  from {
    top: 0;
  }

  to {
    top: calc(100% - 5vw);
  }
}

@keyframes flipsnail {
  0%,
  49.999% {
    transform: scaleY(1);
  }

  50%,
  100% {
    transform: scaleY(-1);
  }
}


/* ========================= */
/* LABELS                    */
/* ========================= */

.label a {
  position: absolute;

  transition: transform 0.5s;

  z-index: 20;

  display: inline-block;
}

.label a:hover {
  transform: translateX(-15px);
}

.label a img {
  width: 12vw;
}

.label a span {
  position: absolute;

  color: #f8eadc;
  z-index: 5;
  font-weight: normal;


  transform: translate(-50%, -50%);
  padding: 1.5rem;
  width: 100%;
}

.label-garden {
  top: 20vw;
  left: 29vw;
}

.label-garden span {
  top: 50%;
  left: 74%;
  font-size: 1.2rem;
  font-size: clamp(14px, 1.1vw, 22px);

}

.label-books {
  top: 25vw;
  left: 28.5vw;

}

.label-books span {
  top: 42%;
  left: 73%;
  font-size: clamp(14px, 1.1vw, 22px);

}

.label-picnic {
  top: 30vw;
  left: 28.6vw;
}

.label-picnic span {
  top: 48%;
  left: 70%;
  font-size: clamp(14px, 1.1vw, 22px);
}

.label-guestbook {
  top: 35vw;
  left: 28vw;
}

.label-guestbook span {
  top: 42%;
  left: 67%;

  font-size: clamp(14px, 0.9vw, 18px);
}


/* ========================= */
/* LANG PAPIER               */
/* ========================= */

.paper-area {
  position: relative;

  width: 100vw;
  left: 0;
  top: 0;

  padding-top: 10.2vw;

  z-index: 30;
  pointer-events: none;

}

.paperwrapper {
  position: relative;

  width: 30vw;

  left: 50vw;
  top: 0;

  transform: translateX(-50%);

  z-index: 30;
  pointer-events: auto;

}

/* De losse Paper.png afbeeldingen onder elkaar */
.paper-stack {
  position: relative;

  width: 100%;

  line-height: 0;

  z-index: 0;
  pointer-events: none;
}

.paper-stack img {
  display: block;

  width: 100%;
  height: auto;
  align-content: center;

  margin: 0;
  padding: 0;

  pointer-events: none;
}

/* Stamp.png */
.paper-stamp {
  position: absolute;

  width: 6vw;
  top: 2vw;
  left: 83%;

  transform: translateX(-50%);

  z-index: 10;
  pointer-events: none;
}

/* Text on paper */
.onthepaper {
  position: absolute;

  width: 24vw;
  font-size: 0.9vw;
  line-height: 2.9vh;

  left: 16vw;
  top: 0;

  transform: translateX(-50%);

  padding-top: 7vh;
  padding-left: 2vw;
  padding-right: 2vw;
  padding-bottom: 18vw;

  z-index: 10;
}

.onthepaper h2,
.onthepaper h3 {
  margin-top: 0;
}

/* flower-corner.png blijft onderin het lange papier */
.paper-flower-corner {
  position: absolute;

  width: 70%;
  left: 35%;
  bottom: 0;

  transform: translateX(-50%);

  z-index: 10;
  pointer-events: none;
}


/* ========================= */
/* VOORGROND-LAGEN           */
/* ========================= */

#leaves-top {
  position: absolute;

  width: 40vw;
  left: 50vw;
  top: 0vw;

  transform: translateX(-50%);

  z-index: 60;
  pointer-events: none;
}

#tape-corner {
  position: absolute;

  width: 7vw;
  left: 37vw;
  top: 9vw;

  transform: translateX(-50%);

  z-index: 70;
  pointer-events: none;
}

.layerflower-wrap {
  position: relative;

  width: 100vw;
  height: 20vw;

  margin-top: -16vw;

  z-index: 75;
  pointer-events: none;
  line-height: 0;
}

#layerflower {
  position: absolute;
  display: block;

  width: 40vw;
  left: 50%;
  bottom: -10vh;

  transform: translateX(-50%);

  pointer-events: none;
}

#Dontlick{
  left: 20vw;
  width: 10vw;
  top: 140vh;
  transform: translate(0%, 0%) rotate(-10deg);
}


/* ========================= */
/* TO DO BLOCK               */
/* ========================= */

.Todoblock {
  position: absolute;
  z-index: 90;
  width: 40vw;
  left: 4vw;
  top: 15vh;
}

.todo-paper {
  position: absolute;

  width: 18vw;
  left: 2vw;
  top: 12vh;

  transform: translate(0, 0) rotate(6deg);
}

.todo-title {
  position: absolute;

  top: 19.8vh;
  left: 8.5vw;

  transform: translate(0, 0) rotate(6deg);
}

.todo-text {
  position: absolute;

  top: 22vh;
  left: 4vw;
  line-height: 2.3vh;

  transform: translate(0, 0) rotate(6deg);
}

.todo-text h4 {
  font-size: 15px;
}


/* ========================= */
/* BUTTONS + ARROW           */
/* ========================= */

.button img,
.text h2,
.arrow img {
  position: absolute;

  z-index: 90;
}

#button-one {
  top: 90vh;
  left: 28vw;
}

#button-two {
  top: 95vh;
  left: 28vw;
}

#my-buttons-text {
  top: 97.5vh;
  left: 12vw;
}

#arrow-img {
  width: 12vw;

  top: 100vh;
  left: 17.1vw;

  transform: translate(0, 0) rotate(-12deg);
}


/* ========================= */
/* RADIO PLAYER              */
/* ========================= */

.radio-player {
  position: absolute;

  width: 33vw;
  max-width: 92vw;
  margin: 0 auto;

  transform: translate(-50%, -50%) rotate(-8deg);

  z-index: 90;
}

/* Geen background-image hier.
   Je JS zet zelf de radio-afbeelding op #radioUI. */
.radio-ui {
  position: relative;

  width: 100%;
  aspect-ratio: 520 / 320;

  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  user-select: none;
}

.radio-hotspot {
  position: absolute;

  border: 0;
  padding: 0;
  background: transparent;

  cursor: pointer;
}

.hs-back {
  left: 44%;
  top: 71%;
  width: 1vw;
  height: 3vh;
}

.hs-play {
  left: 47%;
  top: 71%;
  width: 1vw;
  height: 3vh;
}

.hs-pause {
  left: 50%;
  top: 71%;
  width: 1vw;
  height: 3vh;
}

.hs-next {
  left: 53%;
  top: 71%;
  width: 1vw;
  height: 3vh;
}

.radio-display {
  position: absolute;

  width: 33vw;
  height: 33vh;

  display: flex;
  align-items: center;
  justify-content: center;

  pointer-events: none;
}

.radio-title {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0.4px;

  padding: 6px 10px;

  color: #b0ae9d;
  text-align: center;

  max-width: 40%;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* YouTube player volledig onzichtbaar */
#ytPlayer,
#yt-player,
#ytPlayer iframe,
#yt-player iframe,
.radio-player iframe {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  left: -9999px !important;
  top: -9999px !important;

  opacity: 0 !important;
  pointer-events: none !important;

  border: 0 !important;
}


/* ========================= */
/* ANTS                      */
/* ========================= */

#antLayer {
  position: fixed;
  top: 0;
  left: 0;

  width: 100vw;
  height: 100vh;

  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.ant {
  width: 23px;
  height: 23px;

  position: fixed;
  left: 0;
  top: 0;

  margin: -12.5px 0 0 -12.5px;

  pointer-events: none;
  transform-origin: center center;
  z-index: 9999;

  background: transparent;
  border-radius: 0;
}

.ant img {
  width: 100%;
  height: 100%;

  display: block;
  user-select: none;
  -webkit-user-drag: none;
}


/* ========================= */
/* CURSORS                   */
/* ========================= */

a,
button,
label,
summary,
input[type="radio"],
input[type="checkbox"],
input[type="button"],
input[type="submit"],
input[type="reset"],
select,
option,
[role="button"],
[onclick] {
  cursor: url("/cursor-click.png") 12 12, pointer !important;
}