/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 5 version
*/

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

}
html{
  overflow-x: hidden;
}

body {
  -webkit-user-select: text;
     -moz-user-select: text;
      -ms-user-select: text;
          user-select: text;
  background-color: #51189B;
  font-family: "Fira Code", monospace;
}

.main-wrapper{
  overflow: hidden;
  position: relative;
}

img {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

main {
  padding-top: -1px;
  position: relative;
}

.container {
  min-height: 100svh;
  padding-top: 5rem;
  max-width: 65rem;
  margin-inline: auto;
  padding-inline: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

b {
  font-weight: 700;
}
.font-hindi{
  font-family: "Tiro Devanagari Hindi", serif;
  font-weight: 400;
  font-style: normal;
}

.page-title {
  font-family: "Anta", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(2rem, 5vw, 3rem);
  color: #83FF00;
  margin-bottom: 2rem;
  text-align: center;

}


.numbered-list {
  padding-left: 2rem;
}

.numbered-list li {
  max-width: 42rem;
  font-size: 1.2rem;
  color: white;
  line-height: 2rem;
  margin-inline: auto;
}
.numbered-list li:not(:last-of-type){
  margin-bottom: 1.5rem;
}
.text-body {
  max-width: 42rem;
  font-size: 1.2rem;
  color: white;
  line-height: 2rem;
  margin-inline: auto;
}

.text-link {
  font-size: 1.2rem;
  color: #83FF00;
}

p.text-body:not(:first-of-type) {
  margin-top: 1.5rem;
}

.main-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.main-bg img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}

header {
  height: 0;
}

.sub-heading{
  position: absolute;
  top: 98%;
  left: 50%;
  translate: -50% 50%;
  width: 90vw;
  text-align: center;
  font-size: clamp(0.5rem, 2.2vw, 0.9rem);
  line-height: 1.6rem;
  opacity: 0.7;
}

.home1 {
  position: relative;
  height: 100svh;
  width: 100vw;
  /* padding-top: 0.1px; */
  /* overflow: hidden; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

header{
  position: absolute;
  width: 90%;
  max-width: 25rem;
  top: 0;
  left: 50%;
  z-index: 2;
}

.nav {
  position: relative;
  width: 100%;
  padding: clamp(1.5rem, 5vw, 3rem);
  background-color: #83FF00;
  margin-inline: auto;
  border-radius: clamp(1rem, 5vw, 2rem);
  -webkit-transform: translateY(-101%) translateX(-50%);
      -ms-transform: translateY(-101%) translateX(-50%);
          transform: translateY(-101%) translateX(-50%);
  -webkit-transition: -webkit-transform 0.5s ease-out;
  transition: -webkit-transform 0.5s ease-out;
  -o-transition: transform 0.5s ease-out;
  transition: transform 0.5s ease-out;
  transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out;
  -webkit-filter: drop-shadow(0.5rem 1.5rem 3.5rem #00000055);
          filter: drop-shadow(0.5rem 1.5rem 3.5rem #00000055);
}

.opened.nav {
  -webkit-animation: bounce 0.5s ease-out forwards;
          animation: bounce 0.5s ease-out forwards;
  /* Animation when opening */
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(0%) translateX(-50%);
            transform: translateY(0%) translateX(-50%);
  }

  60% {
    -webkit-transform: translateY(15%) translateX(-50%);
            transform: translateY(15%) translateX(-50%);
  }

  100% {
    -webkit-transform: translateY(10%) translateX(-50%);
            transform: translateY(10%) translateX(-50%);
  }
}

@keyframes bounce {
  0% {
    -webkit-transform: translateY(0%) translateX(-50%);
            transform: translateY(0%) translateX(-50%);
  }

  60% {
    -webkit-transform: translateY(15%) translateX(-50%);
            transform: translateY(15%) translateX(-50%);
  }

  100% {
    -webkit-transform: translateY(10%) translateX(-50%);
            transform: translateY(10%) translateX(-50%);
  }
}

@-webkit-keyframes bounceReverse {

  /* Animation when closing */
  0% {
    -webkit-transform: translateY(10%) translateX(-50%);
            transform: translateY(10%) translateX(-50%);
  }

  20% {
    -webkit-transform: translateY(15%) translateX(-50%);
            transform: translateY(15%) translateX(-50%);
  }

  100% {
    -webkit-transform: translateY(-100%) translateX(-50%);
            transform: translateY(-100%) translateX(-50%);
  }
}

