html{
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #001c2e;
}

:root {
  --dot-radius: 1px;
  --path-radius: 150px;
  --vp-width: 10vw;
  --vp-height: 10vw;

  --static-dot-color: hsl(62, 100%, 45%);
  --moving-dot-color: rgb(236, 255, 113);
}

.intro {
  position: absolute;
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
  z-index: 5;
  font-family: Neon;
  display: inline-block;
  font-size: 3vw;
  left: 38vw;
  width: 20vw;
  top: 32%;
  text-align: center;
  color: rgb(220, 255, 219);
  text-shadow: 0 0 20px #fff, 0 0 30px #f5ffcb, 0 0 40px #ebff00, 0 0 50px #e3ff00, 0 0 60px #eaff00, 0 0 70px #f1f100, 0 0 80px #ffff00;
}

#sec1 {
    height: 100vh;
    width: 100vh;
    position: absolute;
    left: 0vw;
    top: 0vh;
  }
  
.sec1Title {
  text-align: center;
  font-family: modern;
  z-index: 5;
  width: 34.5vw;
  height: 55vh;
  padding-top: 45vh;
  left: 0vw;
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  position: absolute;
  top: 0vh;
  display: block;
  font-size: 10vh;
  color: rgb(220, 255, 219);
  text-shadow: 0 0 20px rgb(207, 207, 207), 0 0 30px #f5ffcb, 0 0 40px #ebff00, 0 0 50px #e3ff00, 0 0 60px #eaff00, 0 0 70px #f1f100, 0 0 80px #ffff00;
}

.sec1bak {
  position: absolute;
  left: 0vw;
  top: 0vh;
  height: 100vh;
  width: 101vw;
  z-index: -5;
}

.arrowU,
.arrowD{
  transition: all 0.5s;
  position: absolute;
  text-decoration: none;
  font-size: 4vw;
  z-index: 3;
  left: 48vw;
  text-shadow: 0 0 3px rgb(0, 0, 0);
  color: #fff;
}

.arrowU:hover,
.arrowD:hover{
  transition: all 0.5s;
  text-shadow: 0 0 5px rgb(207, 207, 207), 0 0 7px #f5ffcb, 0 0 10px #ebff00, 0 0 12px #e3ff00, 0 0 15px #eaff00, 0 0 17px #f1f100, 0 0 20px #ffff00;
}

.arrowU{
  top: 1vh;
}

.arrowD{
  bottom: 6vh;
}

.txt1R,
.txt2R,
.txt3R,
.txt1L,
.txt2L,
.txt3L{
  position: absolute;
  font-family: modern;
  text-align: center;
  font-size: 2vw;
  z-index: 3;
  width: 25vw;
}

.txt1R{
  top: 16vh;
  right: 33vw;
}

.txt2R{
  top: 40vh;
  right: 4vw;
  color: white;
}

.txt3R{
  bottom: 16vh;
  right: 33vw;
}

.txt1L{
  top: 16vh;
  left: 33vw;
}

.txt2L{
  top: 40vh;
  left: 4vw;
  color: white;
}

.txt3L{
  bottom: 16vh;
  left: 33vw;
}

.vid1R,
.vid2R,
.vid3R,
.vid1L,
.vid2L,
.vid3L{
  position: absolute;
  border-width: 0px;
  border-radius: 10px;
  width: 20vw;
  height: 20vh;
  z-index: 3;
  box-shadow: 0 0 5px #171717;
}

.vid1R{
  top: 14vh;
  right: 7vw;
}

.vid2R{
  top: 40vh;
  right: 35vw;
  box-shadow: 0 0 5px #e6e6e6;
}

.vid3R{
  bottom: 14vh;
  right: 7vw;
}

.vid1L{
  top: 14vh;
  left: 7vw;
}

.vid2L{
  top: 40vh;
  left: 35vw;
  box-shadow: 0 0 5px #e6e6e6;
}

.vid3L{
  bottom: 14vh;
  left: 7vw;
}

.titleR,
.titleL{
  position: absolute;
  font-family: modern;
  text-align: center;
  font-size: 8vh;
  top: 10vh;
  z-index: 3;
}

.titleR{
  right: 0vw;
  width: 35.5vw;
}

.titleL{
  left: 0vw;
  width: 35.5vw;
}

.bakR,
.bakL{
  position: absolute;
  background-size: cover;
  width: 36vw;
  height: 100vh;
  z-index: 2;
  top: 0vh;
  box-shadow: 0 0 5px #171717;
}

.bakR{
  right: 0vw;
}

.bakL{
  left: 0vw;
}

.middleLine{
  position: absolute;
  background-color: black;
  display: block;
  height: 26vh;
  width: 100vw;
  top: 37vh;
  z-index: 1;
}

#sec2{
  position: absolute;
  background-color: crimson;
  top: 100vh;
  left: 0vw;
  width: 100vw;
  height: 100vh;
}

#sec3{
  position: absolute;
  background-color: crimson;
  top: 200vh;
  left: 0vw;
  width: 100vw;
  height: 100vh;
}

#sec4{
  position: absolute;
  background-image: url("../icons/gold.jpg");
  background-position: 30vw 0vh;
  background-color: rgb(255, 179, 0);
  top: 300vh;
  left: 0vw;
  width: 100vw;
  height: 100vh;
  z-index: 0;
}

#sec5{
  position: absolute;
  background-position: 30vw 0vh;
  background-color: gold;
  top: 400vh;
  left: 0vw;
  width: 100vw;
  height: 100vh;
}

#sec6{
  position: absolute;
  background-position: 30vw 0vh;
  background-color: crimson;
  top: 500vh;
  left: 0vw;
  width: 100vw;
  height: 100vh;
}

.gold{
  color: gold;
  text-shadow: 0 0 5px gold;
}

.silver{
  color: silver;
  text-shadow: 0 0 5px silver;
}

.plat{
  color: #38fcff;
  text-shadow: 0 0 5px rgb(65, 236, 255);
}

.revolux{
  color: #cd0000;
  text-shadow: 0 0 5px rgb(255, 0, 0);
}

.revolt-standout{
  color: #9600cd;
  text-shadow: 0 0 5px rgb(247, 103, 255);
}

.copyright{
  right: 2vw;
  text-shadow: 0 0 20px rgb(207, 207, 207), 0 0 30px #f5ffcb, 0 0 40px #ebff00, 0 0 50px #e3ff00, 0 0 60px #eaff00, 0 0 70px #f1f100, 0 0 80px #ffff00;
}