* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

@font-face { font-family: 'Source Sans Pro'; src: url(fonts/SourceSansPro-Regular.ttf); }
@import "fonts/fontawesome-free-5.12.1-web/css/all.css";

#container {
  font-family: 'Source Sans Pro', sans-serif;
  line-height: 150%;
  border: 5px solid #000;
  width: 90%;
  color: #333;
}
#container h1 { text-align: center; font-size: 200%; }
#container h3 { text-align: center; padding-top: 0.2em; font-size: 100%; }
#container a { color: #333; font-weight: bold; }


#pic img {
  display: block;
  height: auto;
  margin: auto;
}

#maintext p {
  margin: 1.5em 0;
}

#place-date { font-size: smaller; text-align: right; margin-bottom: 3em; }
#legal { font-size: 8pt; text-align: right; margin-top: 2em }
#legal a { text-decoration: none; }
.fas {font-size: 55%; margin-right: -2px; position: relative; top: -2px; }

/*large*/
@media (min-width: 768px) {
  #spacer { 
    width: 28%; 
    background-color: #999;
  }
  #container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 3em auto;
    max-width: 50em;
  }
  #main { 
    width: 72%;
  }
  #info { 
    margin: 4em auto; 
    display: flex;
    flex-direction: row;
    frex-wrap: nowrap;
    width: 90%;
  }
  #infotext {
    width: 70%;
    padding: 1em;
  }
  #pic { width: 30%; }
  #pic img { width: 100%; }
  #signatures { padding: 0.5em 0 1em 3em; }
  #maintext {
    width: 90%;
    margin: 4em auto 1em auto;
  }
  #maintext img {
    width: 100%;
    height: auto;
    margin: auto;
  } 
  #container h1 { margin-top: 5rem; }
}
/*small*/
@media (max-width: 767px) {
  #spacer { display: none; }
  #container { margin: 1em auto; }
  #info { margin: 1em auto; width: 95%; }
  #pic img { width: 50%; margin: auto; padding-bottom: 2em; }
  #signatures { padding-left: 1em; }
  #maintext {
    width: 95%;
    margin: 1em auto;
  }
  #container h1 { margin-top: 2rem; }
}