* {
	box-sizing: border-box;
}

html {
	overflow-y: scroll;
	scroll-behavior: smooth;
}

body {
	margin: 0 auto;
	padding: 0;
	border-top: 14px solid #94b4a4;
	background-color: #fffdf8;
	font-family: 'Sligoil', serif;
	font-size: 14px;
	line-height: 1.3em;
	color: #333;
	animation: fadeInAnimation ease 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}

@font-face {
	font-family: 'Sligoil';
	src: url('fonts/Sligoil-Micro.woff2') format('woff2');
}

@font-face {
	font-family: 'PicNic';
	src: url('fonts/PicNic.woff2') format('woff2');
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

::selection {
	background: #94b4a4;
	color: #fff;
}

main {
	margin: 4vw;
  	display: grid;
  	gap: 25px;
}

.box,
.bigbox{
 	padding: 20px;
 	border: .5px solid #ccc;
}

.box {
	max-height: 400px;
	overflow: auto;
}

img, video {
	max-width: 200px;
	max-height: 200px;
}

.transparent {
 	opacity: .4;
}

@media (max-width: 700px) {
	main {
		grid-template-columns: repeat(auto-fill, auto);
  		grid-template-rows: repeat(auto-fill, auto); 
	}
}

@media (min-width: 700px) {
	main {
		grid-template-columns: repeat(auto-fill, minmax(300px, 300px));
		grid-template-rows: repeat(auto-fill, minmax(300px, 300px));
	}
}

/* headings */

h1 {
	text-transform: lowercase;
	display: inline-block;
	font: 1.5em 'PicNic';
	line-height: 1em;
}

.middle {
	transform: translate(0);
}

.text::before, .text::after {
	content: attr(data-text);
	position: absolute;
	z-index: -1;
}

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

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

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

h2 {
	font: 1.2em 'PicNic';
	text-transform: lowercase;
}

h2:before,
h3:before {
	content: '~ ';
}

h2:after,
h3:after {
	content: ' ~';
}

ul {
	list-style-type: none; 
	margin: 0;
}

ul,
ol {
	padding: 0;
}

li {
	padding: 3% 0;
}

.block {
	display: block;
}

.centre {
	text-align: center;
	display: flex;
  	justify-content: center;
  	align-items: center;
}

.centre li {
	padding: 10% 0;
}

a {
	color: inherit;
	text-decoration: underline #777 wavy;
}

a:hover {
	color: #94b4a4;
	transition: all .15s ease-in-out;
}

.nodeco {
	text-decoration: none;
}

blockquote {
	margin: 0;
}

.small {
	font-size: .85em;
}

.big {
	font-size: 1.2em;
}

.detail {
	color: #888;
	display: inline-block;
}

.detail:before {
	content: '(';
}

.detail:after {
	content: ')';
}

.email {
	unicode-bidi: bidi-override;
	direction: rtl;
}

.email:before {
	content: '(moc.liamnotorp@';
}

/* roller */

.roller {
	height: 200px;
	position: relative;
	overflow: hidden;
}

.rolltext {
	position: absolute;
	top: 0;
	animation: slide 8s infinite;
}

@keyframes slide {
	0%{top:0;}
	25%{top: -3.5em;}
	50%{top: -7em;}
	72.5%{top: -10.5em;}
}