@import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');

body {
	background: #000;
	display: flex;
	justify-content: center;
  	align-items: center;
	background-size: cover;
	background-position: center center;
	color: #fff;
	font-family: 'Averia Serif Libre', cursive;
}
.overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(249, 245, 235, 0.8);
	/* background: rgba(0, 0, 0, 0.8); */
}
.flex-box {
	z-index: 9;
}
.flex.row.flex-center,
.flex-center {
	justify-content: center;
}
.flex.row {
	display: flex;
    justify-content: space-between;
}
.row img {
	width: 100px;
}
h1 {
	font-size: 40px;
	margin-bottom: 0;
	margin-top: 0;
	color: #000;
}
a {
	color: #fff;
	font-size: 18px;
}

.noise {
	position: fixed;
	top: -50%;
	left: -50%;
	right: -50%;
	bottom: -50%;
	width: 200%;
	height: 200vh;
	background: transparent url('/img/noise-transparent.png') repeat 0 0;
	background-repeat: repeat;
	animation: noise-animation .2s infinite;
	opacity: .6;
	visibility: visible;
}

.shaky-cam {
	position: fixed;
	top: -10%;
	left: -10%;
	right: -10%;
	bottom: -10%;
	width: 120%;
	height: 120vh;
	background: transparent url('https://images.unsplash.com/photo-1606681129845-a6ab3e1017e3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2787&q=80') repeat 0 0;
	background-repeat: repeat;
	background-size: cover;
	background-position: center center;
	animation: shakycam-animation 20.2s infinite, flicker-animation 5s infinite;
	animation-timing-function: ease-out;
	opacity: 1;
	visibility: visible;
}
  
@keyframes noise-animation {
	  0%   { transform: translate(0,0) }
	  10%  { transform: translate(-5%,-5%) }
	  20%  { transform: translate(-10%,5%) }
	  30%  { transform: translate(5%,-10%) }
	  40%  { transform: translate(-5%,15%) }
	  50%  { transform: translate(-10%,5%) }
	  60%  { transform: translate(15%,0) }
	  70%  { transform: translate(0,10%) }
	  80%  { transform: translate(-15%,0) }
	  90%  { transform: translate(10%,5%) }
	  100% { transform: translate(5%,0) }
 }
 ::root {
	--percent         : 5;
	--zero            : 200;
	--negative-small  : calc( -1 * var(--percent));
	--negative-medium : calc( -2 * var(--percent));
	--negative-large  : calc( -3 * var(--percent));
	--positive-small  : 5%;
	--positive-medium : calc(  2 * var(--percent));
	--positive-large  : calc(  3 * var(--percent));
 }

 @keyframes shakycam-animation {
	/* 0%   { transform: translate(var(--zero),var(--zero)) } */
	/* 10%  { transform: translate(var(--negative-small), var(--negative-small)) }
	/* 20%  { transform: translate(var(--negative-medium),var(--positive-small)) } */
	/* 30%  { transform: translate(var(--positive-small),var(--negative-medium)) } */
	/* 40%  { transform: translate(var(--negative-small),var(--positive-large)) } */
	/* 50%  { transform: translate(var(--negative-medium),var(--positive-small)) } */
	/* 60%  { transform: translate(var(--positive-large),var(--zero)) } */
	/* 70%  { transform: translate(var(--zero),var(--positive-medium)) } */
	/* 80%  { transform: translate(var(--positive-large),var(--zero)) } */
	/* 90%  { transform: translate(var(--positive-medium),var(--positive-small)) } */
	/* 100% { transform: translate(var(--positive-small),var(--zero)) } */
	0%   { transform: translate( 0.0%,  0.0%) }
	10%  { transform: translate(-0.22%, -0.22%) }
	20%  { transform: translate(-0.2%,  0.1%) }
	30%  { transform: translate( 0.1%, -0.2%) }
	40%  { transform: translate(-0.22%,  0.22%) }
	50%  { transform: translate(-0.2%,  0.1%) }
	60%  { transform: translate( 0.22%,  0.0%) }
	70%  { transform: translate( 0.0%,  0.2%) }
	80%  { transform: translate( 0.22%,  0.0%) }
	90%  { transform: translate( 0.2%,  0.1%) }
	100% { transform: translate( 0.0%,  0.0%) }
}

@keyframes flicker-animation {
	0%   { opacity: 1.00 }
	10%  { opacity: 0.98 }
	20%  { opacity: 0.95 }
	30%  { opacity: 0.97 }
	40%  { opacity: 0.95 }
	50%  { opacity: 0.97 }
	60%  { opacity: 1.00 }
	70%  { opacity: 0.88 }
	80%  { opacity: 1.00 }
	90%  { opacity: 0.95 }
	100% { opacity: 0.98 }
}