@import url('https://fonts.googleapis.com/css2?family=GFS+Didot&family=Open+Sans&display=swap');

:root {
  /* https://coolors.co/383f51-dddbf1-3c4f76-d1beb0-ab9f9d */
  --charcoal: #383F51; /* charcoal */
  --y-in-mn-blue: #3C4F76;
  --quick-silver: #AB9F9D;
  --pale-silver: #D1BEB0;
  --lavender-web: #DDDBF1;

  --heading-font: 'GFS Didot', Tahoma, serif;;
  --paragraph-font: 'Open Sans', Arial, sans-serif;;

}

html {
    background-color: var(--y-in-mn-blue);
    scroll-behavior: smooth;
    align: center;
  }

#content {
  margin: 0px auto;
  padding: 1em;
  max-width: 960px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  color: lavender;
  font-size: 2em;
}

p, li, a, a:visited, figcaption {
  font-family: var(--paragraph-font);
  color: lavender;
  font-size: 1em;
}

img {
  max-width: 100%;
}

/* header */

.logo-box {
  display: block;
  text-align: left;
}

h1 {
  font-size: 3em;
  padding: 30px 0 30px 30px;
}

#site-logo {
  max-width: 7em;
  float: left;
  padding: 0px 0;
}

/* nav */

nav a, nav a:visited {
  font-family: var(--heading-font);
  font-size: 1.25em;
  color: var(--pale-silver);
  font-weight: bold
}

nav a:hover {
  color: lavender;
}

/* screenshots */

.screenshot {
  padding-bottom: 2em;
}

figcaption {
  text-align: left;
  font-style: italic;
  padding-left: 1em
}

/* footer */
#copyright {
  font-size: .9em;
  opacity: 50%;
  text-align: center;
}

#exe-box {
  display: none;
}