@import url(reset.css);
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Poppins:wght@500&display=swap");
.clearfix, .cf {
  zoom: 1; }
  .clearfix:before, .clearfix:after, .cf:before, .cf:after {
    content: "";
    display: table; }
  .clearfix:after, .cf:after {
    clear: both; }

* {
  box-sizing: border-box; }

html, body {
  min-height: 100vh;
  max-width: 100vw;
  width: 100vw;
  overflow: auto;
  color: #000; }

body {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }

h1 {
  display: none;
  /*
    font-family: $rubik;
    font-size: 28px;
    line-height: 32px;
    text-transform: uppercase;
    text-align: left;
    font-weight: 500;
    
    &:after {
      display: block;
      content: "";
      width: 100%;
      height: 3px;
      background-color: $blue;
      margin-top: 0.1em;
    }
    */ }

p {
  font-family: "Poppins", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 32px;
  text-align: left; }

a, a:hover, a:visited {
  text-decoration: none;
  color: #000;
  padding: 0.3em 0.7em;
  border: 3px currentColor solid;
  border-radius: 4px; }

.main {
  overflow: hidden;
  height: 100%;
  min-height: 100%;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start; }
  .main header {
    display: flex;
    align-items: center;
    padding-top: 1em;
    padding-bottom: 1em;
    width: 100%; }
    .main header img {
      max-width: Min(300px, 80%);
      margin: 0 auto; }
  .main article {
    max-width: 1200px;
    margin: 0;
    padding: 0;
    flex-grow: 1;
    margin-top: 10vh;
    margin-bottom: 10vh; }
    .main article .content {
      box-sizing: border-box; }
      .main article .content p {
        font-size: 42px;
        line-height: 64px;
        letter-spacing: 6.4px;
        color: #000; }
  .main footer {
    padding-top: 2em;
    padding-bottom: 2em;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-top: 3em; }
    .main footer .contact {
      display: flex;
      margin: 0.7em; }

@media only screen and (max-width: 767px) {
  .wrap {
    padding-left: 10vw;
    padding-right: 10vw; }
  .main {
    margin: 10vh 0; }
    .main footer {
      margin-top: 3em; }
      .main footer .contact {
        font-size: 16px; } }

@media only screen and (min-width: 768px) {
  .wrap {
    padding-left: 20vw;
    padding-right: 20vw; }
  .main {
    margin: 10vh 0; } }