:root {
  --title-sprite-scale: 0.85;
  --title-sprite-translate-x: 0px;
  --title-sprite-translate-y: -50px;

  --grey-frame-1-scale-x: 3.6;
  --grey-frame-1-scale-y: 4.7;
  --grey-frame-1-translate-x: 0px;
  --grey-frame-1-translate-y: 50px;
  --grey-frame-1-opacity: 1;

  --grey-frame-2-scale-x: 3.5;
  --grey-frame-2-scale-y: 4.6;
  --grey-frame-2-translate-x: 0px;
  --grey-frame-2-translate-y: 63px;
  --grey-frame-2-opacity: 0.5;

  --dither-fade-start: 18vh;
  --dither-fade-middle: 55vh;
  --dither-fade-end: 100vh;
}

body {
  min-height: 100vh;
  margin: 0;
  position: relative;
  background-color: #181818;
  background-image: linear-gradient(
    to bottom,
    #505a4d 0%,
    #666551 50%,
    #181818 100%
  );
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: radial-gradient(rgba(0, 0, 0, 0.55) 1px, transparent 1px);
  background-size: 5px 5px;
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent var(--dither-fade-start),
    rgba(0, 0, 0, 0.35) var(--dither-fade-middle),
    black var(--dither-fade-end)
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent var(--dither-fade-start),
    rgba(0, 0, 0, 0.35) var(--dither-fade-middle),
    black var(--dither-fade-end)
  );
  z-index: 0;
}

.site-header {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.grey-frame-opac {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  max-width: 100%;
  height: auto;
  pointer-events: none;
  transform-origin: top center;
}

.grey-frame-opac-1 {
  z-index: 1;
  opacity: var(--grey-frame-1-opacity);
  transform:
    translateX(-50%)
    translate(
      var(--grey-frame-1-translate-x),
      var(--grey-frame-1-translate-y)
    )
    scale(
      var(--grey-frame-1-scale-x),
      var(--grey-frame-1-scale-y)
    );
}

.grey-frame-opac-2 {
  z-index: 2;
  opacity: var(--grey-frame-2-opacity);
  transform:
    translateX(-50%)
    translate(
      var(--grey-frame-2-translate-x),
      var(--grey-frame-2-translate-y)
    )
    scale(
      var(--grey-frame-2-scale-x),
      var(--grey-frame-2-scale-y)
    );
}

.site-title-sprite {
  position: relative;
  z-index: 3;
  display: block;
  max-width: 100%;
  height: auto;
  transform:
    translate(
      var(--title-sprite-translate-x),
      var(--title-sprite-translate-y)
    )
    scale(var(--title-sprite-scale));
  transform-origin: top center;
}