/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

* {
  box-sizing: border-box;
}

body {
  background-color: #003329;
  color: darkseagreen;
  font-family: "Trebuchet MS", Tahoma, sans-serif;
  margin: 0;
}

img {
  /* object-fit: contain; */
  max-width: 100%;
  height: auto;
}

#center {
  max-width: 75%;
  margin: 0 auto;
}

/*Menu:*/
#menu {
  opacity: 0.95;
  height: auto;
  margin: 0;
  padding: 0;
  background-color: black;
  width: 100%;
  /*overflow: hidden; -- removed so it doesn't overlap other elements for now*/
}

nav {
  display: flex;
  justify-content: space-evenly;
}

/* Current comments below present until I know whether the nav section above does what I want */
#menu a {
  font-weight: 800;
  display: inline-block;
  color: white;
  text-align: center;
  padding: 7px;
  text-decoration: none;
}

#menu a:hover:not(.active) {
  background-color: lightsteelblue;
}

#menu .active {
  color: lightpink;
  background-color: steelblue;
}

#flex {
  display: flex;
}

/* body header h1 { */
h1, h2, h3, h4, h5, h6 {
  display: table; /* forces background colour to stay contained to the width of the contents*/
  background: #4bfab7;
  background: linear-gradient(90deg, rgba(75, 250, 183, 1) 0%, rgba(255, 177, 51, 1) 65%, rgba(255, 0, 170, 1) 100%);
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

main {
  background-color: darkslategrey;
  flex: 1;
  padding: 20px;
  /* Remember to add an 'order: x;' here when adding asides etc */
}

footer {
  background-color: black;
  opacity: 0.95;
  width: 100%;
  text-align: center;
  padding: 7px;
}

footer img {
  height: 25px;
}

@media only screen and (max-width: 800px) {
  
  /* So that images (like in Graveyard) don't extend the page to the right */
 /* main img{
    max-height: 100%;
    max-width: 100%;
  }*/
  
  #flex {
    flex-wrap: wrap;
  }
  
  #menu {
    flex-wrap: wrap;
  }
  
  /* Remember to add main{} and aside{} with 'order: x;' here if asides are added later */
}