* {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
}

:root {
	--container-width: 9vw;;
	--factor: 1; /* Find the factor by which you'd want to arrive at the right font-size. */
}

html {
      background-image: radial-gradient(circle, #d39b45, #ce8e3d, #c88137, #c27431, #bb672c, #b05b2a, #a55029, #9a4527, #883926, #752e23, #622420, #4f1b1b);

}

@font-face {
   font-family: Spartan;
   src: url("./assets/Spartan-Regular.woff2");
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

body {
   overflow: hidden;
}

section {
  visibility: hidden;
}

.preloader {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
   background-image: radial-gradient(circle, #d39b45, #ce8e3d, #c88137, #c27431, #bb672c, #b05b2a, #a55029, #9a4527, #883926, #752e23, #622420, #4f1b1b);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  width: 100%;
  z-index: 9999;
  pointer-events: none;
}

.preloader .spnr {
  width: 6rem;
  opacity: 0.6;
  animation: crescendo 1.5s ease-in-out;
}

@keyframes crescendo {
/*   0%   {transform: scale(.8);} */
  100% {transform: scale(0.7);}
}

#particles-js {
      position: absolute;
   z-index: 1;
   /* height: 100vh;
   width: 100vw; */
   top:0;
   bottom:0;
   left: 0;
   right: 0;
   overflow: hidden;
}

.landing-wrap {
   width: 100vw;
   height: 100vh;
   overflow: hidden;
}

.title-wrap {
   z-index: 15;
   position: relative;
}


.title {
   display: inline-block;
   z-index: 3;
   position: absolute;
   top: 130px;
   left: 50%;
   -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
   font-family: 'Spartan';
   font-size: 4.5rem;
   font-weight: 500;
   font-style: normal;
   letter-spacing: 3rem;
   text-indent: 3rem;
   color:#fff2e0;
   /* border: 1px solid red; */
}

.subtitle {
   display: inline-block;
   z-index: 3;
   position: absolute;
   top: 210px;
   left: 50%;
   /* width: 750px; */
   -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
   font-family: 'Roboto';
   font-size: 1.5rem;
   font-style: normal;
   letter-spacing: .1rem;
   text-indent: .1rem;
   white-space: nowrap;
   color:#fff2e0;
   /* border: 1px solid red; */
}

/* Top Layer */
.top-img-container {
   position: absolute;
   z-index: 2;
   /* height: 100vh;
   width: 100vw; */
   top:0;
   bottom:0;
   left: 0;
   right: 0;
   overflow: hidden;
   /* border: 1px solid red; */
}

.moons {
   display: inline-block;
   position: absolute;
   top: 120px;
   left: 50%;
   -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
}

.char {
   display: inline-block;
   position: absolute;
   bottom: -10px;
   left: 50%;
   -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
}





/* video Cloud Layer */
.vid-container {
   position: absolute;
   z-index: 1;
   height: 100vh;
   width: 100vw;
   display: flex;
   justify-content: center;
   margin-top: 3rem;
   overflow: hidden;
}

.vid-wrap {
   width: 428px;
   height: 428px;
   border-radius: 100%;
   -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
   -webkit-transform: rotate(0.000001deg); 
   -webkit-border-radius: 100%; 
   -moz-border-radius: 100%;
}

.vid {
   /* border-radius: 50%; */
   object-fit: cover;
   width: 450px;
   height: 450px;
}


/* Background Layer */
.bg-container {
   position: relative;
   z-index: -2;
   height: 100vh;
   width: 100vw;
   /* display: flex;
   align-items: center; */
   background-image: radial-gradient(circle, #d39b45, #ce8e3d, #c88137, #c27431, #bb672c, #b05b2a, #a55029, #9a4527, #883926, #752e23, #622420, #4f1b1b);
}



.bottom-img-wrap {
   position: absolute;
   bottom: 0;
   z-index: -1;
   height: 70vh;
   width: 100vw;
   overflow-y: hidden;
}

.bg-img{
   display: inline-block;
   position: absolute;
   bottom: -10px;
   left: 50%;
   -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
   /*visibility: visible ;*/
}


.map-wrap {
   width: 100vw;
   height: 100vh;
   overflow: hidden;
   background-image: radial-gradient(circle, #d39b45, #ce8e3d, #c88137, #c27431, #bb672c, #b05b2a, #a55029, #9a4527, #883926, #752e23, #622420, #4f1b1b);

}


/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

   .char {
      display: inline-block;
      position: absolute;
      bottom: -50px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%)
   }

   .bottom-img-wrap {
      background-position: center center;
      background-image: url("./assets/bg-rpt.png");
      object-fit: cover;
      background-repeat: repeat-x;
      bottom: -1rem;
   }

   .bg-img {
     visibility: hidden;
   }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 768px) {
   .title {
   font-size: 3.7rem;
   letter-spacing: 2rem;
   text-indent: 2rem;
   }

   .subtitle {
   top: 200px;
   font-size: 1.1rem;
   letter-spacing: .1rem;
   text-indent: .1rem;
   }

} 



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
   .title-wrap {
    top: 0;
   }

   .title {
      top: 150px;
      /* font-size: calc(var(--container-width) / var(--factor)); */
      /* font-size: 9vw; */
      letter-spacing: 1rem;
      text-indent: 1rem;
   }

   .subtitle {
      top: 220px;
      /* top: 180px;
      font-size: 3vw; */
      /* font-size: calc(var(--container-width) / var(--factor) / 2); */
      width: 90%;
      text-align: center;
      letter-spacing: .1rem;
      text-indent: .1rem;
      white-space: wrap;
   }


   
} 


/* Extra Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 500px) {


   .title {
      top: 70px;
      /* font-size: calc(var(--container-width) / var(--factor)); */
      font-size: 3rem;
      letter-spacing: .4rem;
      text-indent: 1rem;
   }

   .subtitle {
      top: 125px;
      font-size: 1rem; 
      /* font-size: calc(var(--container-width) / var(--factor) / 2); */
      width: 80%;
      text-align: center;
      letter-spacing: .1rem;
      text-indent: .1rem;
      white-space: wrap;
   }
}