/* alr yeah i might use some comments, dont blame me for that*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    image-rendering: optimizeSpeed; /*STOP SMOOTHING, GIVE ME SPEED*/
    image-rendering: -moz-crisp-edges; /*Firefox*/
    image-rendering: -o-crisp-edges; /*Opera*/
    image-rendering: -webkit-optimize-contrast; /*Chrome (and eventually Safari)*/
    image-rendering: pixelated; /*Universal support since 2021*/
    image-rendering: optimize-contrast; /*CSS3 Proposed*/
    -ms-interpolation-mode: nearest-neighbor; /*IE8*/
}

body {
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/*thanks to hedger wang for these amazing wii buttons :D*/
a.button, span.button, del.button{
	
	display:-moz-inline-box;
	display:inline-block;
	cursor:pointer;
	border:none;

	/*
	for Safari, read this first
	http://creativebits.org/webdev/safari_background_repeat_bug_fix
	*/
	
	background:url(/img/btn0.png) no-repeat;
	
	height:30px;
	text-decoration:none;
	color:#2e523b;
	font-style:normal;
	margin:0 6px 0px 0;
	padding:0 10px 0 0;	
	vertical-align:middle;
	

	zoom:1;
	
	
	
	_position:relative;
	_width:10px;	
	_overflow-y:hidden;
}

a.button span, span.button button, span.button input, del.button span{
	
	font-weight:normal;	
	white-space:nowrap;
	cursor:pointer;

	display:-moz-inline-box;
	display:inline-block;
	font:12px/1 Arial;	
	background:url(/img/btn0.png) 100% 0 no-repeat;
	height:30px;
	padding:8px 10px 0 0;
	margin:0 -16px 0 10px;
	border:none;
	vertical-align:text-top;
	
	zoom:1;
	_position:relative;
	_padding-right:12px;
	_margin-right:-10px;	
	_display:block;
	_top:0;
	_right:-5px;
	
}

del.button{
	cursor:not-allowed;	
	background-position:0 -120px;
	color:#888;
}
del.button span{
	cursor:default;
	background-position:100% -120px;
}


span.button button, span.button input{
	padding-top:0px;
	line-height:2.5;/*Opera need this*/
}


/** optional **/
/*
a.button:visited{
	color:#aaa;
}
*/


/*Hover Style*/

a.button:hover, span.button:hover, 
span.button-behavior-hover{
	background-position:0 -60px;
	color:#222;
	text-decoration:none;
}

a.button:hover span, span.button:hover button, 
span.button-behavior-hover button, span.button-behavior-hover input{
	background-position:100% -60px;
}


a.button:active, a.button:focus span{
	color:#3366FF;
}




del.button-behavior-hover, del.button:hover{
	background-position:0 -180px;
	cursor:not-allowed;
}

del.button-behavior-hover span, del.button:hover span{
	background-position:100% -180px;
	cursor:not-allowed;
	
}

/*Optional hack for IE6 to simulate :hover selector*/

span.button button, del.button span, span.button input{


	
	_behavior:expression(
		(function(el){

			if( typeof( behavior_onMouseEnter) == 'undefined'){

				
				behavior_onMouseEnter = function(el){
					
					var dEl = this.parentNode;					
					var sClass = dEl.className ;
					dEl.__defaultClassName = sClass ;
					dEl.className = sClass + ' button-behavior-hover';	
					this.setCapture();
				};

				behavior_onMouseLeave = function(el) {
					var dEl = this.parentNode;
					dEl.className = dEl.__defaultClassName ;
					dEl.__defaultClassName = undefined;
					this.releaseCapture();
				};


			};
			
			
			el.runtimeStyle.behavior = 'none';
			el.onmouseenter = behavior_onMouseEnter;
			el.onmouseleave = behavior_onMouseLeave;
			
			
		})(this));
}

/*my stuff*/
.content {
    position: relative;
    z-index: 1;
    color: white;
    font-family: "Sono", monospace;
    display: flex;
    flex-wrap: wrap;
    width: 700px;
    height: 600px;
    border: 3px solid black;
    border-radius: 20px;
    overflow: hidden;
    margin: 40px auto;
}

.header {
    width: 100%;
    height: 75px;
    border: 3px solid black;
}

.nav {
    width: 140px;
    height: calc(100% - 75px);
    border-right: 3px solid black;
    display: flex;
    flex-direction: column;
}

.main {
    width: calc(100% - 140px);
    height: calc(100% - 75px);
}