@font-face {
    font-family: HCGleam;
    src: url("fonts/HCGleam-Reg.otf") format("opentype");
}

@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200;400;700&display=swap');

        html, body, #main {
            height: 100%;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body, input, textarea, select, button {
            font-family: "Inter", sans-serif;
            font-size: 12px;
        }
        :root {
            -webkit-font-smoothing: antialiased;
        }
        * {
            box-sizing: border-box;
            -webkit-font-smoothing: inherit;
        }
        h1, h2, h3, h4, h5, h6, p, figure {
            margin: 0;
        }
		
		h2, h3, h4, h5, h6
		
		{
		font-family: 'Assistant', sans-serif;
		 text-transform: uppercase;
		}
		
		
		h1 {
		 font-family: HCGleam;
		 text-transform: uppercase;
		  font-size: 36px; /* Some tweener fallback that doesn't look awful */ 
		 font-size: 11vw;
		 font-weight: 200;
		 text-align: justify;
		 text-align-last: justify;

		 }
		 
		 h2 {
		  font-size: 20px; /* Some tweener fallback that doesn't look awful */ 
		 font-size: 4vw;
		 font-weight: 800;
		  text-align: justify;
		 text-align-last: justify;
		 }
		 
		 h3 {
		  font-size: 20px; /* Some tweener fallback that doesn't look awful */ 
		 font-size: 5vw;
		 font-weight: 500;
		 
		 }
		 
		  h3 {
		  font-size: 16px; /* Some tweener fallback that doesn't look awful */ 
		 font-size: 3vw;
		 font-weight: 200;
		 }
		 
		 	  h4 {
		  font-size: 22px;
		 font-weight: 600;
		 }
		 
        body {
              color: #3f05fa;
            background-color: #13100e;
			background-image: url(img/grainer.gif);
			  background-attachment: fixed;
			background-repeat: no-repeat;
			background-size: cover;
			font-family: 'Assistant', sans-serif;
			font-size: 1.3vw;
			font-weight: 100;
			overflow-x: hidden;
        }
		
		
		.bloody {
		width: 100%;
		height: auto;
		background-image: url(img/ghostinthemachinebeta.gif);
		background-repeat: no-repeat;
		background-size: cover;
		margin: 0 auto;
		text-align: justify;
		}
		
		.blue {
		width: 100%;
		height: auto;
		background-image: url(img/ghostinthemachine.gif);
		background-repeat: no-repeat;
		background-size: cover;
		PADDING-TOP: 20%;
		margin: 0 auto;
		text-align: justify;
		}
		
		.container {
		width:100%;
		margin: 0 auto;
		box-sizing: border-box;
		}
		
		.throat	
		{
		max-width: 90vw;
		margin:  0 auto;
		padding: 80px 20px 0px 20px;
		box-sizing: border-box;
		text-align: left;
		}
		
		.throat h2 {
		font-size: 5vw;
		}
		
		.head {
		color: #141413;
		padding: 10px;
		margin: 0 auto;
		background-color: #f4f3e8;
		height: 50px;
		overflow: hidden;
		position: fixed;
		z-index: 800
		}
	
		
			.hell{
		margin: 0 auto;
		height: 50px;
		position: fixed;
		bottom: 0;
		z-index: 999;
		width: 100%;
		height: 80px;
		}
		
			.hell iframe {
			width: 250px;
			height: auto;
			border-radius: 100%;
	}
		
		
		.chest
		{
		color: #141413;
		padding: 10px;
		margin: 0 auto;
		box-sizing: border-box;
		background-color: #f4f3e8;
		height: 12vw;
		overflow: hidden;
		z-index: 900;
		position: relative;
		width: 100%;
		}
		
			.hips
		{
		color: #353530;
		padding: 10px;
		margin: 0 auto;
		box-sizing: border-box;
		background-color: #fff;
		height: 10vw;
		overflow: hidden;
		z-index: 900;
		position: relative;
		width: 100%;
		}
		
		
			.feet
		{
		color: #bfc5ff;
		padding: 10px;
		margin: 0 auto;
		box-sizing: border-box;
		background-color: #fc0000;
		height: 10vw;
		overflow: hidden;
		position: relative;
		width: 100%;
		}
		
		
		.glitch {
		font-family: "Varela", sans-serif;
		 color: #f3f0e6;
		 box-sizing: border-box;
  font-size: 7vw;
  position: relative;
  width: 100%;
	padding: 0px 60px 0px 60px;
  margin: 0 auto;
}

.rotates {
  -webkit-transform: scale(1.1) rotate(4deg);
  transform: scale(1.1) rotate(4deg);
}

