@use 'sass:map';
@use '@tutorbook/styles/config';
@use '@tutorbook/styles/typography';

.screen {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 200px);
}

.spinner {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  margin-left: 32px;
  height: 100%;
}

.spinner svg {
  width: 60px;
  height: 60px;
}

.content {
  align-items: center;
  display: flex;
  flex: 1;
  justify-content: center;
  width: auto;
}

.text {
  text-align: center;
  max-width: 50rem;
  padding: 24px;
}

.headline {
  @include typography.typography('headline2');
  margin: 0 0 40px;
}

.body {
  @include typography.typography('subtitle1');
  color: map.get(config.$colors, 'accents-5');
  margin: 0;
}

@media only screen and (max-width: 768px) {
  .headline {
    font-size: 3rem;
  }
}