/* 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: white;
  color: black;
  font-family: Verdana;
}

header {
  position: sticky;
  text-align: center;
}

header h1 {
  font-size: 3em;
}

header nav {
  background-color: black;
  padding: 0.5em;
  /* Make navigation bar scroll with content normally but
  then stick to top of viewport */
  top: 0.5em;
}

header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  /* Display the navigation items in a row with equal space
  in between and less space at the ends  */
  display: flex;
  justify-content: space-around;
}

.nav1grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
}

.grid {
  margin-left: 20px;
  /* Display <article> and <aside> as two flexible
  columns, with <article> three times the width of <aside>,
  and a 20px gap */
  display: grid;
  grid-template-columns: 50px 900px 300px;
  gap: 20px;
}

.ima {
  width: 405px;
  height: 270px;
}

.imathumb {
  width: 96px;
  height: 96px;
}

.gallerythumb {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  grid-template-columns: 1fr 1fr 1fr;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 0.5em 1em;
}