@import '../../../styles/mixins';

.noscript {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2em;
  font-size: large;
  background-color: var(--theme-color-background-main);
  z-index: 999;

  h2 {
    margin-top: 25px;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: inherit;
  }
}

// Necessary in case content y-overflows becuase
// align-items: center would otherwise hide some
// of the content
.scrollContainer {
  max-height: 100%;
  overflow: auto;
}

.content {
  max-width: 100%;
  width: 70ch;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  width: 70%;

  // For some weir reason, the logo isn't displayed on screens <= 767px.
  // This coincides with the tablet breakpoint, but god knows what exactly
  // the issue is. Since it's just a design element, just hide the logo on
  // those smaller screens. For more information, see
  // https://github.com/owncast/owncast/pull/2592
  @include screen(tablet) {
    display: none;
  }
}