@font-face {
  font-family: 'PPMondwest-Regular';
  src: url(../fonts/PPMondwest-Regular.otf);
}

@font-face {
  font-family: 'PPNeueBit-Bold';
  src: url(../fonts/PPNeueBit-Bold.otf);
}

path:not(.is-scaled):hover {
  transform: scale(1.01);
  cursor: pointer;
}

.d {
  fill: #005b36;
}

.e {
  fill: aqua;
}

.f {
  fill: #ff8200;
}

.g {
  fill: #ff0;
}

.h {
  fill: blue;
}

.i {
  fill: #9677ff;
}

.k {
  fill: lime;
}

.l {
  fill: #007fff;
}

.m {
  fill: red;
}

.o {
  fill: #f0f;
}

.d2 {
  fill: #005b36;
}

.e2 {
  fill: aqua;
}

.f2 {
  fill: #ff8200;
}

.g2 {
  fill: #ff0;
}

.h2 {
  fill: blue;
}

.i2 {
  fill: #9677ff;
}

.k2 {
  fill: lime;
}

.l2 {
  fill: #007fff;
}

.m2 {
  fill: red;
}

.o2 {
  fill: #f0f;
}

.p {
  fill: none;
  stroke: #000;
  stroke-width: 1px;
}

.p:hover {
  stroke-width: 400px;
}

#displayText {
  color: black;
}

#displayText.o {
  font-family: 'PPNeueBit-Bold';
  line-height: 0.6;
  -webkit-text-stroke: 1px black;
  font-size: 60px;
  color: #f0f;
}

#displayText.m {
  font-family: 'PPNeueBit-Bold';
  line-height: 0.6;
  color: red;
  font-size: 60px;
  -webkit-text-stroke: 1px black;
}

#displayText.l {
  font-family: 'PPNeueBit-Bold';
  line-height: 0.6;
  color: #007fff;
  -webkit-text-stroke: 1px black;
  font-size: 60px;
}

#displayText.d {
  font-family: 'PPNeueBit-Bold';
  line-height: 0.6;
  color: #005b36;
  -webkit-text-stroke: 1px #000;
  font-size: 60px;
}

#displayText.e {
  font-family: 'PPNeueBit-Bold';
  line-height: 0.6;
  color: aqua;
  -webkit-text-stroke: 1px #000;
  font-size: 60px;
}

#displayText.f {
  font-family: 'PPNeueBit-Bold';
  line-height: 0.6;
  color: #ff8200;
  font-size: 60px;
  -webkit-text-stroke: 1px black
}

#displayText.g {
  font-family: 'PPNeueBit-Bold';
  line-height: 0.6;
  color: #ff0;
  -webkit-text-stroke: 1px black;
  font-size: 60px;
}

.display-text-container {

  position: fixed;
  width: 100%;
  height: 100svh;
  pointer-events: none;
  overflow-y: scroll;
}

.text-inner-container {
  width: 100vw;
  height: 100svh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#displayText.h {
  font-family: 'PPNeueBit-Bold';
  line-height: 0.6;
  color: blue;
  -webkit-text-stroke: 1px black;
  font-size: 60px;
}

#displayText.i {
  font-family: 'PPNeueBit-Bold';
  line-height: 0.6;
  color: #9677ff;
  -webkit-text-stroke: 1px black;
  font-size: 60px;
}

#displayText.k {
  font-family: 'PPNeueBit-Bold';
  line-height: 0.6;
  color: lime;
  -webkit-text-stroke: 1px black;
  font-size: 60px;
}

#displayText.o2 {
  font-family: 'PPNeueBit-Bold';
  line-height: 0.6;
  -webkit-text-stroke: 3px #000;
  font-size: 100px;
  color: #f0f;
}

#displayText.m2 {
  font-family: 'PPNeueBit-Bold';
  line-height: 0.6;
  color: red;
  font-size: 100px;
  -webkit-text-stroke: 3px #000;
}

#displayText.l2 {
  font-family: 'PPNeueBit-Bold';
  line-height: 0.6;
  color: #007fff;
  -webkit-text-stroke: 3px #000;
  font-size: 100px;
}

