@font-face {
  font-family: maxi;
  src: url("fonts/ABCMaxiRoundMonoVariable-Trial.woff") format("woff");
  font-variation-settings: "wght" 200 700;
}
@font-face {
  font-family: pp-book;
  src: url("fonts/PPNeueMontreal-Book.woff") format("woff");
}
@font-face {
  font-family: pp;
  src: url("fonts/PPNeueMontreal-Regular.woff") format("woff");
  font-style: normal;
}
@font-face {
  font-family: pp;
  src: url("fonts/PPNeueMontreal-Italic.woff") format("woff");
  font-style: italic;
}
@font-face {
  font-family: pp-bold;
  src: url("fonts/PPNeueMontreal-Bold.woff") format("woff");
}
@font-face {
  font-family: pp-bold;
  src: url("fonts/PPNeueMontreal-BoldItalic.woff") format("woff");
  font-style: italic;
}
@font-face {
  font-family: shity;
  src: url("fonts/shit5-shit5.otf") format("opentype");
}
:root {
  --stageheader: 4rem;
  --stagetext: 1.5rem;
  --footersize: 1.5rem;
  --yel: #fff100;
  --prosize: 2rem;
  --prosize2: 4rem;
}
* {
}
html {
  font-size: 62.5%;
  scrollbar-width: none;
  overflow: -moz-scrollbars-none;
}
body {
  margin: 0px;
}
::-webkit-scrollbar {
  width: 0;
  background: transparent;
}
section {
  /* height: 100vh; */
  padding: 0.5rem 2rem 1rem 2rem;
}
.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 1;
  text-align: center;
}
.popup-content {
  margin: 2% auto;
  display: block;
  max-width: 70%;
  max-height: 95%;
}
.popup.active {
  display: flex;
  align-items: center;
}
.stuff {
  display: flex;
  position: fixed;
  height: 100vh;
  width: 47vw;
  top: 0;
  left: 50vw;
  padding-left: 4rem;
  line-break: anywhere;
}
.boldheader {
  font-variation-settings: "wght" 700;
  /* color: #fff100; */
}
.spacer {
  z-index: -1;
  width: 100vw;
  height: 2000vh;
  position: absolute;
  top: 0;
  left: 0;
}
.stageheader {
  font-size: var(--stageheader);
  font-family: maxi;
  font-variation-settings: "wght" 200;
  text-transform: uppercase;
  margin: 0;
  margin-top: 2rem;
  border-bottom: 0.5px solid black;
  /* color: #fff100; */
}
.stagetext {
  font-family: pp-book;
  font-size: var(--stagetext);
  letter-spacing: 0.5px;
}
.stageimg {
  width: 40%;
}
#message {
  position: fixed;
  background-color: aqua;
  top: 0;
  left: 0;
  z-index: 12;
  font-size: var(--stagetext);
}
.notes {
  width: max-content;
  height: 2vh;
  border-top: 1px dotted black;
  position: fixed;
  bottom: 0.5rem;
  font-family: pp;
  font-size: var(--footersize);
  padding-top: 0.5rem;
  z-index: 10;
}
.notes span {
  padding-left: 1.5rem;
}
.notes i {
  font-family: pp;
  font-style: italic;
}
.notes a {
  text-decoration: none;
  color: #ef2b72;
}
.notes2 {
  width: 15vh;
  height: 2vh;
  border-top: 1px dotted black;
  position: fixed;
  bottom: 0;
  right: 4rem;
  font-family: pp;
  font-size: var(--footersize);
  padding-top: 0.5rem;
  display: flex;
  justify-content: center;
  /* padding-right: 1.5rem; */
}

#grad1 {
  width: 5vw;
  position: fixed;
  left: 50vw;
  height: 100vh;
  top: 0;
  background: rgb(236, 0, 139);
  background: linear-gradient(
    90deg,
    rgb(236, 0, 138) 0%,
    rgb(255, 255, 255) 100%
  );
}
#grad2 {
  width: 5vw;
  position: fixed;
  left: 45vw;
  height: 100vh;
  top: 0;
  background: rgb(236, 0, 139);
  background: linear-gradient(
    270deg,
    rgba(236, 0, 138, 0.5189234629398635) 0%,
    rgba(255, 255, 255, 0.275) 100%
  );
}
#obj1 {
  width: auto;
  overflow-y: hidden;
  /* background-color: #ef2b72; */
}

#obj2 {
  width: auto;
  overflow-y: hidden;
  background: var(--yel);
}

#obj3 {
  width: auto;
  overflow-y: hidden;
}

#obj4 {
  width: auto;
  overflow-y: hidden;
  background: var(--yel);
}
#obj5 {
  width: auto;
  overflow-y: hidden;
}
#myprocess {
  font-family: maxi;
  font-size: 7rem;
  width: 40vw;
  position: fixed;
  padding: 2rem;
  padding-left: 4rem;
  font-variation-settings: "wght" 700;
  height: max-content;
  word-spacing: -20px;
  line-height: 0.95;
}
#mybut {
  width: 40vw;
  position: fixed;
  padding: 2rem;
  padding-left: 4rem;
  height: max-content;
  bottom: 10vh;
  left: 1vh;
}
.pimg {
  width: 40%;
}
.pbtn {
  background-color: var(--yel);
  padding: 1.5rem;
  border-radius: 2%;
  font-size: 2rem;
  -webkit-box-shadow: 0px 13px 28px 0px #000000;
  box-shadow: 0px 13px 28px 0px #ff9ac95e;
  color: #f241a9;
  text-decoration: none;
  font-variation-settings: "wght" 100;
  word-spacing: 0px;
}
.ptext {
  font-family: pp;
  font-size: var(--prosize);
  z-index: 10;
  word-spacing: 0;
  line-height: 1.2;
  letter-spacing: 0.2px;
}
.ptext2 {
  font-family: shity;
  font-size: var(--prosize2);
  word-spacing: 0;
  font-size: 8rem;
}
.ptext3 {
  font-family: maxi;
  font-size: 5rem;
  font-variation-settings: "wght" 200;
  background: var(--yel);
}
.ptext4 {
  font-family: pp;
  font-size: 3rem;
  z-index: 10;
  word-spacing: 0;
  letter-spacing: 0.2px;
  background: #eb008a;
  color: white;
  font-size: 6rem;
}
/* Hoversss 
––––––––––––––––––––––*/
.stageimg:hover {
  filter: blur(10px);
}
.popup-content:hover {
  cursor: progress;
}