@font-face {
    font-family: "digital"; 
    src:
      url("fonts/DS-DIGII.TTF")
  }

  @font-face {
    font-family: "LTperfume"; 
    src:
      url("fonts/LTPerfume.ttf")
  }

  @font-face {
    font-family: "SourceSerifLight"; 
    src:
      url("fonts/SourceSerif4-Light.ttf")
  }
  @font-face {
    font-family: "Louise"; 
    src:
      url("fonts/Louise-Regular.otf")
  }
  @font-face {
    font-family: "SourceSerifLightItalic"; 
    src:
      url("./fonts/SourceSerif4-LightItalic.ttf")
  }

  @font-face {
    font-family: "SourceSerifMediumItalic"; 
    src:
      url("./fonts/SourceSerif4-MediumItalic.ttf")
  }

  @font-face {
    font-family: "SourceSerifRegularItalic";
    src:
      url("./fonts/SourceSerif4-Italic.ttf")
  }

  @font-face {
    font-family: "SpaceGroteskLight";
    src:
      url("./fonts/SpaceGrotesk-Light.ttf")
  }

  @font-face {
    font-family: "SpaceGroteskBold";
    src:
      url("./fonts/SpaceGrotesk-Bold.ttf")
  }

  @font-face {
    font-family: "SpaceGroteskSemiBold";
    src:
      url("./fonts/SpaceGrotesk-SemiBold.ttf")
  }

  @font-face {
    font-family: "SpaceGroteskRegular";
    src:
      url("./fonts/SpaceGrotesk-Regular.ttf")
  }

  @font-face {
    font-family: "SpaceGroteskMedium";
    src:
      url("./fonts/SpaceGrotesk-Medium.ttf")
  }

  * {
    box-sizing: border-box;
  }  

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
padding: 0;
/* background-color: #fffef4; */
background-color: rgb(250, 250, 248);
}

main {
  position: absolute;
  inset: 0;
}

.word {
    font-size: 30px;
    opacity: 1;
    transition: opacity 10s;
    width: fit-content;
      position: absolute;
      will-change: transform;
      font-family: "SpaceGroteskLight";
      font-size: 16pt;
      color: rgb(177, 72, 111);
      z-index: 10;
    }


.title {
  fill: none;
  stroke: rgb(42, 43, 42);
  stroke-width: 0.5;
  z-index: 1;
  width: 80%;
  position: fixed;
  right: 5%;
  bottom: 1%;
}

#container {
  width: 100%;
  height: 100%;
  position: absolute;
}

.stars {
  font-family: "SourceSerifLight";
  font-size: 16pt;
  transition: opacity 10s;
  color: rgb(177, 72, 111);
  z-index: 10;
}




.intro {
  margin-bottom: 4rem;
  font-size: 20pt;
}

.question {
  margin-top: 5rem;
  font-size: 18pt;
}

.bold {
  font-family: "SpaceGroteskSemiBold"
}

.zeit-vergessen {
  font-family: LTperfume;
  font-size: 18pt;
}

.prompt {
  font-family: "SpaceGroteskLight";
  font-size: 12pt;
  color: rgba(42, 43, 42, 0.7);
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 400;
}





.circle {
  font-size: 50px;
  position: fixed;
  z-index: 300;
  top: 20px;
  right: 20px;
  transition: transform 0.4s ease, color 0.4s ease;;
  cursor: pointer;
  color: rgb(199, 138, 158);
}

.visible .circle, .hover-visible .circle {
transform: scale(2);
}


#hoverCredits {
  position: fixed;
  right: 30px;
  bottom: 30px;
  top: auto;
  transform: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  font-family: "SpaceGroteskLight";
  color: rgb(199, 138, 158);
  text-align: right;
  z-index: 200;
  /* transition: all 100ms;
  isolation: isolate; */
  /* padding: 5%;
  overflow: auto; */
  font-size: 9pt;
  display: block;
  line-height: 1.45;
}

.hover-visible #hoverCredits,
.visible #hoverCredits {
  opacity: 1;
}
 
#hoverText {
  position: fixed;
  left: 50%;
  top: 0%;      
  transform: translate(-50%, 0%);
  opacity: 0;
  transition: opacity 0.6s ease;
  font-family: "SpaceGroteskLight";
  font-size: 16pt;
  color: rgb(199, 138, 158);
  line-height: 1.45;
  text-align: left;
  z-index: 200;
  width: fit-content;
  height: 100%;
  padding: 4.5%;
  box-sizing: border-box;
  overflow: auto;
  isolation: isolate;
}


.hover-visible #hoverText,
.hover-visible #hoverTextTransition,
.visible #hoverText,
.visible #hoverTextTransition {
  opacity: 1;
}



/* .visible .blur-background,
.hover-visible .blur-background {
  backdrop-filter: blur(5px);
} */

/* .blur-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(0);
  transition: all 2s linear;  
  background: rgba(0, 0, 0, 0.01);
  border-radius: 24px;
  mask-image:
    linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 1) 95%, rgba(0, 0, 0, 0) 100%);
  mask-composite: intersect;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  pointer-events: none;
  z-index: -1;
} */

.text-container {
  position: relative;
}

.blur-background {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 140%;
  height: 140%;

  transform: translate(-50%, -50%);

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

  opacity: 0;
  transition: opacity .6s ease;

  background: radial-gradient(
    ellipse at center,
    rgba(250,250,248,.75) 0%,
    rgba(250,250,248,.75) 35%,
    rgba(250,250,248,.65) 55%,
    rgba(250,250,248,0) 60%,
    rgba(250,250,248,0) 100%
  );
}

.visible .blur-background,
.hover-visible .blur-background {
  opacity: 1;
}



.text-container {
  position: relative;
  overflow: visible;
}

/* .opacity {
  opacity: 0;
} */

/* #hoverTextTransition {
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
  opacity: 0;
         transition: opacity 0.6s ease;
  font-family: "SpaceGroteskLight";
  font-size: 16pt;
  color: rgb(199, 138, 158);
  line-height: 1.45;
  text-align: left;
  top: 0;
  z-index: 200;
  width: fit-content;
  height: 100%;
  isolation: isolate;
  padding: 5%;
  overflow: auto;
} */