sparkletown/sparkle

@import "scss/constants";

$message-container-width: 28rem;
$denied-shape-size: 96px;

.Forbidden {
  height: calc(100vh - #{$reserved-page-height});
  width: calc(100vw);
  display: grid;
  place-items: center;
  margin: 0;
  background-color: $content--under;

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

    & > * {
      margin: $spacing--sm;
      flex-grow: 0;
      text-align: center;
    }
  }

  &__denied-shape {
    @include square-size($denied-shape-size);
  }

  &__title {
    font-size: $font-size--xxl;
  }
}