:root {
            	--body-bg-image: url('/images/greenhills.png');

/* colors */
--content: #ffffff;
}

* {
box-sizing: border-box;
}

#container {    
margin: 0 auto;
width: 650px;  
position: relative;
}

body { 
font-family: "VT-100", fixedsys, System, monospace;
font-size: 12px ;
background-color: #8D99AE;
margin: 0px;
margin-top: 7% ;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-image: var(--body-bg-image);
cursor: url("https://64.media.tumblr.com/1b8d5e7015227a17ba8b0dd69a7fb19d/dc2263b843e791d0-8c/s75x75_c1/dffcb131661ed345e699e30a8681f710f39ff177.pnj"), auto;
} 

ul, li{
margin: 0px;
list-style-type: none;
padding-left: 0px;
font-size: 11px;
line-height: 2.1px;
}

a{
text-decoration: none;
color: blue;
}

a:visited{
color: blue;
}

a:hover{
color: #E30B5C;
cursor: url("https://64.media.tumblr.com/1b8d5e7015227a17ba8b0dd69a7fb19d/dc2263b843e791d0-8c/s75x75_c1/dffcb131661ed345e699e30a8681f710f39ff177.pnj"), auto;
}

main { 
border: solid #006880;
border-width: 0px 3px 3px 3px;
background-color: #ffffff;
padding: 20px 15px 20px 15px;
width: 100%;
max-height: 1000px ;
background-image: url("-");
}


#form {
display:flex;
flex-direction: column;	 
}

#flex {
display: flex;
}

.main-wrapper {
border: 1px solid white;
padding: 3px;

}

.topbar{
height: 45px;
background-image: linear-gradient(to right, #010081, #008080);
border: 3px solid #006880;
padding: 5px;
color: white;
}

.box1 { 
border: 3px solid #006880;
padding: 0px; 
max-width: 100%;
background-color: #ffffff;
}

.sidebox{
padding: 10px 20px 20px 5px;
background-color: #ffffff;
border: 2px solid #006880;
} 

.mainboxcontent{
padding: 5px 20px 15px 20px;
background-color: #ffffff;
border: 2px solid #006880 ;
}

.backgroundbox{ 
background-color: #2f3e46;
opacity: 1;
background-image: radial-gradient(#2a373f 0.65px, #2f3e46 0.65px);
background-size: 13px 13px;
padding: 30px 15px 10px;
width: 100%;
margin-top:5px ;
} 



hr {
display: block;
height: 1px;
border: 0;
border: 1px solid black;
margin:  0;
padding: 0;
}

	@media only screen and (max-width: 800px) {
            	#flex {
                	flex-wrap: wrap;
            	}

            	aside {
                	width: 100%;
            	} 
    
    
    	main {
                	order: 1;
            	}

            	#sidebar {
                	order: 2;
            	}