/* CSS Document */
:root{
	--color: #BF4E30;
	--accent: #4059AD;
	--on-color: #fff;
	
	--background-main: #EDEFE7;
	--background: #fff;
	--dark: #223127;
	--grey: #5C8469;
	
	--border-radius: 10px;
	--spacing: 20px;
}

html, body{
	padding:0;
	margin:0;
	
	background: var(--background-main);
	color: var(--dark);
	
	line-height: 20px;
	font-size: 15px;
	letter-spacing: 1px;
	
	font-family: "Roboto", sans-serif;
}
body{
	position:relative;
	padding-top:calc(var(--spacing) * 2);
}
a{
	color:var(--color);
}
header{
	position:fixed;
	top:0;
	left:0;
	right:0;
	color: var(--background);
	text-align: center;
	padding:10px;
	z-index: 2;
	overflow: hidden;
}
header:before{
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	content: '';
	background: var(--dark);
	opacity:0.7;
}
header a{
	color:inherit;
	margin:5px;
	text-decoration: none;
}
header *{
	position: relative;
	z-index: 10;
}
footer{
	position: relative;
	background: var(--grey);
	text-align: center;
	padding: var(--spacing);
	border-top: 1px solid var(--accent);
	z-index: 10;
	color:var(--background-main);
}
footer p{
	margin:0;
}
footer a{
	color: inherit;
	text-decoration: none;
	transition: color 0.5s;
}
footer svg{
	margin: 0 calc(var(--spacing) / 2);
	fill:currentColor;
}
footer a:hover{
	color:var(--accent);
}
#cookieNotification{
	display: none; 
	position: fixed;	
	bottom: 0; 
	left: 0; 
	right: 0;
	z-index: 11;
	background: var(--background);
	padding:var(--spacing);
	box-shadow: var(--float-shadow);
}
.autoSize{
	position: relative;
}
.sizeSquare{
	padding-top: 100%;
}
.autoSize *:not(.sizeSquare){
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
/** lightbox **/
#lightbox{
	display: none;
	position: fixed;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background:black;
	z-index: 12;
}
#lightbox span{
	position: absolute;
	top:var(--spacing);
	right:var(--spacing);
	height:var(--spacing);
	font-size: calc(var(--spacing) * 2);
	line-height: var(--spacing);
	cursor: pointer;
}
#lightbox img{
	max-width: 600px;
	width:100%;
	position: absolute;
	top:50%;
	left:50%;
	margin:auto;
	display: block;
	transform: translate(-50%, -50%);
}
[lightbox]{
	cursor: pointer;
}

[dynamic-img]{
	position: relative;
	background:var(--grey);
}
[dynamic-img] img{
	transition: opacity 0.5s;
}
[dynamic-img] span{
	position: absolute;
	top:calc(50% - var(--spacing) / 4);
	left:50%;
	width: calc(var(--spacing) / 2);
	height:calc(var(--spacing) / 2);
	margin-left: calc(var(--spacing) / -4);
	background: var(--background);
	border-radius: 100%;
	animation: slide 1s infinite linear;
}
[dynamic-img] span:first-of-type{
	margin-left: calc(var(--spacing) * -1.25);
	animation: forward 1s infinite ease-out, jump 1s infinite;
}
[dynamic-img] span:last-of-type{
	margin-left: calc(var(--spacing) * 0.75);
}
@keyframes slide{
	from{
		transform: translateX(0);
	}
	to{
		transform: translateX(calc(var(--spacing) * -1));
	}
	
}
@keyframes jump{
	from{
		margin-top: 0;
	}
	50%{
		margin-top: calc(var(--spacing) * -1);
	}
	100%{
		margin-top: 0;
	}
}
@keyframes forward{
	from{
		transform: translateX(0);
	}
	to{
		transform: translateX(calc(var(--spacing) * 2));
	}
}
[dynamic-img][status=loaded] span{
	display: none;
}
code{
	font-family: "Roboto Mono", monospace;
}
#trees{
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	width:100%;
	z-index:10;
	opacity:.25;
	pointer-events: none;;
}
@keyframes jump{
	from,to{
		transform: translateY(0);
	}
	50%{
		transform: translateY(-5px);
	}
}
nav a span.hover{
	animation: jump 500ms;
	display: inline-block;
}
h1 span:hover{
	color:var(--accent);
}
h1 span{
	transition:color 0.5s;
}
/* custom scrollbar */
body{
	overflow: overlay;
}
body::-webkit-scrollbar {
    width: 10px;
}
body::-webkit-scrollbar-thumb {
  background-color: #223127aa;
  outline: 1px solid var(--grey);
  opacity:0.5;
  border-radius: 5px;
  margin:5px;
}