@import './../../styles/variables/index.scss';

.container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10112;
  height: 100vh;
  width: 100vw;
  transform: translateZ(1px);
}

.container .item {
  height: 25vh;
  background: #b1d2f3;
}

.container .text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100vw;
  text-align: center;
  overflow: hidden;
  font-family: $font-family-newsreader;
  color: $main-blue;
  font-size: 24px;
  padding: 0 16px;

  @media (min-width: 560px) {
    font-size: 38px;
    padding: 0 43px;
  }

  span {
    display: inline-block;
  }

  .word {
    overflow: hidden;
  }

  .space {
    display: inline;
  }

  strong {
    font-family: $font-family-atak-black;
    font-size: 24px;
    display: inline-block;
    @media (min-width: 560px) {
      font-size: 38px;
    }
    @media (min-width: 900px) {
      display: inline;
    }
  }
}

.container.open {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

.container.closed {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.container.hidden,
.container.closed.hidden {
  display: none;
  z-index: -1;
}