* {
	margin: 0px;
	padding: 0px;
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../assets/fonts/MaterialIcons.woff2) format('woff2');
}
@font-face {
  font-family: 'Share Tech Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Share Tech Mono'), local('ShareTechMono-Regular'), url(../assets/fonts/ShareTechMono.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Ailerons;
  src: url(../assets/fonts/Ailerons-Regular.otf);
}
@font-face {
  font-family: square_block;
  src: url(../assets/fonts/square_block.ttf);
}
@font-face {
    font-family: 'Raptor';
    src: url('../assets/fonts/Raptor.woff2') format('woff2'),
        url('../assets/fonts/Raptor.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: instruction;
  src: url(../assets/fonts/Instruction_Bold.otf);
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes blink {
  to {
    visibility: hidden;
  }
}
@keyframes roll {
    0%   {background-position: 0 0;}
    100% {background-position: 0 100px;}
}
@keyframes growin {
    from { 
		transform: scale(0); 
		visibility: visible; 
	}
    to { 
		transform: scale(1); 
		visibility: visible; 
	}
}
@keyframes textshow {
    0% { 
		transform: translateY(-30px);
		visibility: visible;
		opacity: 0;
		color:red;
	}
    50% {
		transform: translateY(10px);
		visibility: visible;
		opacity: 1; 
	}
	100% {
		transform: translateY(0px);
		visibility: visible;
		opacity: 1; 
		color:white;
	}
}
@keyframes textshow2 {
    0% { 
		transform: translateY(30px);
		visibility: visible;
		opacity: 0;
		color:red;
	}
    50% {
		transform: translateY(-10px);
		visibility: visible;
		opacity: 1; 
	}
	100% {
		transform: translateY(0px);
		visibility: visible;
		opacity: 1; 
		color:white;
	}
}
@keyframes textshowside {
    0% { 
		left: 0px;
		visibility: visible;
		opacity: 0;
		color:white;
	}
	100% {
		left: 180px;
	visibility: visible;
		opacity: 1; 
		color: #fc3e3e;
	}	
}
@keyframes textshowsidemobile {
    0% { 
		left: 0px;
		visibility: visible;
		opacity: 0;
		color:white;
	}
	100% {
		left: 160px;
		visibility: visible;
		opacity: 1; 
		color: #fc3e3e;
	}
}
@keyframes rollin {
    0% { 
		transform: translateY(30px);
		opacity: 0;
		color:red;
	}
	100% {
		transform: translateY(0px);
		opacity: 1; 
		color:white;
	}
}
@keyframes go-up {
    0% { 
		transform: translateY(0%);
	}
	100% {
		transform: translateY(-105%);
	}
}
@keyframes go-down {
	0% { 
		transform: translateY(0%);
	}
	100% {
		transform: translateY(105%);
	}
}
@keyframes slidetitleout {
    0% { 
		transform: translateY(0px);
	}
	100% {
		transform: translateY(-100px);
	}
}
@keyframes slidetitlein {
	0% { 
		transform: translateY(-100px);
	}
	100% {
		transform: translateY(0px);
	}
}
@keyframes slidelinkout {
    0% { 
		transform: translateY(0px);
	}
	100% {
		transform: translateY(100px);
	}
}
@keyframes slidelinkin {
	0% { 
		transform: translateY(100px);
	}
	100% {
		transform: translateY(0px);
	}
}


html, body {
	margin: 0;
	height: 100%;
	background-color: black;
}

#pagecontainer {
	height: 100%;
	width: 100%;
	scroll-snap-type: y proximity;
	overflow-y: scroll;
}

#pagecontainer::-webkit-scrollbar {
  width: 10px;
}
#pagecontainer::-webkit-scrollbar-track {
  background-color: #1c1c1c;
}
#pagecontainer::-webkit-scrollbar-thumb {
  background-color: #6c6c6c;
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.left {
	float: left;
}

.right {
	float: right;
}

