body {

  position: fixed;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

}

body {

  position: relative !important;

  width: 100%;

  height: 100%;

  background-color: #0e010a;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  align-items: center;

  overflow-x: hidden;

  overflow-y: scroll;

  -webkit-overflow-scrolling: touch;

}

::-webkit-scrollbar {

  display: none;

}

.landingpage {

  position: relative;

  width: 100%;

  max-width: 750px;

  background-color: #0e010a;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  align-items: center;

}

.landingpage > .top {

  position: relative;

  width: 100%;

  height: 100vh;

  /* background-image: url('../images/drama-bg1.jpg'); */

  background-position: top center;

  filter: blur(50px);

  background-size: 300% 300%;

  background-repeat: no-repeat;

}

.landingpage > .top::after {

  position: absolute;

  content: '';

  width: 100%;

  height: 100%;

  top: 0;

  left: 0;

  z-index: 2;

  /* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.95)); */

  background: linear-gradient(

    to bottom,

    rgba(0, 0, 0, 0) 0%,

    rgba(0, 0, 0, 0) 32rem,

    rgba(0, 0, 0, 0.1) 32.1rem,

    rgba(0, 0, 0, 0.2) 30%,

    rgba(0, 0, 0, 0.5) 60%,

    rgba(0, 0, 0, 0.8) 85%,

    rgba(0, 0, 0, 1) 100%

  );

  backdrop-filter: blur(1px);

  pointer-events: none;

}

.loading {

  position: absolute;

  width: 100%;

  height: 100vh;

  left: 0;

  top: 0;

  z-index: 5;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}

.circle-loader {

  width: 3rem;

  height: 3rem;

  border: 0.5rem solid #e0e0e0;

  border-top: 0.5rem solid #3b82f6;

  border-radius: 50%;

  animation: spin 1s linear infinite;

}



@keyframes spin {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}

.landingpage > .ctx {

  position: absolute;

  width: 100%;

  height: 100vh;

  left: 0;

  top: 0;

  z-index: 3;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  align-items: center;

}

.icon {

  margin: 6rem 0 5rem;

  z-index: 9;

  display: none;

  width: 48.8rem;

  height: 11.7rem;

  background-image: url('../images/icon.png');

  background-size: 100% 100%;

  background-repeat: no-repeat;

}

.skip-ctx {

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 9;

  margin-top: 3rem;

  width: 40rem;

  height: 54.4rem;

  border-radius: 3rem;

  background-size: 100% 100%;

  background-repeat: no-repeat;

}

.icon-play {

  width: 10rem;

  height: 10rem;

  display: none;

  background-image: url('../images/play-btn.png');

  background-size: 100% 100%;

  background-repeat: no-repeat;

  margin-right: 1rem;

}

.skip-title {

  width: 100%;

  margin-top: 5rem;

  padding: 0 1.5rem;

  font-size: 3.2rem;

  font-weight: bold;

  color: #fff;

  text-align: center;

}

.landingpage > .ctx > .btn {

  position: fixed;

  display: none;

  z-index: 99;

  bottom: 10rem;

  width: 64.3rem;

  height: 19.5rem;

  animation: scaleP 2s infinite;

  background-image: url('../images/btn1.png');

  background-size: 100% 100%;

  background-repeat: no-repeat;

}

.landingpage > .top > .btn-ctx {

  position: absolute;

  width: 100%;

  top: 100rem;

  display: flex;

  justify-content: center;

  align-items: center;

}

.landingpage > .top > .btn-fixed {

  position: fixed !important;

  top: unset;

  bottom: 0rem;

  width: 100%;

  height: 19rem;

  background-color: rgba(0, 0, 0, 0.2);

}

.landingpage > .top > .btn-ctx > .btn {

  position: relative;

  width: 53.5rem;

  height: 8.5rem;

  animation: scaleP 1s infinite;

  background-image: url('../images/drama-btn.png');

  background-size: 100% 100%;

  background-repeat: no-repeat;

}

.landingpage > .top > .btn-ctx > .btn > .arrow {

  position: absolute;

  z-index: 2;

  bottom: -4rem;

  right: -4rem;

  width: 7.9rem;

  height: 7.7rem;

  animation: arrowX 0.5s infinite;

  background-image: url('../images/drama-arrow.png');

  background-size: 100% 100%;

  background-repeat: no-repeat;

}

@keyframes scaleP {

  0% {

    transform: scale(0.9);

  }

  50% {

    transform: scale(1.1);

  }

  100% {

    transform: scale(0.9);

  }

}

@keyframes arrowX {

  0% {

    right: -5rem;

    bottom: -5rem;

  }

  50% {

    right: -2rem;

    bottom: -2rem;

  }

  100% {

    right: -5rem;

    bottom: -5rem;

  }

}