/* =========================================================
   LAYOUT
========================================================= */

.background {
  position: fixed;
  inset: -25px;

  background-image:
    linear-gradient(
      rgba(4, 8, 14, 0.42),
      rgba(4, 8, 14, 0.72)
    ),
    url("../sandy-shores.jpg");

  background-size: cover;
  background-position: center;

  filter: blur(7px);

  transform: scale(1.04);

  z-index: -3;
}

.background-overlay {
  position: fixed;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(4, 8, 14, 0.30),
      rgba(4, 8, 14, 0.10),
      rgba(4, 8, 14, 0.38)
    );

  z-index: -2;
}

.vignette {
  position: fixed;
  inset: 0;

  background:
    radial-gradient(
      ellipse at center,
      transparent 25%,
      rgba(0, 0, 0, 0.42) 100%
    );

  pointer-events: none;

  z-index: -1;
}

.page {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;

  align-items: center;

  padding: 55px 25px 30px;

  overflow-y: auto;
}