kscss.css

.flex {
  display: flex; }

.align-center {
  align-items: center; }

.flex--center {
  justify-content: center; }

.flex-1 {
  flex: 1; }

.posa {
  position: absolute; }

.posr {
  position: relative; }

.txt-center {
  text-align: center; }

.flex--start {
  justify-content: flex-start; }

.flex--end {
  justify-content: flex-end; }

.align-start {
  align-items: flex-start; }

.align-end {
  align-items: flex-end; }

.strong {
  font-weight: bold; }

.light {
  font-weight: 300; }

.fit {
  object-fit: cover;
  object-position: center center; }

.columns {
  flex-direction: column; }

.rows {
  flex-direction: row; }

.flex--space-around {
  justify-content: space-around; }

.flex--space-between {
  justify-content: space-between; }

body {
  padding: 0;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: black; }

h1 {
  margin: 0px; }

.bignum {
  animation: glitnum 3s steps(100) infinite;
  color: #fff;
  text-align: center; }

@keyframes glitnum {
  0% {
    text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5;
    filter: blur(0); }
  1% {
    text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5;
    filter: blur(0); }
  2% {
    text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5;
    filter: blur(0); }
  3% {
    text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5;
    filter: blur(0); }
  4% {
    text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5;
    filter: blur(0); }
  5% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0); }
  6% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0); }
  7% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0); }
  8% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0); }
  9% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0); }
  10% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0); }
  11% {
    text-shadow: 1px 0 0 red, -1px 0 0 lime;
    filter: blur(0.5px); }
  12% {
    text-shadow: 1px 0 0 red, -1px 0 0 lime;
    filter: blur(0.5px); }
  13% {
    text-shadow: 1px 0 0 red, -1px 0 0 lime;
    filter: blur(0.5px); }
  14% {
    text-shadow: 1px 0 0 red, -1px 0 0 lime;
    filter: blur(0); }
  15% {
    text-shadow: 1px 0 0 red, -1px 0 0 lime;
    filter: blur(0); }
  16% {
    text-shadow: -3px 0 0 red, 3px 0 0 lime;
    filter: blur(0); }
  17% {
    text-shadow: -3px 0 0 red, 3px 0 0 lime;
    filter: blur(0); }
  18% {
    text-shadow: -3px 0 0 red, 3px 0 0 lime;
    filter: blur(0); }
  19% {
    text-shadow: -3px 0 0 red, 3px 0 0 lime;
    filter: blur(0); }
  20% {
    text-shadow: -3px 0 0 red, 3px 0 0 lime;
    filter: blur(0); }
  21% {
    text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime;
    filter: blur(0); }
  22% {
    text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime;
    filter: blur(0); }
  23% {
    text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime;
    filter: blur(0); }
  24% {
    text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime;
    filter: blur(0); }
  25% {
    text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime;
    filter: blur(0); }
  26% {
    text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime;
    filter: blur(0.5px); }
  27% {
    text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime;
    filter: blur(0.5px); }
  28% {
    text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime;
    filter: blur(0); }
  29% {
    text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime;
    filter: blur(0); }
  30% {
    text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime;
    filter: blur(0); }
  31% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0); }
  32% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0); }
  33% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0); }
  34% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0); }
  35% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0.5px); }
  36% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0.5px); }
  37% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0.5px); }
  38% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0); }
  39% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0); }
  40% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0); }
  41% {
    text-shadow: 45px 0 0 #0c33f5, -45px 0 0 lime;
    filter: blur(0); }
  42% {
    text-shadow: 0 0 0 #0c33f5, 0 0 0 lime;
    filter: blur(0); }
  43% {
    text-shadow: 1px 0 0 red, -1px 0 0 lime;
    filter: blur(0); }
  44% {
    text-shadow: 1px 0 0 red, -1px 0 0 lime;
    filter: blur(0); }
  45% {
    text-shadow: 1px 0 0 red, -1px 0 0 lime;
    filter: blur(0); }
  46% {
    text-shadow: 1px 0 0 red, -1px 0 0 lime;
    filter: blur(0.5px); }
  47% {
    text-shadow: -3px 0 0 red, 3px 0 0 lime;
    filter: blur(0.5px); }
  48% {
    text-shadow: -3px 0 0 red, 3px 0 0 lime;
    filter: blur(0); }
  49% {
    text-shadow: -3px 0 0 red, 3px 0 0 lime;
    filter: blur(0); }
  50% {
    text-shadow: -3px 0 0 red, 3px 0 0 lime;
    filter: blur(0); }
  51% {
    text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5;
    filter: blur(0); }
  52% {
    text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5;
    filter: blur(0); }
  53% {
    text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5;
    filter: blur(0); }
  54% {
    text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5;
    filter: blur(0); }
  55% {
    text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5;
    filter: blur(0.5px); }
  56% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0.5px); }
  57% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0.5px); }
  58% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0); }
  59% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0); }
  60% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0); }
  61% {
    text-shadow: 30px 0 0 red, -30px 0 0 lime;
    filter: blur(0); }
  62% {
    text-shadow: 0 0 0 red, 0 0 0 lime;
    filter: blur(0); }
  63% {
    text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5;
    filter: blur(0); }
  64% {
    text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5;
    filter: blur(0); }
  65% {
    text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5;
    filter: blur(0); }
  66% {
    text-shadow: 1px 0 0 red, -1px 0 0 #0c33f5;
    filter: blur(0.5px); }
  67% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0.5px); }
  68% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0); }
  69% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0); }
  70% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0); }
  71% {
    text-shadow: 50px 0 0 red, -50px 0 0 #0c33f5;
    filter: blur(0); }
  72% {
    text-shadow: 0 0 0 red, 0 0 0 #0c33f5;
    filter: blur(0); }
  73% {
    text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5;
    filter: blur(0); }
  74% {
    text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5;
    filter: blur(0); }
  75% {
    text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5;
    filter: blur(0); }
  76% {
    text-shadow: 3px 0 0 red, -3px 0 0 #0c33f5;
    filter: blur(0); }
  77% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0); }
  78% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0); }
  79% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0); }
  80% {
    text-shadow: -3px 0 0 red, 3px 0 0 #0c33f5;
    filter: blur(0); }
  81% {
    text-shadow: 1px 0 0 red, -1px 0 0 lime;
    filter: blur(0); }
  82% {
    text-shadow: 1px 0 0 red, -1px 0 0 lime;
    filter: blur(0); }
  83% {
    text-shadow: 1px 0 0 red, -1px 0 0 lime;
    filter: blur(0.5px); }
  84% {
    text-shadow: 1px 0 0 red, -1px 0 0 lime;
    filter: blur(0.5px); }
  85% {
    text-shadow: 1px 0 0 red, -1px 0 0 lime;
    filter: blur(0.5px); }
  86% {
    text-shadow: -3px 0 0 red, 3px 0 0 lime;
    filter: blur(0.5px); }
  87% {
    text-shadow: -3px 0 0 red, 3px 0 0 lime;
    filter: blur(0.5px); }
  88% {
    text-shadow: -3px 0 0 red, 3px 0 0 lime;
    filter: blur(0); }
  89% {
    text-shadow: -3px 0 0 red, 3px 0 0 lime;
    filter: blur(0); }
  90% {
    text-shadow: -3px 0 0 red, 3px 0 0 lime;
    filter: blur(0); }
  91% {
    text-shadow: 60px 0 0 lime, -60px 0 0 #0c33f5;
    filter: blur(0); }
  92% {
    text-shadow: 0 0 0 lime, 0 0 0 #0c33f5;
    filter: blur(0); }
  92% {
    text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime;
    filter: blur(0); }
  93% {
    text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime;
    filter: blur(0); }
  94% {
    text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime;
    filter: blur(0); }
  95% {
    text-shadow: 0.8px 0 0 #0c33f5, -0.8px 0 0 lime;
    filter: blur(0); }
  96% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0); }
  97% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0); }
  98% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0); }
  99% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0); }
  100% {
    text-shadow: -3px 0 0 #0c33f5, 3px 0 0 lime;
    filter: blur(0); } }

