:root {
  --text-color: #444;
  --accent-color: #ee375a80;
  --body-bg: #ede3da;
}

p a {
  background-color: #9ec61960;
}

.section--title {
  background-color: #251d13;
  flex-direction: column;
  box-shadow: 0 2px 15px #00000040;
  overflow: hidden;
  transform: skew(0, 0.5deg);
  top: -10px;
  padding-top: 10vh;

  .section--bgImage {
    width: 60%;
    height: auto;
    margin-inline: auto;
    margin-top: 250px;
    min-width: 400px;
    @media (orientation: landscape) {
      margin-top: 10vh;
    }
  }
}

.title-container {
  position: absolute;
  left: 50%;
  top: 15%;
  transform: translateX(-50%) rotate(-1deg);
  z-index: 1;
  @media (orientation: landscape) {
    left: 73%;
    width: 43%;
  }
}

.title-text {
  min-width: 300px;
  width: 100%;
  height: auto;
  z-index: 2;
}

.title-text--bg {
  position: absolute;
  top: 2px;
  left: 2px;
  opacity: 0;
  z-index: 3;
  transform: rotate(-0.5deg);
  mix-blend-mode: color-burn;
  @media (orientation: landscape) {
    opacity: 0.1;
  }
}

.title-text--stickers {
  position: absolute;
  bottom: 27%;
  right: -5%;
  z-index: 10;
  width: 25%;
  min-width: 50px;
  max-width: 150px;
  opacity: 0.9;
}

.section--bgImage-fixed {
  opacity: 0.8;
}