:root{
  --BGCOLOR:#131313
}
html{
    font-size: clamp(16px, 3vw, 32px);
}
body{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background-color: var(--BGCOLOR);
    color: #fff;
}
*{
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: normal;
}

.italic {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-style: italic;
}

.rainBowStripes{
  margin-top: 20px;
  width: 100vw;
  height: 50px;
}
.rainBow{
  width: 100%;
  height: 33.33%;
  transform: translateX(-100vw);

}
.Red{
  background-color: #FF4E5D;
}
.Blue{
  background-color: #9785FB;
}
.Green{
  background-color: #62FF51;
}
.logo{
  display: block;
  background-image: url(../BrandGraphics/logo.svg);
  width: calc(1.2rem + 6px);;
  height: calc(1.2rem + 6px);;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: all ease 0.5s;
  
  opacity: 1;
}
.logo:hover{
  transform: rotate(360deg);
  cursor: pointer;
}
.navBarItem{
  display: block;
  color: #fff;
  font-size: 1em;
  text-decoration: none;
  transition: all ease 0.3s;
  height: fit-content;
  
}
.navBarItem:hover{
  box-shadow: 0px 4px 0px 0px #FF4E5D,
    0px 8px 0px 0px #62FF51,
    0px 12px 0px 0px #9785FB;
  transform: translateY(-5px);
}
.topBar{
  width: 100vw;
  height: calc(1.2rem + 12px);
  display: flex;
  gap: 20px;
  justify-content: flex-end;
  position: fixed;
  background-color: #131313;
  padding-right: 30px;
  z-index: 999;
  font-size: 32px;
  animation: deBlur 1.5s cubic-bezier(1, 0.001, 0.34, 1) forwards;
}
.centerHold{
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  animation: deBlur 1.5s cubic-bezier(1, 0.001, 0.34, 1) forwards;

}
.pageTitle{
  font-size: 8rem;
  display: block;
  width: fit-content;
  height: fit-content;
  animation: BoxShadowTitle 1s linear(0, 0.402 7.4%, 0.711 15.3%, 0.929 23.7%, 1.008 28.2%, 1.067 33%, 1.099 36.9%, 1.12 41%, 1.13 45.4%, 1.13 50.1%, 1.111 58.5%, 1.019 83.2%, 1.004 91.3%, 1) 1.4s forwards;
  
}
.animationHolder{
  opacity: 0;
  transform: translateY(-52px);
}
@keyframes deBlur {
  0%{
    filter: blur(20px);
  }
  100%{
    filter: blur(0px);
  }
}
@keyframes fadeINDOWN {
  0%{
    opacity: 0;
    transform: translateY(-52px);
  }
  100%{
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes slideINLeft {
  0%{
    transform: translateX(-100vw);
  }
  100%{
    transform: translateX(0);
  }
}
@keyframes fadeInUpScale {
  0%{
    opacity: 0;
    transform: translateY(30px);
  }
  100%{
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes deBlurOpac{
  0%{
    opacity: 0;
    filter: blur(20px);
    transform: translateY(30px);
  }
  100%{
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0px);
  }
}
@keyframes BoxShadowTitle {
  0%{
    box-shadow: 0px 0px 0px 0px #00000084;
  }
  100%{
    box-shadow: 0px 8px 0px 0px #FF4E5D,
    0px 16px 0px 0px #62FF51,
    0px 24px 0px 0px #9785FB;
    
  }
}
@keyframes fadeInUpScale2 {
  0%{
    opacity: 0;
    transform: translateY(30px);
    z-index: 1;
  }
  100%{
    opacity: 1;
    transform: translateY(0px);
    z-index: 1;
  }
}
@media (max-width:750px) {
  .topBar{
    font-size: clamp(24px, 3vw, 32px);
  }
}
@media (max-width:500px) {
  .topBar{
    font-size: clamp(20px, 3vw, 32px);
  }
}
@media (max-width:415px) {
  .pageTitle{
    font-size: 6rem;
  }
}