@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Parkinsans:wght@300..800&display=swap);



body{
	font-family: Arial, Helvetica, sans-serif;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #9E9E9E ;
}
header{
	background-color: #263238 ;
	height: 60px;
	flex-shrink: 0;
}


header h1{
	font-family:"Open Sans", sans-serif ;
	font-size: 40px;
	color:#43A047;
}
nav{
	background-color: #263238;
	height: 30px;
	display:flex;
	flex-direction:row;
}
nav li{
	display: inline-block;
	list-style: none;
	height: 30px;
}
nav a{
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0, 20px, 0, 20px;
	color: #8E24AA ;
	text-decoration: none;
}
#main-nav{
    display:flex;
    justify-content:space-between;
}

nav a:hover{
	text-decoration: underline;
	transform: scale(1.1);
}

#content {
	display: flex;
	flex: auto;
	flex-direction: row;
}

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

aside{
	width: 30%;
	box-sizing: border-box;
	padding: 20px;
	background-color: #607D8B;
}

footer{
	background-color: #263238;
	color: #43A047;
	font-size: 85%;
	flex-shrink: 0;
}

h1{
	color: #0288D1;
	font-size: 140%;
	margin-bottom: 20px;
}

p{
	margin-bottom: 12px;

}

pre{
    background-color: black;
    color: green;
    padding: 20px;
    border-radius: 12px;
    display:inline-block;
}

#menu-button{
    display:none;
    
}

@media all and (max-width : 800px) { 
    header{
        height:44px;
    }
    #content{
        display:block;
        
    }
    main{
        width:100%;
    }
    aside{
        width:100%;
    }
    #menu-button{
        display:block;
        position:absolute;
        top:0;
        right:0;
        height:44px;
        text-align:center;
        line-height:44px;
        color:#43A047;
    }
    nav {
        height:auto;
        display:none;
    }
    .open{ 

        display: block; 

    }

} 


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

#image-gallery{
  width:380px;
}

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