html, body {
	width: 100%;
	height: 100%;
}
.linkit {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	display: flex;

}

.linkki {
	flex: 1;
}

.linkki:nth-child(1) {
	cursor: w-resize;
}

.linkki:nth-child(2) {
	cursor: e-resize;
}


.box-row-XS{
	display: flex;
	flex: 1;
	animation: myMove5 5s infinite;
	animation-direction: alternate;

}

.animated {
	background-color: ;
	animation: myAnimation 1s ease infinite alternate forwards;
}


@font-face {
    font-family: myFont;
    src: url(big_pixel.woff);
}

.box-row {
	display: flex;
	flex: 1;

}

.box-col {
	flex: 1;
	background-color: lightpink; 
}
.box-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;

}

.grain {

	animation: grain 8s steps(10) infinite;
	height: 200%;
	width: 200%;
	opacity: 2%;
	position: fixed;

}

@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-7%, 5%) }
  30% { transform:translate(7%, -2%) }
  40% { transform:translate(-5%, 18%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 10%) }
  90% { transform:translate(-10%, 10%) }
}

.big-row {
	flex: 2;
}
.red {
	background-color: red;
	animation: mymove 5s infinite;
}

.XL {
	flex: 7;
}

.white {
	background-color: white;
	animation: mymove2 5s infinite;
}

.yellow {
	background-color: yellow;
}

.cyan {
	background-color: cyan;
}

.green {
	background-color: greenyellow;
}

.pink {
	background-color: magenta;
}

.blue {
	background-color: blue;
	animation: mymove3 5s infinite;
}

.black {
	background-color: black;
}

.darkblu {
	background-color: darkblue;
}

.darkpurple {
	background-color: darkviolet;
}

@keyframes mymove {
  	0% { background-color: red; }
	25% { background-color: blue; }
	50% { background-color: white; }
	75% { background-color: yellow; }
	100% { background-color: red; }

}

@keyframes mymove2 {
  	0% { background-color: white; }
	10% { background-color: blue; }
	35% { background-color: greenyellow; }
	80% { background-color: magenta; }
	100% { background-color: white; }

}

@keyframes mymove2 {
  	0%  { background-color: white; }
	10% { background-color: blue; }
	20% { background-color: greenyellow; }
	30% { background-color: magenta; }
	40% { background-color: white; }
	50% { background-color: white; }
	60% { background-color: blue; }
	70% { background-color: greenyellow; }
	80% { background-color: magenta; }
	90% { background-color: white; }
	100%{ background-color: white; }

}

@keyframes mymove5 {
	0% {position: -20px;}
	50% {position: 30px;}
	100% {position: 0px;}
}



h1 {
  text-align: center;
  color: #fff;
  font-size: 10em;
  position: absolute;
  letter-spacing: 8px;
  font-family: myFont;
  font-weight: 400;
  /*Create overlap*/
  
  margin: 0;
  /*Animation*/
  
  animation: glitch1 2.5s infinite;
}

#container {
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
}

h1:nth-child(2) {
  color: #67f3da;
  animation: glitch2 2.5s infinite;
}

h1:nth-child(3) {
  color: #f16f6f;
  animation: glitch3 2.5s infinite;
}
/*Keyframes*/

@keyframes glitch1 {
  0% {
    transform: none;
    opacity: 1;
  }
  7% {
    transform: skew(-0.5deg, -0.9deg);
    opacity: 0.75;
  }
  10% {
    transform: none;
    opacity: 1;
  }
  27% {
    transform: none;
    opacity: 1;
  }
  30% {
    transform: skew(0.8deg, -0.1deg);
    opacity: 0.75;
  }
  35% {
    transform: none;
    opacity: 1;
  }
  52% {
    transform: none;
    opacity: 1;
  }
  55% {
    transform: skew(-1deg, 0.2deg);
    opacity: 0.75;
  }
  50% {
    transform: none;
    opacity: 1;
  }
  72% {
    transform: none;
    opacity: 1;
  }
  75% {
    transform: skew(0.4deg, 1deg);
    opacity: 0.75;
  }
  80% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

@keyframes glitch2 {
  0% {
    transform: none;
    opacity: 0.25;
  }
  7% {
    transform: translate(-2px, -3px);
    opacity: 0.5;
  }
  10% {
    transform: none;
    opacity: 0.25;
  }
  27% {
    transform: none;
    opacity: 0.25;
  }
  30% {
    transform: translate(-5px, -2px);
    opacity: 0.5;
  }
  35% {
    transform: none;
    opacity: 0.25;
  }
  52% {
    transform: none;
    opacity: 0.25;
  }
  55% {
    transform: translate(-5px, -1px);
    opacity: 0.5;
  }
  50% {
    transform: none;
    opacity: 0.25;
  }
  72% {
    transform: none;
    opacity: 0.25;
  }
  75% {
    transform: translate(-2px, -6px);
    opacity: 0.5;
  }
  80% {
    transform: none;
    opacity: 0.25;
  }
  100% {
    transform: none;
    opacity: 0.25;
  }
}

@keyframes glitch3 {
  0% {
    transform: none;
    opacity: 0.25;
  }
  7% {
    transform: translate(2px, 3px);
    opacity: 0.5;
  }
  10% {
    transform: none;
    opacity: 0.25;
  }
  27% {
    transform: none;
    opacity: 0.25;
  }
  30% {
    transform: translate(5px, 2px);
    opacity: 0.5;
  }
  35% {
    transform: none;
    opacity: 0.25;
  }
  52% {
    transform: none;
    opacity: 0.25;
  }
  55% {
    transform: translate(5px, 1px);
    opacity: 0.5;
  }
  50% {
    transform: none;
    opacity: 0.25;
  }
  72% {
    transform: none;
    opacity: 0.25;
  }
  75% {
    transform: translate(2px, 6px);
    opacity: 0.5;
  }
  80% {
    transform: none;
    opacity: 0.25;
  }
  100% {
    transform: none;
    opacity: 0.25;
  }
}

.screen {
	width: 100vw;
	height: 100vh;
	position: absolute;
}

.rikki {
	height: 92px;
	width: 100vw;
	opacity: 30%;
	padding-top: 380px;
}

.screen2 {
	width: 100vw;
	height: 100vh;
	position: absolute;
}

.rikki2 {
	height: 100vh;
	width: 100vw;
	opacity: 5%;
}