/* Optional: drop the .otf into static/fonts/ and it will be used.
   Without the file browsers simply fall back to monospace. */
@font-face {
  font-family: "Iosevka Nerd Font";
  src: url('../fonts/SFMono Regular Nerd Font Complete.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Base Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #faf6ef;  /* milky */
  color: #111;
  font-family: "Iosevka Nerd Font", monospace;
  font-size: 14px;
  line-height: 1.6;
  max-width: 600px;
  margin: 4rem auto;
  padding: 0 1.5rem;
  /* pin the footer to the bottom of the screen */
  min-height: calc(100vh - 8rem);  /* 100vh minus body's 4rem top/bottom margins */
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
  font-size: 12px;
  color: #888;
}


/* Links */
a { color: #111; text-decoration: underline; }
a:hover { background: #111; color: #fff; text-decoration: none; }


/* Images */
.hero-img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 2rem;
}
/* Typography */
h2 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

p { margin-bottom: 1.5rem; }

/* Lists */
ul { list-style: none; margin-top: 1rem; }

.dot-list li::before {
  content: "✦  ";
  color: #888;
}

nav ul li::before {
  content: "❯  ";
  color: #111;
}


/* Gallery Styling */
.gallery {
  margin-top: 2rem;
}

.shot {
  margin-bottom: 3rem; /* Spacing between different posts */
}


.shot img {
  width: 100%;
  height: auto;
  display: block;
  margin-left: auto;   /* Centers the image */
  margin-right: auto;  /* Centers the image */
  margin-bottom: 0.5rem;
}

.shot figcaption {
  font-size: 12px;
  color: #666;
  text-align: center;  /* This centers the [comment] text too */
}