/*VARIABLES*/

:root{
	
	--white: #EAEAFA;
	--teal: #1DE6A0;
	--orange: #FF8400;
	--darkblue: #200A56;
	--darkdarkblue: #0F0529;
	--darkpink: #FF00B2;
	--button: 25px;
}
.back{
	
	position: fixed;
	top: 5px;
	left: 5px;
	border: solid var(--white) 3px;
	background-image: url("/resources/backgrounds/dotted-bg2.png");
	padding: 15px 5px;
	font-size: 20px;
	text-decoration: none;
	box-shadow: 0px 1px 5px var(--darkblue);
	font-weight: bold;
	
}

a{
	
	color:var(--darkpink);
	
}

a:hover{
	
	color:var(--orange);
	
}

a:active{
	
	color:var(--teal);
	
}

.container{
	
	margin: 0px auto;
	margin-top: 35px;
	display: flex;
	max-width: 1000px;
	justify-content: space-evenly;
	
}

.rec{
	
	border: solid red 3px;
	max-width: 200px;
	padding: 5px;
	max-height: 400px;
	
}

.rec h2{
	
	font-size: 17px;
	
}

.recs{
	
	width: 220px;
	max-height: 400px;
	height: initial;
	border: solid var(--orange) 3px;
	box-shadow: 0px 1px 5px var(--darkblue);
	background-image: url("/resources/backgrounds/dotted-bg.png");
	overflow: hidden;
	
}

.main-container{
	
	margin: 3px auto;
	max-width: 750px;
	padding: 5px;
	border: solid var(--orange) 3px;
	box-shadow: 0px 1px 5px var(--darkblue);
	background-image: url("/resources/backgrounds/orange.gif");
	
}


.header{
	
	border: solid var(--white) 3px;
	border-radius: 10px 10px 0px 0px;
	margin: 3px 0px;
	text-align: center;
	box-shadow: 0px 1px 5px var(--darkblue);
	background-image: url("/resources/backgrounds/dotted-bg2.png");
	
}


.main{
	
	border: solid var(--white) 3px;
	margin: 3px 0px;
	padding: 5px;
	box-shadow: 0px 1px 5px var(--darkblue);
	background-image: url("/resources/backgrounds/dotted-bg.png");
	
}

body{
	
	font-family: tahoma;
	background-image: url("/resources/backgrounds/blog-bg.png");
	background-size: 18%;
	background-attachment: fixed;
	color: var(--darkblue);
	scrollbar-color: #050505 var(--teal);
	
}

 @media only screen and (max-width: 900px) {
	 
	 .container{
		 
		 flex-direction: column;
		 
	 }
	 
	 .recs{
		 
		 width: inherit;
		 max-height: initial;
		 height: 300px;
		 
	 }
	 
 }