/* 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;
}

.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 {
  background-color: black;
  padding: 0.5em;
  /* Make navigation bar scroll with content normally but
  then stick to top of viewport */
  top: 0.5em;
  position: sticky;
}

nav 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;
}

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