sparkletown/sparkle

@import "scss/constants";

$message-container-width: 28rem;

.NotFound {
  height: calc(100% - #{$reserved-page-height});
  width: 100%;
  margin: 0;
  padding: 0;

  display: grid;
  place-items: center;

  // NOTE: this should specifically be black color to match the images
  background-color: black;
  background-image: url(/assets/images/starfield.jpg);
  background-size: cover;
  background-position: center;

  &--full-screen {
    position: fixed;
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }

  &__logo {
    padding-bottom: $spacing--xxl;
    width: 100%;
    height: 100%;
  }

  &__message-container {
    width: $message-container-width;
    display: flex;
    flex-direction: column;
    place-items: center;
  }

  &__move-along-text {
    margin-top: $spacing--xl;
  }

  &__tv {
    background-image: url(/assets/images/space-travel.gif);
    background-size: 65%;
    background-position: 40px center;
    background-repeat: no-repeat;
    transform: rotate(-13deg);
    margin: $spacing--lg;
  }
}