@font-face {
  font-family: 'Rhizom4VF';
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 0% 100%;
  src: url("/Rhizom4VF.woff") format('woff');
  src: url('/Rhizom4VF.woff2') format('woff2');
}

@font-face {
  font-family: 'HelveticaMonospaced1.ttf';
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 0% 100%;
  src: url("/HelveticaMonospaced1.ttf") format('truetype');
}
a{
  font-family: "HelveticaMonospaced1.ttf";
  font-size: 15px;
  color: #A59958;
  text-decoration: none;
  z-index: 2;
}

a:hover {
  color: #AA90E3;
}

body, html {
  font-family: "HelveticaMonospaced1.ttf", Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #322328; /* Initial background color */
  transition: background-color 1s; /* Smooth transition for background color */
  overflow: hidden; /* Prevent scrolling */
}

header nav.left {
  position: absolute;
  left: 10px;
}

header nav.right {
  position: absolute;
  right: 10px;
}

header {
  display: flex;
  /* justify-content: space-between; */
  padding: 10px;
}

main {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

p.random {
  position: absolute;
  font-size: 25px;
  z-index: 1;
  color: #AA90E3;
}


#text {
  display: none;
}

textarea {
  text-align: center;
  width: 100%;
  /* padding: 10px; */
  font-family: 'Rhizom4VF';
  font-size: 300px; /* Responsive font size based on viewport width */
  font-weight: 100;
  font-variation-settings: "wdth" 100;
  border: none;
  outline: none;
  box-sizing: border-box;
  resize: none;
  overflow: hidden;
  text-transform: uppercase;
  background: transparent;
  /* color: #3D000F; */
  color: #A59958;
  transition: background-color 1s, color 1s; /* Smooth transition for background and text color */
}

::placeholder {
  color: #A59958;
  opacity: 1; /* Firefox */
}


.controls-overlay {
  position: fixed;
  bottom: 0;
  left: 400px;
  right: 400px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  z-index: 1;
  padding: 10px;
  
}

span {
font-size: 1px;
color:#E5F2C9;
 opacity: 100%;
 z-index: 1;
}


 .slider-label {
  color: #AA90E3; /* Change this color to whatever you want */
  font-size: 18px; /* Adjust the font size if needed */
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: #AA90E3;
  cursor: pointer;
  margin: 0 10px;
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  background: #AA90E3;
}

/* Kreise */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background:#AA90E3;
  cursor: pointer;
  margin-top: -7px;
}

input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #E5F2C9;
  cursor: pointer;
}

input[type="range"]#font-size-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  background: #AA90E3;
  cursor: pointer;
  margin: 0 10px;
}

input[type="range"]#font-size-slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  background: #AA90E3;
}

/* Kreis */
input[type="range"]#font-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #AA90E3;
  cursor: pointer;
  margin-top: -7px;
}
/* Regler */
input[type="range"]#font-size-slider::-moz-range-track {
  width: 100%;
  height: 2px;
  background:#AA90E3;
}

input[type="range"]#font-size-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #AA90E3;
  cursor: pointer;
}

.controls > div {
  margin: 10px 0;
}


#background-circles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

/* LESEN */
.kreisi {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 3px;
  background: #AA90E3;
  border-radius: 50%;
}

#kreisi2 {

  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 3px;
  background: #A59958;
  border-radius: 50%;
}
.kreisifarbe {
  position: absolute;
  width: 15px;
  height: 15px;
  background: #f5b0c1;
  border-radius: 50%;
}

.kreisifarbe1 {
  position: absolute;
  width: 15px;
  height: 15px;
  background: #ff8a8a;
  border-radius: 50%;
}

.kreisifarbe2 {
  position: absolute;
  width: 15px;
  height: 15px;
  background: #c7bb0f;
  border-radius: 50%;
}

.kreisifarbe3 {
  position: absolute;
  width: 15px;
  height: 15px;
  background: #92ffcc;
  border-radius: 50%;
}

.kreisifarbe4 {
  position: absolute;
  width: 15px;
  height: 15px;
  background: #00afaf;
  border-radius: 50%;
}

.kreisifarbe5 {
  position: absolute;
  width: 15px;
  height: 15px;
  background: #a9ff93;
  border-radius: 50%;
}

.mobil{

display: none;
}
.circle {
  position: absolute;
  width: 15px;
  height:15px;
  background: #AA90E3;
  border-radius: 50%;
  transition: top 2s, left 2s;
}

@media (max-width: 768px) {

  .farbe {
    display: none;
  }
 
  a {
    font-size: 15px;
  }
  #text {
  display: block; /* Auf Mobilgeräten anzeigen */
  position: absolute;
  top: 50px;
  left: 50%;
  font-size: 19px;
  color: #AA90E3;
  transform: translateX(-50%);
  text-align: center;
}
  /* #text {
    position: absolute;
    top: 50px; Abstand vom oberen Rand 
    left: 50%;
    transform: translateX(-50%);
    font-size: 19px; oder eine andere gewünschte Schriftgröße 
    text-align: center;
    z-index: 1; Damit der Text über der Textarea bleibt
    color: #3D000F;
  } */

  p.random {
    display: none;
  }

  textarea {
    font-size: 150px; /* Adjusted font size for smaller screens */
    padding-bottom: 50px;

  }

  .controls-overlay {
    left: 10px;
    right: 10px;
  }
}