@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100..900;1,100..900&display=swap');

html, body {
height: 100%;
}

body {
background-color: #817B7B;
}

.main {
width: 1000px;
margin: 0px auto;
background-color: #7F7171;
}

.header {
background-color: #454224;
}

#menuButton {
display: none;
}

#menu {
display: block;
}

a.button {
width: 170px;
font-family: "Saira", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
text-decoration: none;
background-color: #385207;
display: inline-block;
padding: 10px;
margin: 0px;
color: #BDD220;
}

a.button:hover {
background-color: #960;
}

h1 {
font-family: "Saira", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
font-size: 30px;
margin:	20px;
}

p {
font-family: "Saira", sans-serif;
font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;
font-variation-settings:
"wdth" 100;
line-height: 140%;
margin:	20px;
}

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

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

  #menuButton {
  display: block;
  }

  #menu {
  display: none;
  }

}