section {
  padding: 0px 50px 0px 50px; }

.fact {
  text-transform: uppercase; }

.part1 {
  background: darkgreen;
  height: 100vh; }
  .part1 .bloodline {
    width: 390.166667px;
    height: 154.5px; }
  .part1 h1 {
    font-size: 30px;
    color: transparent;
    letter-spacing: 3px;
    text-shadow: 0 0 6px white; }

.part2 {
  background: darkblue;
  height: 100vh; }
  .part2 h1 {
    font-size: 30px;
    color: white;
    letter-spacing: 3px;
    text-shadow: 0 0 6px white; }
  .part2 .cigarette {
    width: 274.250001px;
    height: 108.25px;
    margin-right: 190px; }

.part3 {
  background: darkred;
  height: 100vh; }
  .part3 h1 {
    font-size: 30px;
    cursor: pointer;
    color: white;
    letter-spacing: 3px;
    text-shadow: 0 0 6px white; }

.part4 {
  background: black;
  height: 100vh; }
  .part4 h1 {
    font-size: 30px;
    cursor: pointer;
    color: white;
    letter-spacing: 3px;
    text-shadow: 0 0 6px white; }

.part5 {
  background: #31302f;
  height: 100vh; }
  .part5 a {
    text-decoration: none; }
  .part5 h1 {
    font-size: 30px;
    cursor: pointer;
    color: white;
    letter-spacing: 3px;
    text-transform: uppercase; }
    .part5 h1:hover {
      color: transparent;
      text-shadow: 0 0 90px white; }