@keyframes noise-anim {
  0% {
    clip-path: inset(85% 0 2% 0);
  }
  5% {
    clip-path: inset(43% 0 21% 0);
  }
  10% {
    clip-path: inset(14% 0 40% 0);
  }
  15% {
    clip-path: inset(59% 0 8% 0);
  }
  20% {
    clip-path: inset(65% 0 33% 0);
  }
  25% {
    clip-path: inset(33% 0 40% 0);
  }
  30% {
    clip-path: inset(72% 0 13% 0);
  }
  35% {
    clip-path: inset(14% 0 5% 0);
  }
  40% {
    clip-path: inset(29% 0 7% 0);
  }
  45% {
    clip-path: inset(42% 0 11% 0);
  }
  50% {
    clip-path: inset(83% 0 11% 0);
  }
  55% {
    clip-path: inset(11% 0 79% 0);
  }
  60% {
    clip-path: inset(80% 0 13% 0);
  }
  65% {
    clip-path: inset(8% 0 43% 0);
  }
  70% {
    clip-path: inset(29% 0 15% 0);
  }
  75% {
    clip-path: inset(82% 0 11% 0);
  }
  80% {
    clip-path: inset(91% 0 7% 0);
  }
  85% {
    clip-path: inset(38% 0 16% 0);
  }
  90% {
    clip-path: inset(97% 0 2% 0);
  }
  95% {
    clip-path: inset(24% 0 8% 0);
  }
  100% {
    clip-path: inset(31% 0 34% 0);
  }
}
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 red;
  top: 0;
  color: #f3f0e6;
  background-color: #3f05fa;
  overflow: hidden;
  animation: noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim-2 {
  0% {
    clip-path: inset(17% 0 40% 0);
  }
  5% {
    clip-path: inset(39% 0 22% 0);
  }
  10% {
    clip-path: inset(14% 0 30% 0);
  }
  15% {
    clip-path: inset(38% 0 3% 0);
  }
  20% {
    clip-path: inset(46% 0 43% 0);
  }
  25% {
    clip-path: inset(28% 0 12% 0);
  }
  30% {
    clip-path: inset(93% 0 6% 0);
  }
  35% {
    clip-path: inset(92% 0 3% 0);
  }
  40% {
    clip-path: inset(37% 0 10% 0);
  }
  45% {
    clip-path: inset(42% 0 14% 0);
  }
  50% {
    clip-path: inset(80% 0 13% 0);
  }
  55% {
    clip-path: inset(94% 0 6% 0);
  }
  60% {
    clip-path: inset(17% 0 2% 0);
  }
  65% {
    clip-path: inset(83% 0 5% 0);
  }
  70% {
    clip-path: inset(4% 0 69% 0);
  }
  75% {
    clip-path: inset(8% 0 12% 0);
  }
  80% {
    clip-path: inset(42% 0 45% 0);
  }
  85% {
    clip-path: inset(60% 0 8% 0);
  }
  90% {
    clip-path: inset(27% 0 63% 0);
  }
  95% {
    clip-path: inset(17% 0 81% 0);
  }
  100% {
    clip-path: inset(28% 0 13% 0);
  }
}
.glitch::before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 blue;
  top: 0;
  color: #f3f0e6;
background-color: #3f05fa;
  overflow: hidden;
  animation: noise-anim-2 15s infinite linear alternate-reverse;
}

.purgatory {
margin: 0 auto;
max-width:90vw;
}

.hell1 {
width: 45vw; height: auto; FLOAT: LEFT; box-sizing: border-box
}

.hell1 div {
font-size:6vw;
}

.hell2 {
width: 45vw; height: auto; FLOAT: RIGHT; box-sizing: border-box; background-color: #4800ff; color: #79ffdb; background-image: url(img/knowledge.gif);
			background-repeat: no-repeat;
			background-size: cover; background-position: top left;
}


.hell2 h3 {
font-size: 7vw; text-align: justify;
}

.nirvana {
		color: #141413;
		padding: 200px 10px 200px 10px;
		margin: 0 auto;
		width: 100vw;
		background-color: #f4f3e8;
		box-sizing: border-box;
		background-image: url(img/brave.gif);
			background-repeat: no-repeat;
			background-size: 40%; 
			background-position: center right;
		}

.nirvana h2 {
		border-right: solid 10px #141413;
		text-align-last: unset;
		text-align: right;
		padding-right: 3vw;
		width: 60vw;
		font-size: 8vw;
		font-weight: 500;
				
}

.truth {
width: 100%;
max-width: 1200px;
margin: 0 auto; 
box-sizing: border-box;
padding: 130px 10px 30px 10px; 
text-align: justify;
}


.doubt {
		color:  #f4f3e8;
		padding: 200px 10px 200px 10px;
		margin: 0 auto;
		width: 100vw;
		box-sizing: border-box;
		}
		
.stop {
width: 90vw; 
max-width: 900px;
margin: 0 auto; 
text-align: justify;
}


 #overlay {
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.98);
      z-index: 9999;
    }

    #module {
      background-color: #fff;
      padding: 2vw 3vw 2vw 3vw;
      border-radius: 5px;
       max-width: 450px;
       width: 100%;
       box-sizing: border-box;
      text-align: center;
      color: #000;
      margin: 5%;
    }
    
    #module h2 {
    font-size: 20pt;
    font-weight: 800;
    text-align: center;
    text-align-last: center;
    }
    
    #module p{
    font-size:12pt;
    font-weight: 500;
    }

    #accept-btn {
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 10px 20px;
    background-color: #007bff;
    border: none;
    color: #fff;
    font-size: 12pt;
    cursor: pointer;
    }
		
@media (max-width: 900px) {
    
    
.nirvana {
padding: 70px 10px 70px 10px
}

.truth {
padding: 70px 10px 30px 10px; 
}

.doubt {
padding: 40px 10px 130px 10px
}
}

@media (max-width: 600px) {
.doubt h1 {
font-size:16vw;
}

.stop h3 {
font-size: 4.5vw;
}
.nirvana h2 {
		font-size: 14vw;			
}
.nirvana {
padding: 30px 10px 30px 10px
}

.truth {
padding: 30px 10px 30px 10px; 
}

.doubt {
padding: 70px 10px 200px 10px
}

    
}

.clear {
  clear: both;
}