@import './assets/styles/global.scss';

.wordcloud {
  padding: calculateRem(32) 0 calculateRem(40) calculateRem(24);
  outline: none;
  background-color: $navy;
  display: flex;
  flex-direction: column;

  @media (min-width: $tablet) {
    padding-top: calculateRem(40);
  }

  h3 {
    @include hasRedUnderline;
    position: relative;
    margin: calculateRem(-24) 0 calculateRem(40) calculateRem(40);
    color: #fff;
    font-family: $secondary-font;
    font-size: calculateRem(22);
    line-height: 1;
    letter-spacing: 2px;
    padding-right: calculateRem(24);
    transition: font-size 0.2s ease;

    @media (min-width: $tablet) {
      font-size: calculateRem(38);
      margin-bottom: calculateRem(60);
    }

    &::before {
      z-index: 0;
      bottom: calculateRem(-8);
    }

    br {

      @media (max-width: $toTablet) {
        display: none;
      }
    }
  }

  p {
    font-family: $secondary-font;
    color: $blue-light;
    font-size: calculateRem(100);
    line-height: 0.8;
  }

  .words-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    text-align: center;
    padding-right: calculateRem(24);

    > div > span {
      display: inline-block;
      line-height: 1.2;
      padding: calculateRem(4) calculateRem(12);
      transform: scale(1);
      transition: transform 0.2s ease-in-out;

      &.size-1 {
        font-size: calculateRem(30);
      }

      &.size-2 {
        font-size: calculateRem(25);
      }

      &.size-3 {
        font-size: calculateRem(20);
      }

      &.size-4 {
        font-size: calculateRem(15);
      }

      &:hover {
        transform: scale(1.05);
      }

      > span,
      > a {
        color: $text-color;
        transition: color 0.2s ease;

        &:hover {
          color: $red;
          text-shadow: 0 0 11px #000;
        }
      }

      > a {
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}