.linkBase {
	text-decoration: none;
}

.noselect {
	-webkit-touch-callout: none;
    -webkit-user-select: none; 
	-khtml-user-select: none;
	-moz-user-select: none; 
    -ms-user-select: none; 
	user-select: none;
}

.background {
	position: absolute;
	top: 0;
	left: 0;
	right:0;
	bottom:0;
	z-index: 0;
	overflow: hidden;
	text-align: center;
}

#video {
	position: absolute;
	right: 0;
	top: 0;
	min-width: 100%; 
	min-height: 100%;
	opacity: 0;
	z-index: -1;
}

.loaded {
	animation: fadein 3s ease forwards;
}

.vidoverlay {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: .07;
	background: url('../assets/img/scanlines.jpg');
	background-size: cover;
	animation: roll 10s linear infinite;
	z-index: -1;
}

.darker {
	height: 100%;
    z-index: 0;
    background-color: #000000b3;
}

.contentlayer {
	position: relative;
	width: 100%;
	height: 100vh;
	z-index: 1;
	overflow: hidden;
	scroll-snap-align: start;
}

.centered {
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	font-family: Ailerons, sans-serif;
	text-align: center;
	color:#fc3e3e;
}

.centered .pHeader {
	font-size: 150px;
    
}

.centered .pSub {
	font-size: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 15px;
}

.centered .pSub .text-left,
.centered .pSub .text-right {
    display: flex;
    letter-spacing: 0.15em;
}

.centered .pSub span {
    display: inline-block;
}

.centered span {
	visibility: hidden;
	display: inline-block;
	animation: textshow 1s cubic-bezier(0.72, 0.01, 0.29, 1) forwards;
}

.centered .btm {
	animation-name: textshow2;
}

.centered .btm1 {
	margin-left: 50px;
	animation-name: textshow2;
}

.centered .pHeader :nth-child(1) {
	animation-delay: 0s;
}
.centered .pHeader :nth-child(2) {
	animation-delay: 0.5s;
}
.centered .pHeader :nth-child(4) {
	animation-delay: 1s;
}

.centered .pSub :nth-child(1) {
	animation-delay: 1.5s;
}
.centered .pSub :nth-child(2) {
	animation-delay: 1.65s;
}
.centered .pSub :nth-child(3) {
	animation-delay: 1.80s;
}
.centered .pSub :nth-child(4) {
	animation-delay: 1.95s;
}
.centered .pSub :nth-child(5) {
	animation-delay: 2.10s;
}
.centered .pSub :nth-child(6) {
	animation-delay: 2.25s;
}
.centered .pSub :nth-child(7) {
	animation-delay: 2.40s;
}
.centered .pSub :nth-child(8) {
	animation-delay: 2.55s;
}
.centered .pSub :nth-child(9) {
	animation-delay: 2.70s;
}
.centered .pSub :nth-child(10) {
	animation-delay: 2.85s;
}

.localFooter {
	position: absolute;
    bottom: 0;
	text-align: center;
	width: 100%;
}

.localFooterCentered {
	position: relative;
	font-family: "Share Tech Mono", monospace;
	display: inline-block;
	color: white;
	padding: 18px;
	border-left: 2px white solid;
	opacity: 0;
	animation: rollin 1s ease-in 3.30s forwards;
}

.localHeader {
	position: absolute;
    top: 0;
	text-align: center;
	width: 100%;
}

.circleimg {
	display: inline-block;
	border: 3px #ff5858 solid;
	width: 90px;
	height: 90px;
	margin: 30px;
	border-radius: 100px;
	background-size: 70px 70px;
    background-position: center;
    background-repeat: no-repeat;
	overflow: hidden;
	transform: scale(0);
	animation: growin 0.75s ease-out 3.30s forwards;
}

