@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-VariableFont_wght.woff2");
}

@font-face {
  font-family: "Twemoji";
  src: url("fonts/Twemoji.Mozilla.subset.woff2");
}

body {
  margin: 40px auto;
  max-width: 750px;
  line-height: 1.6;
  font-size: 16px;
  color: #202020;
  background-color: #e1f2f7;
  font-family: "Twemoji", "Source Sans 3", Arial, sans-serif;
  padding: 0 10px
}

emo {
  font-size: small;
}

a.text:link,
a.text:visited {
  color: #202020;
  background-color: #e0dbe1;

  text-decoration: none;
}

a.text:hover,
a.text:active {
  color: #1a5a8c;
  text-decoration: underline;
}



h1,
h2,
h3,
h4 {
  line-height: 1.2
}

mildlybold {
  font-weight: 500;
}

mildlylight {
  font-weight: 300;
}

a.map:link,
a.map:visited {
  opacity: 0.7;
  font-size: 20px;
  text-decoration: none;
}

a.map:hover,
a.map:active {
  opacity: 1;
  font-size: 26px;
  text-decoration: none;
}

/* Thanks Claude! */
.image-container {
  position: relative;
}

.image-container img {
  max-width: 100%;
  max-height: 11em;

  box-shadow: 5px 5px 10px 0px #393e3991;
}

.image-container img:hover {
  box-shadow: 5px 5px 10px 0px #44626b;
}


.image-container a {
  text-decoration: none;
}


.map-link {
  position: absolute;
  bottom: 4px;
  left: 4px;
}

.map-link a {
  text-decoration: none;
}

.image-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1em;
  align-items: flex-start;
}

/* Please reload this! */