@font-face {
  font-family: Treinhardt;
  src: url(./fonts/Theinhardt\ Pan\ Regular\ kopie.otf);
}

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

body {
  background-color: black;
  color: white;
  font-family: "Treinhardt";
   overflow-x: hidden;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.intro {
  margin: 3rem;
  margin-bottom: 10rem;
  position: relative; /* Zorg ervoor dat de z-index werkt */
  z-index: 3;
}

h1 {
  font-size: 70pt;
}

.fancyh1 {
  font-family: "Carattere";
  font-size: 80pt;
}

.fancyp {
  font-family: "Carattere";
  font-size: 22pt;
}

.fancyp3 {
  font-family: "Carattere";
  font-size: 20pt;
  letter-spacing: 2px;
}

.fancyp2 {
  font-family: "Carattere";
  font-size: 40pt;
}

.fancyp4 {
  font-family: "Carattere";
  font-size: 52pt;
}

.fancya {
  font-family: "Carattere";
  font-size: 40pt;
}

.fancya2 {
  font-family: "Carattere";
  font-size: 40pt;
  letter-spacing: 4px;
}

h2 {
  font-size: 20pt;
  margin-left: 1rem;
}
img {
  width: 100%;
}

.crystal1 {
  position: relative;
  top: 300;
  left: 10rem;
  width: 70%;
  height: 50%;
  object-fit: cover;
  filter: opacity(100%);
  overflow: hidden;
}

path {
  fill: transparent;
}

.Geode {
  position: absolute;
  top: 54.5rem;
  left: 8.5rem;
  width: 100%;
  height: 100%;
  rotate: 75deg;
  z-index: -1;
  opacity: 1;
}
.Geode svg {
  width: 100%;
  height: 100%;
}
.Geode text {
  fill: #ffffff;
  font-size: 44pt;
}
p {
  font-size: 18pt;
}
.Painrelief {
  position: absolute;
  top: 33.7rem;
  left: 60rem;
  opacity: 1;
  width: 100%;
  height: 100%;
  rotate: -7deg;
  z-index: -1;
}
.Desicionmaking {
  position: absolute;
  top: 10rem;
  left: 2.8rem;
  opacity: 1;
  width: 100%;
  height: 100%;
  rotate: 266deg;
  z-index: -1;
}
.Desicionmaking svg {
  width: 100%;
  height: 100%;
}
.Desicionmaking text {
  fill: #ffffff;
  font-size: 33pt;
}

.crystal2 {
  width: 60%;
  margin-left: calc(100% - 40%);
  overflow: hidden;
}

.Deeppeace {
  position: absolute;
  top: 67.5rem;
  left: 96rem;
  opacity: 1;
  width: 100%;
  height: 100%;
  rotate: -35deg;
}
.Agate {
  position: absolute;
  opacity: 1;
  top: 73rem;
  left: 48rem;
  width: 100%;
  height: 100%;
  rotate: -91deg;
}
.Agate svg {
  width: 100%;
  height: 100%;
}
.Agate text {
  fill: #ffffff;
  font-size: 32pt;
}
.Compassion {
  opacity: 1;
  position: absolute;
  top: 155rem;
  left: 83rem;
  width: 50%;
  height: 50%;
  rotate: 18deg;
  z-index: -1;
}

.crystal3 {
  width: 60%;
  margin-left: -17%;
  position: relative;
  overflow: hidden;
  rotate: 50deg;
}

.Calming {
  position: absolute;
  top: 140.5rem;
  left: 11rem;
  opacity: 1;
  width: 100%;
  height: 100%;
  rotate: -30deg;
  z-index: -1;
}

.Amethyst {
  position: absolute;
  top: 189.2rem;
  left: 8rem;
  opacity: 1;
  width: 100%;
  height: 100%;
  rotate: 24deg;
  z-index: -1;
}
.Stoneofpeace {
  opacity: 1;
  position: absolute;
  top: 125rem;
  left: 30rem;
  width: 100%;
  height: 100%;
  rotate: -70deg;
  z-index: -1;
}

.end {
  position: relative;
  height: 140vh;
  overflow: hidden;
}

.crystal4 {
  width: 50%;
  margin-left: calc(100% - 40%);
  overflow-y: hidden;
  rotate: -18deg;
  position: absolute;
  bottom: -20rem;
  left: 0;
}

.Stoneoflove {
  opacity: 1;
  position: absolute;
  left: 66rem;
  bottom: -46.5rem;
  width: 100%;
  height: 100%;
  rotate: 23deg;
  z-index: -1;
}
.Healing {
  opacity: 1;
  position: absolute;
  left: 29rem;
  bottom: -63rem;
  width: 100%;
  height: 100%;
  rotate: 67deg;
  z-index: -1;
}
.Rosequartz {
  opacity: 1;
  position: absolute;
  left: -6rem;
  bottom: -74rem;
  width: 100%;
  height: 100%;
  rotate: 72deg;
  z-index: -1;
}

.lightswitch {
  position: absolute;
  bottom: 3rem;
  left: 4rem;
  z-index: 3;
}

a {
  font-size: 30pt;
  text-decoration: none;
  color: white;
}

.revealed-area {
  position: fixed;
  inset: 0;
  background: radial-gradient(
    circle 200px at 50% 50%,
    transparent 10%,
    rgba(0, 0, 0, 0.98)
  );
  pointer-events: none;
  z-index: 2;
}