.circleimg.github {
	border-color: black;
	background-color: black;
    background-image: url(../assets/img/githubwhite.png);
}
.circleimg.steam {
	border-color: black;
	background-color: black;
	background-size: 60px 60px;
    background-image: url(../assets/img/steamwhite.png);
}
.circleimg.twitter {
	border-color: black;
	background-color: black;
    background-image: url(../assets/img/twitterwhite.png);
}

.circleimg img {
	transition: all 0.2s ease-in;
	opacity: 0;
	width: 90px;
	height: 90px;
}

.circleimg img:hover {
	opacity: 1;
}

.pIcons {
	visibility: hidden;
	letter-spacing: 35px;
	margin-left: 35px;
	animation: growin 1s ease 3s forwards;
}

.pIcons.bottom {
	margin-top: 30px;
}

.webcamDesc div {
	opacity: 0;
	color: white;
    font-family: "Share Tech Mono", monospace;
    margin: 5px 10px;
	font-size: 14px;
}

.webcamDesc span {
	color: red;
	animation: blink 2s steps(2, start) infinite;
}

.audioplayer {
	position: absolute;
	bottom: 0px;
	right: 10px;
	font-size: 0px;
	color: #fc3e3e;
	opacity: 0;
	animation: rollin 1s ease-in 3.30s forwards;
}

.audioplayer #playbutton {
	position: absolute;
    right: 0px;
    bottom: 8px;
}

.audioplayer #playbutton .material-icons {
	font-size: 40px;
	cursor: pointer;
}

.audioplayer #audiodesc {
	font-size: 16px;
    font-family: "Share Tech Mono", monospace;
    padding: 18px;
    margin: 0px 20px;
}

.page1 {
	z-index: 2;
	background-color: #030303;
}

.page1:before {
    content: "";
    background: radial-gradient(circle, rgba(250, 250, 250, 0) 50%, rgb(0, 0, 0) 100%);
	background: -webkit-radial-gradient(circle, rgba(250, 250, 250, 0) 50%, rgb(0, 0, 0) 100%);
    height: 100vh;
    width: 100vw;
    position: absolute;
}

.sidetext {
	font-size: 150px;
    transform: rotateZ(-90deg);
    font-weight: 600;
    position: absolute;
    min-width: 100vh;
    font-family: "Share Tech Mono", monospace;
    bottom: 0;
    left: 0px;
	opacity: 0;
	color: white;
    transform-origin: 0% 100%;
    text-align: center;
    color: #fc3e3e;
    line-height: 150px;
}

.backgroundtext {
	position: absolute;
	top: 0;
	left: 0;
	width: 110%;
    font-family: "Share Tech Mono", monospace;
	line-height: 1em;
    font-size: 2em;
	color: #4f1711/*#5a1a13*/;
	z-index: -1;
}

.centercontent {
	color: white;
    font-family: "Share Tech Mono", monospace;
    width: 70%;
    position: relative;
	top: 50%;
	margin: 0 auto;
	transform: translateY(-50%);
    font-size: 4em;
}

.typingChar {
	animation: blink 2s steps(2, start) 5s infinite;
}

.page2 {
	background-color: #181b20;
    background-size: 200%;
    background-repeat: no-repeat;
    background-position: center center;
}

.caption2 {
	font-size: 250px;
    line-height: 250px;
    font-family: Ailerons;
	text-align: center;
	width: 100%;
	position: absolute;
}

.half {
	position: absolute;
	height: 50%;
	width: 100%;
	overflow: hidden;
	transition: all cubic-bezier(0.59, 0.05, 0.52, 0.93) 2s 1.7s;
	z-index: 1;
}

.half.top {
	top: 0;
	background-color: #181818;
}

.half.bottom {
	bottom: 0;
	background-color: #fb3e3e;
}

.half.bottom .caption2 {
    top: -135px;
    color: #181818;
}

.half.top .caption2 {
	bottom: -115px;
    color: #fb3e3e;
}

