base.css

body {
  margin: 0;
  padding: 0;
  padding-top: min(30px, 5%);
  font-family: 'Open Sans', Helvetica, sans-serif;
  font-size: 16px;
  color: #1A1818;
  background: #eee;
}

h1 {
  display: flex;
  flex-flow: nowrap;
  overflow: hidden;
  padding: 0;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-style: normal;
  background: #d6eed4;
  margin-bottom: min(30px, 5%);
}
h1 > span {
  padding: 5px 40px 5px min(30px, 5%);
  background-image: linear-gradient(125deg, #36A15C 50%, #d6eed4 50%);
  background-size: 25px auto;
  background-position: right;
  background-repeat: no-repeat;
  background-color: #36A15C;
  color: #fff;
}

/* Safari browsers: any version and any device */
@media only screen and (-webkit-min-device-pixel-ratio:0) {
  h1 > span {
    background-size: 25px 30px;
    background-position-x: right;
    background-position-y: 50%;
  }
}

h1 > span a:link {
  text-decoration: none;
  color: #fff;
}
h1 > span a:visited {
  text-decoration: none;
  color: #fff;
}
h1 > span a:hover {
  text-decoration: none;
  color: #fff;
}
h1 > span a:active {
  text-decoration: none;
  color: #fff;
}

a:link {
  text-decoration: none;
  color: #0c72a1;
}
a:visited {
  text-decoration: none;
  color: #0c72a1;
}
a:hover {
  text-decoration: underline;
  color: #0c72a1;
}
a:active {
  text-decoration: underline;
  color: #0c72a1;
}

div.section {
  max-width: 1000px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 0 15px #ccc;
}
div.section:last-of-type {
  padding-bottom: min(45px, 7.5%);
}
div.text {
  max-width: 850px;
  line-height: 28px;
  padding: 10px min(30px, 5%);
}

div.top-item {
  display: flex;
  flex-direction: column;
  padding-top: min(15px, 2.5%);
  padding-bottom: min(30px, 5%);
  margin: 0;
}
div.top-item > a:link {
  text-decoration: none;
  color: #1A1818;
}
div.top-item > a:visited {
  text-decoration: none;
  color: #1A1818;
}
div.top-item > a:hover {
  text-decoration: none;
  background: #d8d8d844;
  color: #1A1818;
}
div.top-item > a:active {
  text-decoration: none;
  background: #d8d8d844;
  color: #1A1818;
}
div.top-item > a span.link {
  color: #0c72a1;
}
div.top-item > a:hover span.link {
  text-decoration: underline;
  color: #0c72a1;
}
div.top-item > a:active span.link {
  text-decoration: underline;
  color: #0c72a1;
}

div.motto {
  font-family: 'Montserrat', sans-serif;
  font-size: min(56px, 8.5vw);
  font-style: italic;
  margin: 0 min(30px, 5%);
}
div.motto > span {
  display: inline-block;
  padding: 0 min(3vw, 20px) 0 1vw;
  margin: 0 min(5vw, 30px) 15px -5px;
  box-shadow: 3px -3px #0089ecdd;
  text-align: left;
  background: #ffffffc0;
}