@font-face {
  font-family: "Ponaire";
  src: url("./fonts/PonaireRegular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Folio";
  src: url("./fonts/FolioStdLight.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Folio";
  src: url("./fonts/FolioStdMedium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

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

html,
body {
  height: 100%;
}

.background {
  min-height: calc(var(--vh, 1vh) * 100);
  background: url("images/background.jpg") center / cover no-repeat;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

.container {
  margin-top: 50vh;
  height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.soon-container {
  text-align: center;
  color: white;
  font-family: "Ponaire";
  color: #a4e1e2;
}

.soon-container h1 {
  font-size: 64px;
}

.soon-container h2 {
  font-size: 48px;
  margin-bottom: 12px;
}

.social-container {
  text-align: center;
  margin-bottom: 5vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Folio";
}

.social-container span {
  display: block;
  color: #a4e1e2;
}

.link {
  position: relative;
  text-decoration: none;
  width: 192px;
  height: 45px;
  cursor: pointer;
  display: block;
}

.link span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  color: #4a4093;
  font-weight: 500;
}

.social-container .social-header {
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 20px;
}

.social-container .social-subheader {
  font-size: 16px;
  font-weight: 300;
  margin-bottom: 8px;
}