.dividerline {
	position: absolute;
	height: 4px;
	top: 50%;
	right: 0;
	width: 50%;
	background-color: white;
	z-index: 1;
	transition: all ease-out 0.7s 0.5s;
}

.dividerline.left {
	left: 0;
}

.slider {
	height: 100%;
    width: 100%;
}

.slider .button {
	position: absolute;
    top: 0;
	height: 100%;
	color: #ffffff7a;
	cursor: pointer;
}

.slider .button .material-icons {
	font-size: 100px;
	line-height: 100px;
	position: relative;
    top: 48%;
}

.slider .leftb {
    left: 0;
}

.slider .rightb {
    right: 0;
}

.slider .slides {
	position: relative;
    height: 100%;
    width: 100%;
}

.slider .slides .slide {
    position: absolute;
    height: 100%;
    width: 100%;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.5s, visibility 0s 0.5s;
}

.slide .slidebg {
	width: 100%;
	height: 100%;
}

.slider .slides .shownslide {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.5s, visibility 0s 0s;
}

.slide .slidecentered {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.slide .slidetitle {
	font-family: Ailerons, sans-serif;
    font-size: 130px;
	line-height: 130px;
    color: #0060ff;
    font-weight: bold;
	animation: slidetitleout ease-out 0.3s forwards;
}

.shownslide .slidetitle {
	animation: slidetitlein ease-out 0.3s forwards;
}

.slide .slidesubtitle {
	font-family: "Share Tech Mono";
    font-size: 30px;
	color: white;
	margin: 30px;
	animation: fadeout ease-out 0.2s forwards;
}

.shownslide .slidesubtitle {
	font-family: "Share Tech Mono";
    font-size: 30px;
	color: white;
	margin: 30px;
	animation: fadein ease-out 0.2s forwards;
}

.slide .slidelink {
	font-family: "Share Tech Mono";
    font-size: 30px;
    border-top: 2px white solid;
    display: inline-block;
    padding: 30px;
	animation: slidelinkout ease-out 0.3s forwards;
}

.shownslide .slidelink {
	animation: slidelinkin ease-out 0.3s forwards;
}

.slide .slidelink a {
	color: #fb3e3e;
    text-decoration: none;
	transition: color 0.2s linear;
}

.slide .slidelink a:hover {
	color: white;
}

#slide1 .slidebg {
	background-color: #2C2F33;
}

#slide1 .slidetitle {
	color: #7289DA;
}

#slide1 .slidelink {
	border-top: 2px #99AAB5 solid;
}

#slide2 .slidetitle {
	color: #972521;
}

#slide2 .slidebg {
	background-color: #458588;
}

#slide2 .slidelink a {
	color: #282828;
}

#slide2 .slidelink a:hover {
	color: white;
}

#slide3 .slidebg {
	background-color: #0f0f10;
}

.page3 .centertable {
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
	width: 50%;
	background-color: grey;
	font-size: 0.9rem;
}

.page3 .shitposttable {
	border: 1px solid white;
}

.page3 .shitposttable td {
	width: 300px;
	word-wrap: break-word;
    word-break: break-all;
    white-space: normal;
	border: 1px solid red;
	vertical-align: top;
}

.onlinedot {
	color: green;
}

.offlinedot {
	color: red;
}

/*

	MOBILE STYLE OVERRIDES
 
*/

@media only screen and (max-device-width: 480px) {
	@keyframes textshowside {
    0% { 
		left: 0px;
		visibility: visible;
		opacity: 0;
		color:white;
	}
	100% {
		left: 155px;
	visibility: visible;
		opacity: 1; 
		color: #fc3e3e;
	}	
}

	.vidoverlay {
		animation: none; /* transform creates lag on shitty phones */
	}
	
	.centercontent {
		padding-left: 55px;
	}
	
	.caption2 {
		font-size: 190px;
		line-height: 190px;
	}
	
	.half.bottom .caption2 {
		top: -95px;
	}

	.half.top .caption2 {
		bottom: -95px;
	}
	
}