:root {
  font-family: Helvetica;
  /*-------------Colors------------- */
  --ColorDarkA: hsl(0, 0%, 0%);
  --ColorDarkB: hsl(0, 0%, 18%);
  --ColorWhiteA: hsl(0, 0%, 94%);
  --ColorWhiteB: hsl(0, 0%, 90%);
  /*-------------FontSize -- Golden Ratio (1.618) Base Size 13px------------- */
  --FontH1: 233.25px;
  --FontH2: 144.16px;
  --FontH3: 89.10px;
  --FontH4: 55.07px;
  --FontH5: 34.03px;
  --FontParagraph: 21.03px;
  --FontSubtitle: 13px;
  /*-------------GoldenRatio (1.618) (Viewport Width 1920px)------------- */
  --GoldenRatio1: 1920px;
  --GoldenRatio2: 1186.65px;
  --GoldenRatio3: 733.41px;
  --GoldenRatio4: 453.28px;
  --GoldenRatio5: 280.15px;
  --GoldenRatio6: 173.15px;
  --GoldenRatio7: 107.01px;
  --GoldenRatio8: 66.14px;
  --GoldenRatio9: 40.88px;
  --GoldenRatio10: 25.27px;
}

::-webkit-scrollbar {
  display: none;
}

* {
  margin: 0;
  padding: 0;
  color: var(--ColorDarkA);
}

body {
  background: var(--ColorWhiteA);
  opacity: 0;
}

<!-- #wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
}

#wrapper h1 {
  padding-left: var(--GoldenRatio7);
  font-size: var(--FontH2);
}

#wrapper h1 span {
  color: var(--ColorDarkB);
}-->

#ImgWrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  perspective: 2200px;
  background: var(--ColorDarkA);
}

#ImgWrapper img {
  position: absolute;
  top: 0px;
  width: 70%;
  margin: 0 auto;
  display: block;
  left: 55px;
}

#ImgWrapper #img1 {
    z-index: 2;
    height: auto;
    left: 0;
    width: 100%;
}

#ImgWrapper #img2 {
  z-index: 1;
  height: auto;
  bottom: 0%;
  right: 0%;
  width: 100%;
}

/*-------------@media (max-width: 1920px)------------- */

@media (max-width: 1920px) {
  :root {
    /*-------------FontSize (PX to VW Conversion With Viewport Width 1920px)------------- */
    --FontH1: 12.148vw;
    --FontH2: 7.508vw;
    --FontH3: 4.641vw;
    --FontH4: 2.868vw;
    --FontH5: 1.772vw;
    --FontParagraph: 1.095vw;
    --FontSubtitle: 0.677vw;
    /*-------------GoldenRatio (1.618) (Viewport Width 1920px)------------- */
    --GoldenRatio1: 100vw;
    --GoldenRatio2: 61.805vw;
    --GoldenRatio3: 38.198vw;
    --GoldenRatio4: 23.608vw;
    --GoldenRatio5: 14.591vw;
    --GoldenRatio6: 9.018vw;
    --GoldenRatio7: 5.573vw;
    --GoldenRatio8: 3.445vw;
    --GoldenRatio9: 2.129vw;
    --GoldenRatio10: 1.316vw;
  }
}

/*-------------/@media (max-width: 1920px)------------- */

/*-------------@media (max-width: 400px)------------- */

@media (max-width: 400px) {
  :root {
    /*-------------GoldenRatio (1.618) (Viewport Width 400px) Base Size 13px------------- */
    --FontH1: 58.313vw;
    --FontH2: 36.040vw;
    --FontH3: 22.275vw;
    --FontH4: 13.768vw;
    --FontH5: 8.508vw;
    --FontParagraph: 5.258vw;
    --FontSubtitle: 3.250vw;
    /*-------------GoldenRatio (1.618) (Viewport Width 400px)------------- */
    --GoldenRatio1: 100vw;
    --GoldenRatio2: 61.805vw;
    --GoldenRatio3: 38.197vw;
    --GoldenRatio4: 23.608vw;
    --GoldenRatio5: 14.590vw;
    --GoldenRatio6: 9.018vw;
    --GoldenRatio7: 5.572vw;
    --GoldenRatio8: 3.445vw;
    --GoldenRatio9: 2.130vw;
    --GoldenRatio10: 1.317vw;
  }
  #wrapper h1 {
    font-size: var(--FontH5);
  }
 /*#ImgWrapper #img1 {
    z-index: 2;
    height: auto;
    left: 0;
    width: 100%;
}
  #ImgWrapper #img2 {
    height: auto;
    bottom: 0%;
    right: 0%;
    width: 100%;
  }*/
 
  #codeby a {
    font-size: var(--FontParagraph);
  }
}



.slide-main {
    position: relative;
    z-index: 9;
    width: 100%;
}
.slide-main .social ul li:last-child {
    padding-right: 0;
}
.slide-main .social ul li a i {
    color: #Fff;
    font-size: 23px;
}
.slide-main .social ul li {
    display: inline-block;
    padding-right: 29px;
}
.slide-main .social ul li:before {
  display: none;
}
.slide-main .social ul {
    padding-left: 0;
    text-align: center;
    margin-top: 85px;
    padding-top: 0;
}
.slide-main ul {
    padding-left: 0;
    list-style-type: none;
    padding-top: 114px;
}
.slide-main ul li {
    padding-bottom: 113px;
}
.slide-main ul li a {
    font-size: 20px;
    color: #fff;
    font-family: 'SPACE' !important;
    letter-spacing: 1px;
}
.slide-main ul li {
    padding-bottom: 64px;
    position: relative;
    text-align: center;
}
.slide-main ul li a.active {
    position: relative;
    color: #fff;
    text-shadow: 2px 1px 20px #fff, 1px 1px 20px #ccc;
}


.slide-main ul li:last-child::before {
    height: 74px;
}
.slide-main ul li:first-child::before {
    height: 123px;
    top: -120px;
}
.slide-main ul li:before {
    position: absolute;
    content: '';
    width: 0.01px;
    height: 80px;
    background: #fff;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -66%;
    border-radius: 13px;
    box-shadow: 0px 0px 1px 1px #fff;
}
.slide-main img {
    box-shadow: none !important;
}


.enterworld{
  cursor: pointer;
}