@font-face {
          font-family: 'JuniusX';
          src:url("./JuniusX-Regular.woff2");
          font-weight: normal;
          font-style:normal;
      }
      @font-face {
          font-family: 'JuniusX';
          src:url("./JuniusX-Bold.woff2");
          font-weight: bold;
          font-style:normal;
      }
      @font-face {
          font-family: "Junicode VF";
          src: url("JunicodeVF-Roman.woff2");
          font-style: normal;
          /*font-weight: 300 700;*/
      }
      @font-face {
          font-family: "Junicode VF";
          src: url("JunicodeVF-Italic.woff2");
          font-style: italic;
          /*font-weight: 300 700;*/
      }


      body {

          font-family: "Junicode VF", serif;

          font-variant-ligatures: discretionary-ligatures;
          font-feature-settings: "dlig";

          font-variant-numeric: oldstyle-nums proportional-nums;
          font-feature-settings: "onum", "pnum";

          padding: 0 8px;

      }


      .content {
          margin: 0 auto;
      }









      .logo {
          display: block;
          margin: 64px auto 32px;
      }




      .icons-box {
          display: flex;
          flex-wrap: wrap;

          margin: 64px 0px 64px;

          justify-content: space-around;
      }

      .icons-box div {


          font-variant-caps: small-caps;
          font-feature-settings: "smcp";

          font-weight: 700;
          font-stretch: 75%;

          font-size: 28px;


          writing-mode: vertical-lr;
          /*
           * text-orientation: upright;
           * letter-spacing: -12px;
           */

          height: 48px;
          width: 48px;

      }

      .icons-box div > img {
          height: 48px;
          width: 48px;
          margin-bottom: 8px;
      }


      .subtitle {
          text-align: center;

          font-size: 20px;
          font-style: italic;
          font-stretch: 110%;
          font-weight: 500;


      }

      .lang-select {
          display: block;
          text-align: center;

          font-size: 20px;
          font-style: italic;
          font-stretch: 110%;
          font-weight: 500;
      }

      .lang-select a {
          font-weight: 300;
          font-size: 16px;
      }
      .lang-select a:hover {
          text-decoration: underline;
      }



      .heading {
          font-size: 42px;
          font-variant-caps: small-caps;
          font-feature-settings: "smcp";
          font-style: italic;
          font-weight: 300;
          font-stretch: 80%;


          margin-top: 64px;
          margin-bottom: 0px;
          padding: 0px;
      }

      .heading-left {
          text-align: left;
      }

      .heading-right {
          text-align: right;
      }

      .heading img {
          height: 48px;
          width: 48px;
      }
      .heading-left img {
          margin-right: 16px;
      }

      .heading-right img {
          margin-left: 16px;
      }






      .newsletter-button {
          border: 2px solid black;
          border-bottom-width: 4px;
          border-radius: 24px;
          padding: 16px;

          text-align: center;

          font-size: 36px;
          font-style: italic;
          font-weight: 500;
          font-stretch: 110%;

          font-variant-alternates: styleset(Contextual-r-rotunda);
          font-feature-settings: "ss16", "hlig";

          backdrop-filter: blur(8px);
      }

      .newsletter-button:hover {
          text-decoration: underline;
      }

      .newsletter-button:active {
      }

      .ornm {
          font-feature-settings: "ornm";
          font-size: 18px;
          text-align: center;
      }

      footer {
          font-size: 24px;
          text-align: center;
          margin-top: 128px;
          margin-bottom: 64px;
      }

      .footer {
          font-stretch: 115%;
          font-weight: 600;
          font-style: italic;
          letter-spacing: 1.5px;
      }

      .mascot {
          display: block;
          height: 128px;
          width: 128px;
          margin: 64px auto 64px;

      }

      @media screen and (min-width: 768px) {
          .content {
              max-width: 768px;
          }

          .heading {
              font-size: 64px;
          }

      }