@import url('https://fonts.googleapis.com/css?family=Montserrat:300&display=swap');
/* Reset Styles */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

em {
	font-weight: bold;
	color: #987ee3;
}

body {
	line-height: 1;
	font-family: Orator-Std, Roboto, sans-serif;
	text-rendering : optimizeLegibility;
	-webkit-font-smoothing : antialiased;
	font-size: 19px;
	background-color: #040404;
	color: #f4f4f4;
	-webkit-tap-highlight-color: transparent;
	color:white;
	background:black;
}

.overflow-x{
	overflow-x: hidden;
}

.overflow-y{
	overflow-y: hidden;
}

.header{
	display: none;
	position: absolute;
	width: 100%;
	left: 50%;
	top: 5em;
	transform: translate(-50%,-50%);
}

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

.nav{
	margin-top: 10px;
}

.nav-dir{
	color: #81899c;
	transition: padding-left 1s;
	padding-bottom: 0.25em;
}

.nav-dir-margin{
	padding-bottom: 0.25em;
}

.nav-link{
	line-height: normal;
	width: 2px;
	text-decoration: none;
	text-transform: none;
	color: #f4f4f4;
	display: inline;
	font-size: 200%;
	transition: padding-left 1s;
}

.nav a:hover, .nav-link-inverted{
		color: #040404;
		background: #f4f4f4;
		padding-left: 20%;
}

.nav-link-inverted{
		transition: padding-left 0s;
}

.background{
	content: "";
	display: block;
	position: fixed;
	top: 0;
	left: 0;

	height: 100%;
	width: 100%;
	object-fit: cover;

	background-position: center center;
	background-repeat: no-repeat;

	z-index: -2;
	opacity: 0.1;
}

.pic {
	width: 80%;
	padding: 2em;
}

.pic-medium {
	width: 50%;
	padding: 2em;
}

.pic-small {
	width: 80%;
	max-width: 20em;
	margin-top: 2em;
}

.tiledBackground {
  background-image: url(https://i.dailymail.co.uk/i/gif/2016/12/nasa4.gif);
  background-size: 150px;
  width: 3000px;
  height: 300px;
  border: 2px solid;
  color: pink;
}


.middle-of-screen{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.middle-of-screen:hover{
  color: #040404;
  background: #f4f4f4;
  -moz-transform: scale(1, -1) translate(-50%,50%);
  -webkit-transform: scale(1, -1) translate(-50%,50%);
  -o-transform: scale(1, -1) translate(-50%,50%);
  -ms-transform: scale(1, -1) translate(-50%,50%);
  transform: scale(1, -1) translate(-50%,50%);
}

.middle-of-screen:hover	body{
		background-color: #FF0000;
	}

.bottom-lines-sticky{
	position: absolute;
  bottom: 10%;
	width: 100%;
}

.bottom-lines{
	position: relative;
  bottom: 10%;
	width: 100%;
}

.bottom-lines a:hover{
	color: #040404;
	background-color: #f4f4f4;
}

.back-to-top{
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	transform: translate(-50%,0);
	line-height: normal;
	text-decoration: none;
	text-transform: none;
	color: #f4f4f4;
	font-size: 200%;
}

.ref-button{
	line-height: normal;
	padding: 10px;
	margin-right: 10px;
	width: 2px;
	text-decoration: none;
	text-transform: none;
	color: #f4f4f4;
	display: inline;
	white-space: nowrap;
	font-size: 150%;
	line-height: 75px;
	border-style: solid;
	border-width: 3px;
}

.made-by{
	display: none;
	position: absolute;
	transform: translate(0,-20px);
  top: 100%;
	width: 100%;
	direction: rtl;
	color: #f4f4f4;
}

.article-text{
	max-width: 1200px;
	padding-left: 2em;
	padding-right: 2em;
	margin-left: auto;
  margin-right: auto;
	font-family: Montserrat, sans-serif;
	line-height: 30px;
}

.article-text a:hover{
	color: #040404;
	border-color: #f4f4f4;
	background-color: #f4f4f4;
}

.article-text-heading, .vision-img-heading{
	padding-top: 30px;
	padding-bottom: 10px;
	font-size: 150%;
}

.article-text-subheading{
	padding-top: 30px;
	padding-bottom: 10px;
	font-size: 135%;
	font-weight: bold;
}

.article-text-content{
	font-size: 100%;
}

.article-text-link {
	color: #dca165;
	text-decoration: none;
	font-weight: bold;
}

.vision-img-list li{
	list-style: none;
}

.vision-img{
	width: 100%;
}

.glitch-text{
  color: #f4f4f4;
  text-transform: uppercase;
  font-size: 200%;
  text-align: center;
  letter-spacing: 14px;
}

.glitch-text::before,.glitch-text::after{
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.glitch-text::before{
  color: #ff00c1;
  animation: glitch-effect 3s infinite;
}

.glitch-text::after{
  color: #3498db;
  animation: glitch-effect 2s infinite;
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0 6px rgba(255,255,255,0.0);
}

::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 0 6px rgba(244,244,244,0.2);
}

@keyframes glitch-effect {
  0%{
    left: -2px;
    top: -2px;
  }
  25%{
    left: 2px;
    top: 0px;
  }
  26%{
    left: 20px;
    top: 10px;
  }
  27%{
    left: 2px;
    top: 0px;
  }
  50%{
    left: -1px;
    top: 2px;
  }
  75%{
    left: 1px;
    top: -1px;
  }
  100%{
    left: 0px;
    top: -2px;
  }
}

@media only screen and (min-width: 768px){
	.header{
		display: block;
	}
	.nav{
		margin-top: 10em;
	}
	.middle-of-screen{
		width: 70%;
		z-index: -1;
	}
	.nav-dir{
	}
	.nav-link{
	}

	.pic {
		width: 80%;
		max-width: 30em;
		padding: 2em;
	}

	.pic-medium {
		width: 50%;
		padding: 2em;
	}

	.pic-small {
		width: 30%;
		padding: 2em;
		float: right;
	}
	.article-text{
		line-height: 35px;
	}
	.article-text-heading, .vision-img-heading{
		font-size: 200%;
	}
	.article-text-content{
		font-size: 130%;
	}
	.glitch-text{
		font-size: 400%;
	}
	.vision-img-list img{
		max-width: 768px;
		width: auto;
	}
	.back-to-top{
		width: 600px;
	}
	.vision-img-list li:nth-child(even){
		width: auto;
		text-align: right;
	}
	.vision-img-list h1:nth-child(even){
		text-align: left;
		color: red;
	}
	.mk-button{
			font-size: 200%;
	}
}