.enter {
  cursor: pointer; }

.main-body {
  background: white; }

.firstpage {
  height: 100vh; }

li {
  list-style: none;
  margin-left: 20px;
  font-weight: 100; }

.infopart {
  padding: 50px 90px 30px 90px; }

a {
  text-decoration: none; }

.info {
  padding-top: 80px;
  font-size: 20px;
  width: 60%; }

.gofc {
  padding: 0px 0px 0px 0px; }

.circle {
  padding: 40%;
  border: 2px solid black;
  border-radius: 40%;
  margin-bottom: 10px; }

.glitch {
  font-size: 130px;
  line-height: 1;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  text-decoration: none;
  color: white; }
  .glitch:before, .glitch:after {
    display: block;
    content: 'Enter Site';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: .8; }
  .glitch:after {
    color: #f0f;
    z-index: -2; }
  .glitch:before {
    color: #0ff;
    z-index: -1; }
  .glitch:hover:before {
    animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite; }
  .glitch:hover:after {
    animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite; }

@keyframes glitch {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0); }
  20% {
    -webkit-transform: translate(-5px, 5px);
    transform: translate(-5px, 5px); }
  40% {
    -webkit-transform: translate(-5px, -5px);
    transform: translate(-5px, -5px); }
  60% {
    -webkit-transform: translate(5px, 5px);
    transform: translate(5px, 5px); }
  80% {
    -webkit-transform: translate(5px, -5px);
    transform: translate(5px, -5px); }
  to {
    -webkit-transform: translate(0);
    transform: translate(0); } }

/* MAIN PART OF THE WEBSITE */
/* NAVIGATION*/
.nav {
  position: fixed;
  z-index: 1;
  width: 100%; }

.lg {
  margin-left: 30px;
  margin-top: 10px; }

.logo {
  width: 87.625px;
  height: 63px; }

.top {
  padding-top: 20px; }

.mi {
  margin-right: 30px;
  border: solid 2px grey;
  padding: 10px 20px 5px 20px;
  cursor: pointer; }
  .mi:hover {
    transition-duration: 5s;
    transition-delay: 2s; }

#menuicon {
  border-bottom: solid 2px grey;
  margin-bottom: 5px;
  cursor: pointer;
  width: 27px; }

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 999;
  top: 0;
  right: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px; }

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s; }

.sidenav a:hover {
  color: #f1f1f1; }

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px; }

#main-body {
  transition: margin-left .5s; }

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px; }
  .sidenav a {
    font-size: 18px; } }

/* MAIN page */
h1 {
  color: #fff;
  margin: 0;
  padding: 0; }

.section {
  overflow: hidden; }

#myVideo {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-color: black;
  /* in case the video doesn't fit the whole page*/
  /*background-image:  our video ;*/
  background-position: center center;
  background-size: contain;
  object-fit: cover;
  /*cover video background */
  z-index: 3; }

#section0 .layer {
  position: absolute;
  z-index: 4;
  width: 100%;
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.om {
  padding: 0px 120px; }
  .om p {
    color: white; }

.or {
  padding: 0px 120px; }
  .or p {
    color: white; }

#section0 {
  overflow: hidden; }

#infoMenu li a {
  color: #fff; }

video::-webkit-media-controls {
  display: none !important; }

#rect {
  border: 2px solid black;
  padding: 220px 150px; }

.rectangleone {
  background: lightblue; }

.rectangletwo {
  background: lightgreen; }

.rectanglethree {
  background: lightpink; }

.place {
  padding: 190px 450px;
  background: lightblue; }

.circlee {
  border: 2px solid grey;
  padding: 10px 14px;
  border-radius: 80px;
  cursor: pointer; }

.fa-angle-down {
  margin: 0;
  font-size: 1.3em; }

.layer {
  margin-top: 230px; }

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%; } }

.hidden {
  opacity: 0; }

.visible {
  opacity: 1; }

.skip {
  color: #808080;
  position: absolute;
  bottom: 15px;
  right: 15px;
  cursor: pointer;
  padding: 5px 16px;
  border: 1px #808080 solid; }

.skip:hover {
  color: #d3d3d3;
  border-color: #d3d3d3; }

#fp-nav {
  display: none; }

.fp-next {
  margin-right: 50px; }

.fp-prev {
  margin-left: 50px; }

.lgb {
  position: absolute;
  bottom: 10px;
  left: 15px;
  z-index: 5; }

.logo {
  height: auto; }