:root {
  --text-color: #222;
  --accent-color: #76277799;
  --body-bg: #e6d849;
}

p a {
  background-color: #ffffff80;
}

/* @font-face {
  font-family: "Frankfurter Venetian";
  src: url(./FrankfurterVenetian.woff);
  font-weight: normal;
} */

@font-face {
  font-family: "Frankfurter";
  src: url(./Frankfurter.woff);
  font-weight: normal;
  font-display: block;
}

@font-face {
  font-family: "Lucifer";
  src: url(./Lucifer.woff);
  font-weight: normal;
  font-display: block;
}

.font-frankfurter {
  font-family: "Frankfurter";
  font-weight: normal;
}

.font-lucifer {
  font-family: "Lucifer";
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  word-spacing: -0.2em;
}

.section--title {
  background-color: #e6d849;
  align-items: center;
  justify-content: center;
  font-size: 20vw;
  /* box-shadow: 0 0 50px #00000020; */
  overflow: hidden;
  /* min-height: 100vh; */
  aspect-ratio: 1/1.3;
  @media (orientation: landscape) {
    /* min-height: 100vmax; */
    aspect-ratio: 1;
    font-size: 15vw;
  }

  .section--bgImage-inner {
    /* mix-blend-mode: multiply; */
    /* z-index: 1; */
    width: 60%;
    height: auto;
    margin-inline: auto;
    margin-top: 250px;
    /* min-width: 400px; */
    @media (orientation: landscape) {
      margin-top: 2em;
    }
  }

  .section--bgImage {
    width: 100%;
  }
}

.title-container {
  --title-text-margin: 0.68em;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding-top: 0.5em;
  top: 50%;
  left: 50%;
  /* z-index: 2; */
  text-align: center;
  transform: translate(-50%, -50%);
  /* mix-blend-mode: multiply; */
  /* opacity: 0.75; */
}

.title-text {
  font-family: "Lucifer", "Frankfurter Venetian";
  font-size: inherit;
  font-weight: normal;
  position: absolute;
  text-transform: uppercase;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  line-height: 1;
  min-width: max-content;
  letter-spacing: -0.08em;
  text-shadow: 0.03em 0.03em 0 #ff657abd, -0.03em -0.03em 0 #2dcd5a;
  color: var(--accent-color);
  z-index: 2;
  mix-blend-mode: multiply;
  /* filter: blur(1px); */
  word-spacing: -0.15em;

  + .title-text {
    /* text-shadow: none; */
    margin-top: var(--title-text-margin);
    opacity: 0.95;
    /* mix-blend-mode: multiply; */
    /* font-size: 0.95em; */
    /* filter: blur(1px); */
    transform: translateX(-50%) rotate(-2deg);
    z-index: 0;
    + .title-text {
      margin-top: calc(var(--title-text-margin) * 2);
      opacity: 0.9;
      /* font-size: 0.9em; */
      /* filter: blur(2px); */
      transform: translateX(-50%) rotate(-0.5deg);
      + .title-text {
        margin-top: calc(var(--title-text-margin) * 3);
        opacity: 0.85;
        transform: translateX(-50%) rotate(0deg);
        /* font-size: 0.85em; */
        /* filter: blur(3px); */
        transform: translateX(-50%) rotate(-2deg);
        + .title-text {
          margin-top: calc(var(--title-text-margin) * 4);
          opacity: 0.8;
          /* font-size: 0.8em; */
          /* filter: blur(4px); */
          + .title-text {
            margin-top: calc(var(--title-text-margin) * 5);
            opacity: 0.75;
            transform: translateX(-50%) rotate(-0.5deg);
            /* font-size: 0.75em; */
            /* filter: blur(5px); */
            + .title-text {
              margin-top: calc(var(--title-text-margin) * 6);
              opacity: 0.7;
              transform: translateX(-50%) rotate(-2deg);
              /* font-size: 0.7em; */
              + .title-text {
                margin-top: calc(var(--title-text-margin) * 7);
                opacity: 0.65;
                /* font-size: 0.65em; */
                + .title-text {
                  margin-top: calc(var(--title-text-margin) * 8);
                  opacity: 0.6;
                  /* font-size: 0.6em; */
                  + .title-text {
                    margin-top: calc(var(--title-text-margin) * 9);
                    opacity: 0.55;
                    /* font-size: 0.55em; */
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.text-container {
  position: absolute;
  right: 20%;
  top: 45%;
  z-index: 2;

  p {
    color: #000000cc;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 10ch;
    height: 10ch;
    min-width: 120px;
    min-height: 120px;
    background-color: #f5f1d3;
    border-radius: 50%;
    padding: 1em;
    text-align: center;
    transform: translate(-50%, -50%);
    word-spacing: -0.2em;
    line-height: 0.65;
    font-size: clamp(22px, 3vw, 60px);
    box-shadow: 2px 2px 1px #00000030, 5px 5px 10px #00000020,
      inset -5px -5px 10px #ffffff30, inset -1px -1px 1px #00000020,
      inset 15px 15px 10px #00000010, inset 1px 1px 1px #ffffff80;
    z-index: 3;
    transform: rotate(-10deg) scale(1.01);
    opacity: 0.95;
  }
  .lang {
    position: absolute;
    top: -1em;
    left: 0;
    z-index: 1;
  }
  .fr {
    left: 1.5em;
    transform: rotate(4deg);
    color: var(--body-bg);
    background-color: #222;
    box-shadow: 2px 2px 1px #00000030, 5px 5px 10px #00000020,
      inset -1px -1px 1px #00000020, inset 15px 15px 10px #00000010,
      inset 1px 1px 1px #ffffff80;
  }
  .ar {
    left: -0.5em;
    top: -2.5em;
    transform: rotate(-2deg);
    background: #eee47e;
    color: var(--accent-color);
    opacity: 0.9;
  }
}

.title-logo {
  position: absolute;
  bottom: 5%;
  left: 50%;
  width: 12%;
  max-width: 200px;
  min-width: 80px;
  z-index: 5;
  opacity: 0.9;
  transform: translateX(-50%) rotate(-3deg);
  mix-blend-mode: multiply;
}

.section--inner {
  .font-lucifer {
    color: var(--accent-color);
    font-size: 4em;
    /* text-shadow: 0em 0.05em 0 white; */
    transform: rotate(-2deg);
    text-shadow: 0.05em 0.05em 0 #ff657abd, -0.05em -0.05em 0 #2dcd5a;
  }
}

footer .section--bgImage-container-fixed {
  background-color: var(--body-bg);
  img {
    min-width: 500px;
    max-width: 60vw;
    max-height: 120vh;
    height: auto;
    object-fit: contain;
    bottom: 0;
    top: auto;
    transform: translateX(-50%);
    opacity: 0.9;
  }
}