@import url('https://fonts.googleapis.com/css2?family=Intel+One+Mono:ital,wght@0,300..700;1,300..700&display=swap');
html, body {
	height: 100%;
    background-color: white;
	margin: 0px;
	}

#menu {
    display: none;
    }

#menu p a {
	display: inline-block;
	width: 120px;
	font-size: 21px;
	color: royalblue;
	padding: 5px 10px;
	}

a {
	text-decoration: underline;
	color: dodgerblue;
	font-family: Intel One Mono;
	font-size: 21px
	}

#menu p a:hover {
	background-color: rgba(40,0,200,0.20);
	}
	
#side {
	padding: 10px;
	background-color: lightskyblue;
	}
	
#main {
	padding: 50px;
	}

h1 {
	font-family: Impact, Haettenschweiler, 'Franklin Gothic Bold', 'Arial Black', 'sans-serif'serif;
	color: indianred;
	font-size: 50px;
	}

h2 {
	font-family: Impact, Haettenschweiler, 'Franklin Gothic Bold', 'Arial Black', 'sans-serif'serif;
	color: cadetblue;
	font-size: 40px;
	}

p {
	font-family: Baskerville, 'Palatino Linotype', Palatino, 'Century Schoolbook L', 'Times New Roman', 'serif'sans-serif;
	font-size: 25px;
	color: cornflowerblue;
	}

img {
	display: block;
	margin: 20px auto;
	}


@media screen and (max-width:600px) {

  /* CSS for screens that are 500 pixels or less */
  
  .main {
  width: 300px;
  }
  
  img {
  max-width: 300px;
  height: auto;
  }
  
  a.button {
  width: 300px;
  }

  #menuButton {
  display: block;
  }

  #menu {
  display: none;
  }

}