@import url('https://fonts.googleapis.com/css2?family=Play&display=swap');
/*i also wanna use monofonto as a font type*/

.clearfix::after{
    content: "";
    display: table;
    clear: both;
}

body {
	font-family: courier new;
	font-size: 12px;
	color: limegreen;
	background-color: black;
}

header {
	background-color: black;
	height: 60px;
}

header h1 {
	font-family: 'Play', sans-serif;
	font-size: 36px;
	line-height: 60px;
}

nav {
	background-color: Black;
	border: 2px dashed green;
}

nav li {
	display: inline;
	list-style: none;
}


nav a {
	display: inline-block;
	padding: 10px;
	color: orange;
}

H1 {
	color: limegreen;
	font-size: 140%;
	font-weight: bold;
	margin-bottom: 12px;
}

P {
	line-height: 16px;
	margin-bottom: 12px;
}

footer {
	background-color: black;
	font-size: 85%;
	padding: 10px;
	/*position: absolute;
    bottom:0px;
    left:0px;*/

}

main{
	float: left;
	box-sizing: border-box;
	padding: 20px;
	width: 70%;
}

aside{
	float: left;
	box-sizing: border-box;
	padding: 20px;
	width: 30%;
}

.left{
	float: left;
	padding-right: 15px;
}

.right{
	float: right;
}

.w-50{
	width: 50%;
}

.w-25{
	width: 25%;
}

h2{
	font-size: 15px;
	padding: 10px;
}

h3{
	margin: 12px;
	padding: 20px;
}

ul{
	color: orange;
	margin: 12px;
	padding: 10px;
	line-height: 16px;
}

a{
	color: orange;
}

ol{
	list-style-type: square;
}

label{

}

pre{
	background-color: black;
	color: yellow;
	padding: 15px;
	border-radius: 8px;
}

#normal-list{
	color: limegreen;
}

#blog-link{
	border: 2px solid green;
}

input[type=button]{
      border:2px solid gray;
      background-color: #3333;
      border-radius: 4px;
      padding:10px;
      color: darkgoldenrod;
      font-weight: bold;
    }

    #image-gallery{
      width:380px;
    }

    #image-gallery #mainImg{
      width:100%;
      border: 2px solid #333333;
    }

#caption {

	padding: 5px;
	margin: 5px;
}

#mobile-nav-button{
	position: absolute;
    top:0px;
    right:0px;
    width:44px;
    height:44px;
    font-weight: bold;
    line-height: 44px;
    text-align: center;
    cursor:pointer;
    display:none;

}

@media all and (max-width : 800px){
	main, aside{
		float: none;
		width: 100%;
	}

	#mobile-nav-button{
		display: block;
	}

	#main-nav {
		position: absolute;
		top: 60px;
		height: 100%;
		width: 0;
		transition: width .5s;
		z-index: 100;
	}

	#main-nav li{
		overflow: hidden;
	}

	#main-nav.show{
		width: 250px;
	}

	#main-nav ul li{
		display: block;
	}
}