@charset "utf-8";

:root {
  font-size: 16px;
}

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

body {
  color: #565656;
  font-family: "Times New Roman", Times, serif;
  font-size: 0.875em;
  line-height: 1.431em;
}

#wrapper {
  position: relative;
  max-width: 50rem;
  margin: 1rem auto;
  border: solid 1px #000;
  background-color: #fff;
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

:is(a:link, a:visited, a:hover, a:active) {
  color: #565656;
  text-decoration: none;
  display: inline-block;
}

a:hover {
  text-decoration: underline;
}

h1 {
  font-size: 2.1em;
  font-weight: 400;
  text-align: center;
  line-height: 120%;
  color: #002885;
  margin: 1rem 0;
}

h2 {
  font-size: 1.21em;
  line-height: 1.231em;
  color: #002885;
}

ul {
  margin: 0 0 1rem 1rem;
  line-height: 1.7;
}

ul li::marker {
  color: #565656;
}

header {
  padding: 5rem 5rem 2rem;
}

article {
  padding: 0 5rem;
}

article p {
  text-align: center;
}

footer {
  padding: 1rem 5rem 5rem;
}

footer h2 {
	margin-bottom: 1rem;
}

section {
  background: #d3d5e4;
  padding: 1rem 1.5rem;
  margin-bottom: 1rem;
}

span {
  color: #002885;
  text-decoration: underline;
}

@media only screen and (max-width: 49.98rem) {
  #wrapper {
    border: none;
    margin: 0 auto;
    hyphens: auto;
  }
}

@media only screen and (max-width: 48rem) {
  :is(header, footer) {
    padding: 1rem;
  }

  article { 
    padding: 0 1rem;
  }
}

@media only screen and (max-width: 30rem) {
  header {
    display: flex;
    justify-content: center;
  }

  article p:first-of-type br {
    display: none;
  }
}