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

.container {
  justify-content: center;
  align-items: center;
  position: relative;
  display: flex;
  height: 100vh;
}

@font-face {
  font-family: "upheaval";
  src: url("/fonts/upheaval/upheavtt.ttf");
}

@font-face {
  font-family: "VCR";
  src: url("/fonts/vcr_osd_mono/VCR_OSD_MONO_1.001.ttf");
}

@keyframes crazy-shake {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate(1px, 2px);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translate(-2px, -1px);
  }
}


/*home start*/


.homebody {
  background-color: black;
  justify-content: center;
  align-items: center;
}

#homecont {
  display: flex;
}

.pc {
  transform: translateX(30%);
  position: relative;
width: 65%;
  object-fit: contain;
}

.navcont {
  pointer-events: none;
  display: inline;
  width: 60%;
  position: absolute;
  z-index: 20;
}

#navb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#navb {
  pointer-events: auto;
  object-fit: contain;
  width: 20%;
  height: 20%;
  overflow: hidden;

}

#navb:hover {
  animation: crazy-shake 0.5s ease-in-out infinite;
}

.nav3 {
  scale: calc(60%);
}

		.marquee {
      top: 0;
      position: absolute;
			display: flex ;
			overflow: hidden ;
			white-space: nowrap ;
			width: 100% ;
		}
		.marquee__item {
        color: white;
  font-family: "VCR";
      color: white;
			animation-duration: 15s ;
			animation-iteration-count: infinite ;
			animation-name: marquee-content ;
			animation-timing-function: linear ;
			padding: 5px 15px 5px 15px ;
		}

    		.marquee-left {
      bottom: 0;
      position: absolute;
			display: flex ;
			overflow: hidden ;
			white-space: nowrap ;
			width: 100% ;
		}
		.marquee__item-left {
        color: white;
  font-family: "VCR";
      color: white;
			animation-duration: 15s ;
			animation-iteration-count: infinite ;
			animation-name: marquee-content-left ;
			animation-timing-function: linear ;
			padding: 5px 15px 5px 15px ;
		}


@keyframes marquee-content {
	
	from {
		transform: translateX( 0% );
	}
	to {
		transform: translateX( -100% );
	}
}

@keyframes marquee-content-left {
	
	from {
		transform: translateX( -100% );
	}
	to {
		transform: translateX( 0% );
	}
}

/*home end*/

/*index  start*/

.indexbody {
  background-color: #000000;
  justify-content: center;
  align-items: center;
}


.accesscodetitle {
  font-family: "upheaval";
  color: white;
  filter: drop-shadow(1px 1px 0 black)
          drop-shadow(-1px 1px 0 black)
          drop-shadow(1px -1px 0 black)
          drop-shadow(-1px -1px 0 black);
}

.accesstext {
  color: white;
  font-family: "VCR";
  filter: drop-shadow(2px 2px 0 black)
          drop-shadow(-2px 2px 0 black)
          drop-shadow(2px -2px 0 black)
          drop-shadow(-2px -2px 0 black);
}

.enter {
    font-family: "VCR";
  background: none;
  border: solid 1px white;
  margin: 5px;
  color: white;
}

#indexcont {
  border: white 5px dashed;
  border-radius: 50px;
  margin: 2%;
  height: 90vh;
  overflow: hidden;
}

.Grenade {
  position: absolute;
  z-index: -10;
  left: 0;
  width: 50%;
  rotate: 50deg;
}

.instant-access {
  padding: 15px;
  margin: 15px;
  border: dashed 5px white;
  border-radius: 10px;
  background: black;
      font-family: "VCR";
  font-size: 10px;
  color: white;
}

.instant-access:active {
  margin-top: 10px;
  background: white;
    color: black;
}

/*index end*/

/*secret start*/
.secretbody {
  background-color: #000000;
  justify-content: center;
  align-items: center;
}
#secretcont {
    justify-content: center;
  align-items: center;
  flex-direction: column;
}

.deathrow  {
  margin: 5%;
   animation: crazy-shake 0.5s ease-in-out infinite;
}

.top-text {
    font-family: "VCR";
  font-size: 40px;
  color: white;
}

.download {
    font-family: "upheaval";
  padding: 2%;
}

.download:hover {
  background-color: #000000;
  border: white 5px solid;
  color: white;
}

.download:active {
  letter-spacing: 5px;
  background-color: white;
  color: black;
    font-family: "upheaval";
  padding: 2%;
}
/*secret end*/

/*mobile sizing!!*/
@media (max-width: 800px) {
.navcont {
  pointer-events: none;
  display: inline;
  width: 90%;
  position: absolute;
  z-index: 20;
}

.pc {
  transform: translateX(30%);
  position: relative;
width: 75%;
  object-fit: contain;
}
}