#displayText.d2 {
  font-family: 'PPNeueBit-Bold';
  line-height: 0.6;
  color: #005b36;
  -webkit-text-stroke: 3px #000;
  font-size: 100px;
}

#displayText.e2 {
  font-family: 'PPNeueBit-Bold';
  line-height: 0.6;
  color: aqua;
  -webkit-text-stroke: 3px #000;
  font-size: 100px;
}

#displayText.f2 {
  font-family: 'PPNeueBit-Bold';
  line-height: 0.6;
  color: #ff8200;
  font-size: 100px;
  -webkit-text-stroke: 3px #000;
}

#displayText.g2 {
  font-family: 'PPNeueBit-Bold';
  line-height: 0.6;
  color: #ff0;
  -webkit-text-stroke: 3px #000;
  font-size: 100px;
}

#displayText.h2 {
  font-family: 'PPNeueBit-Bold';
  line-height: 0.6;
  color: blue;
  -webkit-text-stroke: 3px #000;
  font-size: 100px;
}

#displayText.i2 {
  font-family: 'PPNeueBit-Bold';
  line-height: 0.6;
  color: #9677ff;
  -webkit-text-stroke: 3px #000;
  font-size: 100px;
}

#displayText.k2 {
  font-family: 'PPNeueBit-Bold';
  line-height: 0.6;
  color: lime;
  -webkit-text-stroke: 3px #000;
  font-size: 100px;
}

.button-container {
  pointer-events: none;
  width: 100%;
  position: fixed;
  top: 2%;
  left: 0%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#button {
  font-size: 1.5rem;
  padding: 0.4rem;
  cursor: pointer;
  line-height: 0.8;
  font-family: 'PPMondwest-Regular';
}

#button2 {
  font-family: 'PPNeueBit-Bold';
  font-size: 6rem;
  line-height: 0.6;
  border-radius: 1vw;
  padding: 0.6rem;
  cursor: pointer;

}

#displayText {
  font-family: 'PPMondwest-Regular';
  display: none;
  position: relative;
  width: 70%;
  font-size: 4rem;
  line-height: 0.8;

}

.display-text-container {
  z-index: 100;
}


@media screen and (max-aspect-ratio: 1/1) {
  #forme-element {
    height: 210vh;
    transform: translateX(calc(calc(calc(120vh - 140vw) / 4)* -1));
  }
}

@media screen and (max-width: 800px) {

  #displayText.k {
    text-align: center;
    font-size: 2.2rem;
  }

  #displayText.i {
    text-align: center;
    font-size: 2.2rem;
  }

  #displayText.j {
    text-align: center;
    font-size: 2.2rem;
  }

  #displayText.h {
    text-align: center;
    font-size: 2.2rem;
  }

  #displayText.g {
    text-align: center;
    font-size: 2.2rem;
  }

  #displayText.e {
    text-align: center;
    font-size: 2.2rem;
  }

  #displayText.f {
    text-align: center;
    font-size: 2.2rem;
  }

  #displayText.o {
    text-align: center;
    font-size: 2.2rem;
  }

  #displayText.m {
    text-align: center;
    font-size: 2.2rem;
  }

  #displayText.l {
    text-align: center;
    font-size: 2.2rem;
  }

  #displayText.d {
    text-align: center;
    font-size: 2.2rem;
  }

  #displayText.i2 {
    text-align: center;
    font-size: 80px;
  }

  #displayText.k2 {
    text-align: center;
    font-size: 80px;
  }

  #displayText.j2 {
    text-align: center;
    font-size: 80px;
  }

  #displayText.h2 {
    text-align: center;
    font-size: 80px;
  }

  #displayText.g2 {
    text-align: center;
    font-size: 80px;
  }

  #displayText.e2 {
    text-align: center;
    font-size: 80px;
  }

  #displayText.f2 {
    text-align: center;
    font-size: 80px;
  }

  #displayText.o2 {
    text-align: center;
    font-size: 80px;
  }

  #displayText.m2 {
    text-align: center;
    font-size: 80px;
  }

  #displayText.l2 {
    text-align: center;
    font-size: 80px;
  }

  #displayText.d2 {
    text-align: center;
    font-size: 80px;
  }
}