@keyframes bounceReverse {

  /* Animation when closing */
  0% {
    -webkit-transform: translateY(10%) translateX(-50%);
            transform: translateY(10%) translateX(-50%);
  }

  20% {
    -webkit-transform: translateY(15%) translateX(-50%);
            transform: translateY(15%) translateX(-50%);
  }

  100% {
    -webkit-transform: translateY(-100%) translateX(-50%);
            transform: translateY(-100%) translateX(-50%);
  }
}

.nav-list {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}

.nav-item a {
  font-size: 1.2rem;
  color: #1B3B33;
  text-decoration: none;
}

.notch {
  z-index: 2;
  position: absolute;
  padding: 0.3rem;
  padding-top: 0.5rem;
  border-radius: 0 0 1.5rem 1.5rem;
  background-color: #83FF00;
  width: 40%;
  /* height: auto; */
  left: 50%;
  top: 99%;
  transform: translate3d(-50%,0,0);
}

.menu {
  margin-inline: auto;
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0.3rem;
  width: 3rem;
  height: 3rem;
  margin-top: -0.1rem;
}

.menu svg{
  width: 100%;
  height: 100%;
}

.line {
  fill: none;
  stroke: #1B3B33;
  stroke-width: 6;
  -webkit-transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.line1 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}

.line2 {
  stroke-dasharray: 60 60;
  stroke-width: 6;
}

.line3 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}

.opened .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}

.opened .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke-width: 6;
}

.opened .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}

.logo {
  margin-top: 1rem;
  width: 90%;
  max-width: 40rem;
  margin-inline: auto;
  opacity: 0;
}

