/* Start with core styles outside of a media query that apply to mobile and up */
/* Global typography and design elements, stacked containers */
body { font-family: Roboto, Helvetica, san-serif; ;background-color:black}
H1 { }
a:link { }
#loginForm{padding-top:330px; }
#mylogin{}
p{font-size:20px !important}
a{text-shadow: none !important}

/* Stack the two content containers */
.main,
.sidebar { display:block; width:100%; }

/* First breakpoint at 576px */
/* Inherits mobile styles, but floats containers to make columns */
@media all and (min-width: 36em){
	.main { float: left; width:60%; }
	.sidebar { float: left; width:40%; }
}

/* Second breakpoint at 800px */
/* Adjusts column proportions, tweaks base H1 */
@media all and (min-width: 70em){
	
	#mylogin{ }
	#loginForm, #mywrapper{width:600px !important; margin: auto !important; width: 50% !important;}
	.main { width:70%; }
	.sidebar { width:30%; }

	/* You can also tweak any other styles in a breakpoint */
	H1 { color: white; font-size:1.2em; text-align: center }
}