@font-face {
  font-family: Quicksand;
  font-style: normal;
  font-weight: 500 700;
  font-display: fallback;
  src: url("../fonts/quicksand.woff2") format('woff2');
  font-stretch: normal;
}
:root {
  --primary-color: #d8a087;
  --primary-color-light: #e6c2b2;
  --primary-font: 'Quicksand';
}
* {
  outline: none !important;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  font-weight: 500;
  font-family: var(--primary-font);
  background-color: var(--primary-color-light);
}
body main {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr -webkit-max-content 1fr;
  -ms-grid-rows: 1fr max-content 1fr;
  grid-template-rows: 1fr -webkit-max-content 1fr;
  grid-template-rows: 1fr max-content 1fr;
  min-height: 100%;
  padding: 48px 16px;
}
body main div.content-wrapper {
  display: -ms-grid;
  display: grid;
  justify-items: center;
  -ms-grid-row: 2;
  grid-row: 2;
}
@media (min-width: 768px) {
  body main div.content-wrapper {
    max-width: 768px;
    margin: 0 auto;
    padding: 96px 32px;
    border: 2px dashed #fff;
  }
}
body main div.content-wrapper img {
  width: 280px;
  height: auto;
  margin: 0 auto 64px;
}
@media (min-width: 768px) {
  body main div.content-wrapper img {
    width: 450px;
    margin-bottom: 64px;
  }
}
body main div.content-wrapper h1 {
  line-height: 1.2;
  margin: 0 0 128px;
  padding: 0 16px;
  color: #fff;
  font-size: 34px;
  font-weight: 500;
  text-align: center;
}
@media (min-width: 768px) {
  body main div.content-wrapper h1 {
    font-size: 36px;
  }
}
body main div.content-wrapper p {
  line-height: 1.4;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 16px;
  color: #fff;
  font-size: 22px;
  text-align: center;
}
@media (min-width: 768px) {
  body main div.content-wrapper p {
    font-size: 24px;
  }
}
body main div.content-wrapper p.coming-soon {
  margin-bottom: 32px;
  font-size: 28px;
  font-weight: 600;
}
@media (min-width: 768px) {
  body main div.content-wrapper p.coming-soon {
    font-size: 32px;
  }
}
body main div.content-wrapper p.coming-soon::before {
  display: block;
  font-size: 32px;
  content: '🧵';
}
body main div.content-wrapper p a {
  color: #fff;
  font-weight: 600;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  text-decoration-style: dotted;
}