.loaded .logo {
  -webkit-animation: logo 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
          animation: logo 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.logo-img {
  width: 100%;
}


.alien {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 100%;
  margin-inline: auto;
  ;
}

.character {
  /* margin-top: -1rem; */
  position: relative;
  width: 40%;
  margin-inline: auto;
  max-width: 18rem;
  opacity: 0;
  cursor: pointer;
}

.loaded .character {
  -webkit-animation: character 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
          animation: character 1000ms cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
}

.face {
  width: 100%;
  height: auto;
  z-index: -1;
}

.eyes {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  top: 34%;
  width: 106%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.eye {
  max-width: 45%;
}

.nose {
  height: auto;
  max-width: 12%;
  position: absolute;
  left: 50%;
  translate: -50% 0;
  top: 60%;
}

.mouth {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  top: 75%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 22%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.mouth-upper {
  -webkit-animation: speakU 400ms ease-in-out infinite;
          animation: speakU 400ms ease-in-out infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  width: 100%;
}

.mouth-lower {
  margin-top: 10%;
  -webkit-animation: speakL 400ms ease-in-out infinite;
          animation: speakL 400ms ease-in-out infinite;
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
  width: 50%;
}

.speeches {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
  position: relative;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
}

.speech {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
  position: relative;
  -webkit-backface-visibility: visible;
          backface-visibility: visible;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  position: absolute;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
  padding: 1rem 1.5rem;
  font-size: 1.3rem;
  font-weight: 500;
  background-color: #00000053;
  -webkit-backdrop-filter: blur(0.5rem);
          backdrop-filter: blur(0.5rem);
  color: white;
  border-radius: 3rem;
}

.speech.visible {
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity 100ms ease-in, -webkit-transform 3s ease-in-out;
  transition: opacity 100ms ease-in, -webkit-transform 3s ease-in-out;
  -o-transition: transform 3s ease-in-out, opacity 100ms ease-in;
  transition: transform 3s ease-in-out, opacity 100ms ease-in;
  transition: transform 3s ease-in-out, opacity 100ms ease-in, -webkit-transform 3s ease-in-out;
}

.visible.speech:nth-of-type(odd) {
  -webkit-transform: translateX(var(--windowX));
      -ms-transform: translateX(var(--windowX));
          transform: translateX(var(--windowX));
}

.visible.speech:nth-of-type(even) {
  -webkit-transform: translateX(var(--nWindowX));
      -ms-transform: translateX(var(--nWindowX));
          transform: translateX(var(--nWindowX));
}

.video-embed{
  margin-inline: auto;
  margin-bottom: 2rem;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  max-width: 42rem;
}


/* Blockquote main style */
.blockquote {
   position: relative;
   color: #ffffff;
   padding: 2rem 0;
   width: 100%;
   z-index: 1;
   align-self: center;
   border-top: solid 1px;
   border-bottom: solid 1px;
   max-width: 42rem;
   margin-bottom: 2rem;
}

/* Blockquote header */
.blockquote h1 {
   position: relative;
   color: #FFFFFF;
   font-size: 1.5rem;
   font-weight: 800;
   line-height: 2.2rem;
   margin: 0;
}

/* Blockquote right double quotes */
.blockquote:after {
   position: absolute;
   content: "”";
   color: rgba(255, 255, 255, 0.2);
   font-size: 6.5rem;
   line-height: 0;
   bottom: 0.1rem;
   right: 1rem;
}

/* Blockquote subheader */
.blockquote h4 {
   position: relative;
   color: #ffffffee;
   font-size: 1.3rem;
   font-weight: normal;
   line-height: 1;
   margin: 0;
   padding-top: 1.2rem;
   z-index: 1;
}

@-webkit-keyframes speakU {
  0% {
    -webkit-transform: translateY(0rem) scaleX(1);
            transform: translateY(0rem) scaleX(1);
  }

  50% {
    -webkit-transform: translateY(0.1rem) scaleX(0.9);
            transform: translateY(0.1rem) scaleX(0.9);
  }

  100% {
    -webkit-transform: translateY(0rem) scaleX(1);
            transform: translateY(0rem) scaleX(1);
  }
}


@keyframes speakU {
  0% {
    -webkit-transform: translateY(0rem) scaleX(1);
            transform: translateY(0rem) scaleX(1);
  }

  50% {
    -webkit-transform: translateY(0.1rem) scaleX(0.9);
            transform: translateY(0.1rem) scaleX(0.9);
  }

  100% {
    -webkit-transform: translateY(0rem) scaleX(1);
            transform: translateY(0rem) scaleX(1);
  }
}

@-webkit-keyframes speakL {
  0% {
    -webkit-transform: translateY(0rem) scaleX(1);
            transform: translateY(0rem) scaleX(1);
  }

  50% {
    -webkit-transform: translateY(-0.1rem) scaleX(0.9);
            transform: translateY(-0.1rem) scaleX(0.9);
  }

  100% {
    -webkit-transform: translateY(0rem) scaleX(1);
            transform: translateY(0rem) scaleX(1);
  }
}

@keyframes speakL {
  0% {
    -webkit-transform: translateY(0rem) scaleX(1);
            transform: translateY(0rem) scaleX(1);
  }

  50% {
    -webkit-transform: translateY(-0.1rem) scaleX(0.9);
            transform: translateY(-0.1rem) scaleX(0.9);
  }

  100% {
    -webkit-transform: translateY(0rem) scaleX(1);
            transform: translateY(0rem) scaleX(1);
  }
}

@-webkit-keyframes logo {
  0% {
    opacity: 0.3;
    -webkit-transform: scaleX(1.2);
            transform: scaleX(1.2);
  }

  100% {
    opacity: 1;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}

@keyframes logo {
  0% {
    opacity: 0.3;
    -webkit-transform: scaleX(1.2);
            transform: scaleX(1.2);
  }

  100% {
    opacity: 1;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}

@-webkit-keyframes character {
  0% {
    opacity: 0.2;
    scale: 0.7;
  }

  100% {
    opacity: 1;
    scale: 1;
  }
}

@keyframes character {
  0% {
    opacity: 0.2;
    scale: 0.7;
  }

  100% {
    opacity: 1;
    scale: 1;
  }
}


@media screen and (max-width:500px) {
  .menu{
    width: 2.2rem;
    height: 2.2rem;
  }
  .notch{
    padding: 0.1rem;
  }
  .page-title{
    margin-top: 5rem;
    text-align: center;
  }
  .speech{
    font-size: 0.9rem;
    padding: 0.6rem 0.9rem;
  }
  .text-body{
    font-size: 0.9rem;
    line-height: 1.7rem;
  }
  .numbered-list li{
    font-size: 0.9rem;
    line-height: 1.7rem;
  }

  .visible.speech:nth-of-type(odd) {
    -webkit-transform: translateY(var(--windowX));
        -ms-transform: translateY(var(--windowX));
            transform: translateY(var(--windowX));
  }
  
  .visible.speech:nth-of-type(even) {
    -webkit-transform: translateY(var(--nWindowX));
        -ms-transform: translateY(var(--nWindowX));
            transform: translateY(var(--nWindowX));
  }
}