@font-face {
  font-family: "Euclid_Regular";
  src: url("sourceFolder/fonts/EuclidTriangle_Regular.ttf") format("ttf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Euclid_SemiBold";
  src: url("sourceFolder/fonts/EuclidFlex-SemiBold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

html,
body {
  margin: 0;
  padding: 0;
  color: white;
  font-family: "Euclid_Regular", monospace;
  background-color: hwb(196 0% 94%);
}
canvas {
  display: block;
}

.containerR {
  position: fixed; /* Positioniert den Container relativ zum Viewport */
  right: 5px; /* Abstand zur rechten Kante des Viewports */
  bottom: 5px; /* Abstand zur unteren Kante des Viewports */
  background-color: rgba(158, 158, 158, 0);
  padding: 20px;
}

.containerL {
  position: fixed; /* Positioniert den Container relativ zum Viewport */
  left: 5px; /* Abstand zur rechten Kante des Viewports */
  bottom: 5px; /* Abstand zur unteren Kante des Viewports */
  background-color: rgba(158, 158, 158, 0);
  padding: 20px;
}

.textOverlay {
  background-color: #000000bd;
  color: white;
  padding: 2px;
  font-size: small;
  text-align: right;
  margin: 2px; /* Abstand zwischen den Paragrafen */
}

#loading-message {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: #fff;
  padding: 2px 2px;
  border-radius: 0px;
  z-index: 1000;
  font-family: "Euclid_Regular", sans-serif;
  text-align: center;
}

#strudel {
  position: fixed;
  top: 15%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  color: #fff;
  padding: 2px 2px;
  border-radius: 0px;
  z-index: 1000;
  font-family: "Euclid_SemiBold", sans-serif;
  text-align: center;
}

#sketch-container {
  display: none;
}

#website-link,
#instagram-link {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  color: white;
  font-family: "Euclid_Regular", sans-serif;
}

#website-link {
  bottom: 15%; /* Positioniere den ersten Link im unteren Drittel */
}

#instagram-link {
  bottom: 10%; /* Positioniere den Instagram-Link etwas höher */
}

a {
  color: white;
  text-decoration: none;
}

a:hover {
  color: #dcad65; /* Farbe des Links */
}