@import url('https://fonts.googleapis.com/css?family=Abel');

:root 
{	--mainFontSize: 2vh;	}

body
{
	margin: 0;
	padding:0;
	font-family: 'Abel', sans-serif;
	font-size: var(--mainFontSize);
	font-weight: normal;

	background: rgb(7, 34, 54);
	/*color: rgba(220,220,220,255);*/ /*#ddddddff;*/
	color: rgb(255,255,255); /*#ddddddff;*/
	text-shadow: 0 0 0.16em rgba(0,0,0,255), 0 0 0.25em rgba(255,0,120,255);

	transition: opacity 3s;
	transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media all and (max-device-width: 800px)
{	body
	{
		font-size: calc(var(--mainFontSize)*1.5);
	}
}

h1
{	/*border: 1px solid yellow;*/
	font-size: 1.5em;/*calc( var(--mainFontSize) *1.5 );*/
	font-weight: normal;
	margin: 0;
	/*margin-top: calc( var(--mainFontSize) *0.6 );*/
	margin-bottom:-0.15em;
}


h1:first-child
{	/*margin-top: 0;*/
	/*background-color: green;*/
}

.heading1
{
	font-size: 1.5em;
	font-weight: normal;
	margin: 0;
	margin-top: 0.0em;
	margin-bottom:0.1em;
	text-align:left;
	display: inline-block;
}

.first_heading1
{	margin-top: 0;
	/*background-color: green;*/
	column-span: all;
}

.subheader
{	position:relative;
	top: -0.25em;
	font-size: 0.4em;
}

a
{	color:#c7c;
	transition: color 2s;
	text-decoration-line: none;
	text-decoration-color: #fcf;
}

a:visited
{	color:#c7c;	}

a:hover
{
	transition: color 0.3s;
	color: #fff;
}

p
{
	margin: 0;
	margin-top:0.7em;
	margin-bottom:0em;
	text-align: justify;
	/*background-color: red;*/
}

p:first-child
{
	margin-top:0em;
}

img
{
	margin: 0.25em;
	margin-top:0.25em;
	margin-bottom:0.25em;
	transition: transform 1s, filter 5s;
}
img:hover
{
	transform: rotate(2deg);
	filter: hue-rotate(360deg);
}

@keyframes menuAnimKeys
{	from	{ border-color: rgb(255,255,255); transform: translate(-50%,-50%) scale(1,1) rotate(0.0turn); }
	25%		{ border-color: rgb(128,255,255); transform: translate(-50%,-50%) scale(1.1,1.1) rotate( 0.01turn); }  
	50%		{ border-color: rgb(255,128,255); transform: translate(-50%,-50%) scale(1.2,1.2) rotate( 0.0turn); }
	75%		{ border-color: rgb(64 ,192,64 ); transform: translate(-50%,-50%) scale(1.1,1.1) rotate(-0.01turn); }
	to		{ border-color: rgb(255,255,255); transform: translate(-50%,-50%) scale(1,1) rotate(0.0turn); }
}

@keyframes menuAnimKeys2
{	from	{ border-color: rgb(255,255,255); transform: scale(1,1) rotate(0.0turn); }
	25%		{ border-color: rgb(128,255,255); transform: scale(1.1,1.1) rotate( 0.01turn); }  
	50%		{ border-color: rgb(255,128,255); transform: scale(1.2,1.2) rotate( 0.0turn); }
	75%		{ border-color: rgb(64 ,192,64 ); transform: scale(1.1,1.1) rotate(-0.01turn); }
	to		{ border-color: rgb(255,255,255); transform: scale(1,1) rotate(0.0turn); }
}

#menuFrame
{
	display:inline-block;
	padding:2vh; 
	border: 2px dashed white;
	position:relative; 
	/*left:50%; top: 50vh;
	transform: translate(-50%,-50%);
	*/
	left:calc(50% - 8vh); top: 40vh; /* fuckin hacky shit since new crome is busted and disables the whole menu when a transform is appplied to it*/

}

#menuFrame:hover
{

	animation: 10s infinite menuAnimKeys2;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
	animation-direction: normal;
	animation-delay: 0s;
	/*transition: transform 2s;*/
}

#threediv
{
	width:100vw; height:100vh; 
	position:fixed; top: 0px; left:0px; 
	z-index: -10; 
	/*background-color: #f00;*/ /*rgb(247, 34, 54); */
	display: block;
}


.reloadPart
{
	/*background-color: green;*/
	transition: opacity 0.45s;
}

#mainContent
{
	height: calc(99.5vh); /* - 17px */
	margin-top: 0.5vh;
	margin-right: 1vh;
	margin-left: 1vh;
	margin-bottom: 0;
	overflow-x: hidden;
	overflow-y: hidden;	


	/*transition: margin 3s;*/
	/*margin: 0;*/

}

.testCols
{
	position: relative;
	left:0px;
	height: calc(99.5vh); /* - 17px */
	padding: 0;
	padding-right: 3px;
	column-count: 300;
	column-width: 30vh;
	column-rule: none;
	column-gap: 2vh;
	orphans: 3;
	widows:2;
	column-fill: auto;
	/*text-align: justify;*/
/*	background-color: green;
*/	overflow-x: auto;
	overflow-y: hidden;
}



.img100
{
	margin-left: 0;
	margin-right: 0;
}

.youtubeLandscape
{
	width:100%; 
	height: 20vh;
	margin: 0;
	margin-top: 0.5em;
	max-height: 40vh;
}

.youtubePortrait
{
	width:100%; 
	height: 20vh;
	margin: 0;
	margin-top: 0.5em;
	max-height: 73.5vh;
}

.youtubePortrait50
{
	width:25%; 
	height: 20vh;	
	float:left;
	margin-right: 0.5em;
	margin-top: 0.25em;
	margin-bottom: 0.25em;

}


#backButton2
{	filter: blur(0.06vw) sepia(1%) saturate(200%);
	text-shadow: 0 0 0.2vw #000,0 0 0.3vw #000,0 0 0.4vw #000,0 0 0.5vw #000, 
	 0.6vw 0.6vw 0.8vw #000;
	margin-left:-0vw;
	margin-top:-7vw;
	padding-top: 12vw;
	padding-bottom: 3vw;
	width: 11vw;
	height: 12vw;
	border:0px white dashed;
	opacity:0.6;
	/*transition: transform 1s, filter 1s, opacity 1s;*/
	transition: transform 1s, opacity 0.45s;
	/*transition-timing-function: ease-in-out;*/
	transform: translateX(-7vw) rotate(0.25turn);

	position:absolute; 
	left:0px; 
	top:0px; 
	z-index: 20;
	opacity: 0.3;
	display:none;
/*	background-color: red; */
}

@keyframes hoverBackBtnAnim_key
{	from	{ transform: scale(1.2,1.2) translateX(5.8vw) rotate(0.25turn); }
	25%		{ transform: scale(1.2,1.2) translateX(7.8vw) rotate(0.25turn); }
	50%		{ transform: scale(1.2,1.2) translateX(5.8vw) rotate(0.25turn); }
	75%		{ transform: scale(1.2,1.2) translateX(6.8vw) rotate(0.25turn); }
	to		{ transform: scale(1.2,1.2) translateX(5.8vw) rotate(0.25turn); }
}

#backButton2:hover
{
	filter: blur(0.0vw) sepia(1%) saturate(200%);
	transform: scale(1.2,1.2) translateX(5.8vw) rotate(0.25turn);
	opacity:0.6;
	transition: transform 1s, opacity 0.45s;

	animation: 2s ease infinite hoverBackBtnAnim_key;
	animation-direction: normal;
	animation-delay: 1.2s;
	cursor: pointer;
}