.page-404 {
  background: url('../images/page-404/not-found.png') no-repeat center center /70vw, #000;

  position: relative;
}

.noise {
  position: absolute;
  left: 0;
  top: 0;

  width: 100vw;
  height: 100vh;

  background: url("../images/page-404/noise.png") no-repeat center center/cover;
  mix-blend-mode: multiply;

  z-index: -1;
}

.page-404::before {
  width: 100%;
  height: 7.86vw;

  content: '';

  position: fixed;

  top: 0;
  left: 0;

  background: linear-gradient(-180deg, #F5DA24 3.64%, rgba(72, 72, 72, 0.00) 26.44%);
  z-index: -1;
}

.page-404::after {
  width: 100%;
  height: 7.86vw;

  content: '';

  position: fixed;

  bottom: 0;
  left: 0;

  background: linear-gradient(0deg, #F5DA24 3.64%, rgba(72, 72, 72, 0.00) 26.44%);
  z-index: -1;
}

.page-404 .wrapper {
  display: flex;
  height: 88vh;
}

.message {
  position: absolute;
  top: 54%;
  left: 50%;
  transform: translate(-48%, -50%);
  color: #fff;
  text-align: center;
  font-family: 'Cascadia Code PL';
  font-size: 1.25vw;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.031vw;
  text-transform: lowercase;
}

.button-wrap {
  text-align: center;
  width: 100%;

  z-index: 10;

  position: absolute;

  bottom: 3vw;
}

.home-link {
  display: inline-block;
  padding: 1.15vw 10.21vw;
  background: url('../images/button-background.jpg') no-repeat center center /70vw, #000;
  color: black;
  text-decoration: none;
  font-weight: bold;
  text-transform: lowercase;
  font-family: 'Helvetica Neue', monospace;
  font-size: 2.34vw;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -0.117vw;
  text-transform: lowercase;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 0 0 0.052vw #f5da24;
}

.home-link:hover {
  transform: scale(1.05);
  box-shadow: 0 0 0.21vw 0.104vw #f5da24;
}

header {
  height: unset;
  background: unset;
}

.header-text {
  color: #fff;
}

@media (max-width: 768px) {
  body {
    overflow: hidden;
  }

  .page-404 {
    background: url('../images/page-404/not-found.png') no-repeat center center /88vw, #000;
  }

  .page-404::before, .page-404::after {
    height: 35.266vw;
  }

  #menu-open {
    background: #ffffff;
  }

  .message {
    font-size: 1.932vw;
    top: 50%;
  }

  .button-wrap {
    bottom: 15vw;
  }

  .home-link {
    padding: 0;

    height: 9.903vw;

    font-size: 4.830vw;
    line-height: 120%;
    letter-spacing: -0.242vw;

    background: url('../images/button-background.jpg') no-repeat center center /cover, #000;

    width: 88vw;

    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

}