/*VARIABLES*/

:root{
	
	--white: #EAEAFA;
	--teal: #1DE6A0;
	--orange: #FF8400;
	--darkblue: #200A56;
	--darkdarkblue: #0F0529;
	--darkpink: #FF00B2;
	--button: 25px;
}

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

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

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

h1{
	
	text-align: center;
	
}

h2{
	
	text-align: center;
	
}

hr{
	
	border: dashed var(--darkblue) 1px;
	
}

.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;
	
}

.container{
	
	height: 95.5vh;
	display: flex;
	align-items: center;
	justify-content: center;
	
}

.main-container{
	
	border: solid var(--orange) 3px;
	max-width: 700px;
	display: flex;
	justify-content: space-evenly;
	box-shadow: 0px 1px 5px var(--darkblue);
	background-image: url("/resources/backgrounds/orange.gif");
	
}

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

.posts{
	
	width: 50%;
	border: solid var(--white) 3px;
	margin: 5px;
	padding: 5px;
	height: 500px;
	overflow-x: hidden;
	overflow-y: scroll;
	background-image: url("/resources/backgrounds/dotted-bg2.png");
	box-shadow: 0px 1px 5px var(--darkblue);
	
}

body{

    font-family: tahoma;
	color: var(--darkblue);
	background-image: url("/resources/Images/Perma-bg.png");
	background-size: 70%;
	scrollbar-color: var(--orange) var(--white);

}

 @media only screen and (max-width: 900px) {
	 
	 .main-container{
		 
		 flex-direction: column;
		 
	 }
	 
	 .desc{
		 
		 width: initial;
		 height: initial;
		 
	 }
	 
	 .posts{
		 
		 width: initial;
		 height: initial;
		 overflow: initial;
		 
	 }
	 
	 
 }