@font-face {
  font-family: Satoshi;
  src: url(./fonts/Satoshi-Bold\ kopie.ttf);
}

@font-face {
  font-family: Satoshi med;
  src: url(./fonts/Satoshi-Medium\ kopie.ttf);
}

body,
html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
  background-color: gainsboro;
  font-family: "Satoshi", sans-serif;
  cursor: none;
}

.cursor-dot {
  position: fixed;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: rgb(138, 19, 31);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: all 0.05s ease;
  z-index: 9999;
}

.intro {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.achtergrond span {
  position: absolute;
  color: rgb(138, 19, 31);
  font-weight: bold;
  font-family: "Satoshi";
  pointer-events: none;
  text-align: left;
}

.groot {
  font-size: clamp(4rem, 8vw, 8rem);
}

.klein {
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-family: "Satoshi med";
}

.voorgrond a {
  position: absolute;
  color: rgb(138, 19, 31);
  background-color: white;
  border-radius: 40px;
  font-size: clamp(1.2rem, 2vw, 2.2rem);
  text-decoration: none;
  padding: 0em 2em;
  white-space: nowrap;
  font-family: "Satoshi med";
  transition: all 0.3s ease;
  cursor: none;
}

.voorgrond a:hover {
  background-color: rgb(138, 19, 31);
  color: white;
}

.voorgrond a:hover {
  color: gainsboro;
}

.hover-image {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9998;
  display: none;
}

.hover-image img {
  width: 150px;
  height: auto;
}

.voorgrond a.theyear1988 {
  padding: 0em 4em 0em 2.5em;
}

.voorgrond a.teamplayer {
  padding: 0em 5em 0em 2em;
}

.voorgrond a.tornadofont {
  padding: 0em 4em 0em 2em;
}

.voorgrond a.thecrystalcave {
  padding: 0em 4.5em 0em 4em;
}

.voorgrond a.tshirt {
  padding: 0em 5em 0em 4em;
}

.voorgrond a.silverratio {
  padding: 0em 5em 0em 1.5em;
}

.pos1 {
  top: 5%;
  left: 5%;
}
.pos2 {
  top: 6%;
  left: 5%;
}
.pos3 {
  top: 28%;
  left: 5%;
}
.pos4 {
  top: 36%;
  left: 32%;
}
.pos5 {
  top: 49.5%;
  left: 5%;
}
.pos6 {
  top: 51%;
  left: 5%;
}
.pos7 {
  top: 74%;
  left: 39%;
}
.pos8 {
  top: 75%;
  left: 5%;
}

.pos9 {
  top: 20%;
  left: 40%;
}
.pos10 {
  top: 41%;
  left: 27%;
}
.pos11 {
  top: 51%;
  left: 45%;
}
.pos12 {
  top: 68%;
  left: 23%;
}
.pos13 {
  top: 79%;
  left: 38%;
}
.pos14 {
  top: 92%;
  left: 30%;
}

@media screen and (max-width: 768px) {
  .pos4 {
    top: 36%;
  }

  .pos11 {
    top: 47%;
    left: 45%;
  }
  .pos12 {
    top: 63%;
    left: 23%;
  }
  .pos13 {
    top: 84%;
    left: 38%;
  }
}

@media screen and (max-width: 1700px) {
  .pos4 {
    left: 34%;
  }
}