html {
  margin: 0;
  padding: 0;
}
body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
}

.p {
  z-index: 1; /* Zorg ervoor dat de tooltip bovenop andere elementen wordt weergegeven */
}

#tekst {
  margin-left: 5%;
  margin-right: 5%;
  color: rgb(0, 0, 0); /* Tekstkleur wit maken */
  font-family: "CustomFont2";
}

#square1 {
  cursor: pointer;

  position: absolute;
  width: 100px;
  height: 100px;
  background-color: var(--custom-color);
  top: 270px;
  left: 70px;
  display: flex;
  color: white; /* Tekstkleur wit maken */
  justify-content: center; /* Horizontaal centreren */
  align-items: center; /* Verticaal centreren */
  font-family: "CustomFont2";
  font-size: 30px;
}

#square2 {
  cursor: pointer;

  position: absolute;
  width: 100px;
  height: 100px;
  background-color: var(--custom-color);
  top: 50px;
  left: 665px;
  display: flex;
  color: white; /* Tekstkleur wit maken */
  justify-content: center; /* Horizontaal centreren */
  align-items: center; /* Verticaal centreren */
  font-family: "CustomFont2";
  font-size: 30px;
}

#square3 {
  cursor: pointer;

  position: absolute;
  width: 100px;
  height: 100px;
  background-color: var(--custom-color);
  bottom: 80px;
  right: 200px;
  display: flex;
  color: white; /* Tekstkleur wit maken */
  justify-content: center; /* Horizontaal centreren */
  align-items: center; /* Verticaal centreren */
  font-family: "CustomFont2";
  font-size: 25px;
}

#square4 {
  cursor: pointer;

  position: absolute;
  width: 100px;
  height: 100px;
  background-color: var(--custom-color);
  top: 370px;
  right: 70px;
  display: flex;
  color: white; /* Tekstkleur wit maken */
  justify-content: center; /* Horizontaal centreren */
  align-items: center; /* Verticaal centreren */
  font-family: "CustomFont2";
  font-size: 18px;
}

/* Tooltip stijl */
.square::before {
  content: attr(data-tooltip); /* De tekst die wordt weergegeven */
  position: absolute;
  background-color: #fff;
  color: rgb(0, 0, 0); /* Tekstkleur wit maken */
  padding: 10px;
  pointer-events: none; /* Zorgt ervoor dat het element geen invloed heeft op muisgebeurtenissen */
  display: none;
  font-family: "CustomFont";
  font-size: 16px;
  width: 400px;
}

#square1:hover::before {
  display: block; /* Toon de tooltip bij mouseover */
  z-index: 1; /* Zorg ervoor dat de tooltip bovenop andere elementen wordt weergegeven */
  left: calc(100% + 5px); /* Positie rechts*/
  top: 50%; /* Verticaal centreren ten opzichte van het element */
  transform: translateY(-50%);
}

#square2:hover::before {
  display: block; /* Toon de tooltip bij mouseover */
  z-index: 1; /* Zorg ervoor dat de tooltip bovenop andere elementen wordt weergegeven */
  top: calc(
    100% + 5px
  ); /* Plaats de tooltip direct onder het element, 5px afstand */
  left: 50%; /* Horizontaal centreren ten opzichte van het element */
  transform: translateX(-50%); /* Verticaal gecentreerd */
}

#square3:hover::before {
  display: block; /* Toon de tooltip bij mouseover */
  z-index: 1; /* Zorg ervoor dat de tooltip bovenop andere elementen wordt weergegeven */
  bottom: calc(100% + 5px); /* Positie boven*/
  left: 100%; /* Gecentreerd op het element */
  transform: translateX(-50%);
}

#square4:hover::before {
  display: block; /* Toon de tooltip bij mouseover */
  z-index: 1; /* Zorg ervoor dat de tooltip bovenop andere elementen wordt weergegeven */
  right: calc(
    100% + 5px
  ); /* Plaats de tooltip links van het element, 5px afstand */
  top: 50%; /* Verticaal centreren ten opzichte van het element */
  transform: translateY(-50%); /* Verticaal gecentreerd */
}

@font-face {
  font-family: "CustomFont";
  src: url("fonts/Sligoil-Micro.otf") format("opentype"); /* Pas het pad en het bestandsformaat aan zoals nodig */
}

@font-face {
  font-family: "CustomFont2";
  src: url("fonts/FT88-Regular.otf") format("opentype"); /* Pas het pad en het bestandsformaat aan zoals nodig */
}

:root {
  --custom-color: rgb(0, 0, 0); /* Standaard RGB-kleur */
}