body {
   background-color: #113639;
   font-family: "Brandon Grotesque";
   overflow: hidden;
}
.logo {
   text-align: center;
}
.subtitle {
   color: #fff;
   font-size: 16px;
   margin-top: 10px;
}
.title {
   color: #fff;
   font-weight: bold;
   font-size: 24px;
   margin-top: 18px;
   text-align: center;
}
.wrapper {
   align-items: center;
   display: flex;
   flex-direction: column;
   height: 80vh;
   justify-content: center;
   width: 100vw;
}

@font-face {
   font-family: "Brandon Grotesque";
   src:
      url("/shared/fonts/BrandonGrotesque-Black.woff2") format("woff2"),
      url("/shared/fonts/BrandonGrotesque-Black.woff") format("woff");
   font-weight: 900;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: "Brandon Grotesque";
   src:
      url("/shared/fonts/BrandonGrotesque-BlackItalic.woff2") format("woff2"),
      url("/shared/fonts/BrandonGrotesque-BlackItalic.woff") format("woff");
   font-weight: 900;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: "Brandon Grotesque";
   src:
      url("/shared/fonts/BrandonGrotesque-Bold.woff2") format("woff2"),
      url("/shared/fonts/BrandonGrotesque-Bold.woff") format("woff");
   font-weight: bold;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: "Brandon Grotesque";
   src:
      url("/shared/fonts/BrandonGrotesque-BoldItalic.woff2") format("woff2"),
      url("/shared/fonts/BrandonGrotesque-BoldItalic.woff") format("woff");
   font-weight: bold;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: "Brandon Grotesque";
   src:
      url("/shared/fonts/BrandonGrotesque-Light.woff2") format("woff2"),
      url("/shared/fonts/BrandonGrotesque-Light.woff") format("woff");
   font-weight: 300;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: "Brandon Grotesque";
   src:
      url("/shared/fonts/BrandonGrotesque-LightItalic.woff2") format("woff2"),
      url("/shared/fonts/BrandonGrotesque-LightItalic.woff") format("woff");
   font-weight: 300;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: "Brandon Grotesque";
   src:
      url("/shared/fonts/BrandonGrotesque-Medium.woff2") format("woff2"),
      url("/shared/fonts/BrandonGrotesque-Medium.woff") format("woff");
   font-weight: 500;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: "Brandon Grotesque";
   src:
      url("/shared/fonts/BrandonGrotesque-MediumItalic.woff2") format("woff2"),
      url("/shared/fonts/BrandonGrotesque-MediumItalic.woff") format("woff");
   font-weight: 500;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: "Brandon Grotesque";
   src:
      url("/shared/fonts/BrandonGrotesque-Regular.woff2") format("woff2"),
      url("/shared/fonts/BrandonGrotesque-Regular.woff") format("woff");
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: "Brandon Grotesque";
   src:
      url("/shared/fonts/BrandonGrotesque-RegularItalic.woff2") format("woff2"),
      url("/shared/fonts/BrandonGrotesque-RegularItalic.woff") format("woff");
   font-weight: normal;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: "Brandon Grotesque";
   src:
      url("/shared/fonts/BrandonGrotesque-Thin.woff2") format("woff2"),
      url("/shared/fonts/BrandonGrotesque-Thin.woff") format("woff");
   font-weight: 100;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: "Brandon Grotesque";
   src:
      url("/shared/fonts/BrandonGrotesque-ThinItalic.woff2") format("woff2"),
      url("/shared/fonts/BrandonGrotesque-ThinItalic.woff") format("woff");
   font-weight: 100;
   font-style: italic;
   font-display: swap;
}