@import 'src/styles/variables';

.quiz {
  &_container {
    position: relative;
    display: block;
    width: 100%;
    height: 500px;
    margin: 0 auto;

    text-align: center;
    overflow: hidden;

    background-color: #F0AE7A;
    background-position: center center;
    background-size: auto 100%;
    background-repeat: repeat;
  }

  &_cloud,
  &_cloud_bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    display: block;
    width: 100%;
    height: 100%;

    background-position: 0 0;
    background-size: auto 100%;
    background-repeat: repeat;

    animation-name: quiz_cloud;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
  }

  &_cloud_bg {
    animation-duration: 170s;
  }

  &_cloud {
    animation-duration: 70s;
  }

  &_slider {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;

    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;

    &_animation {
      animation-name: quiz_slider;
    }
  }

  &_footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    display: block;
    width: 100%;
    padding: var(--space-xxl) 0;

    text-align: center;
  }

  &_title,
  &_description {
    font-weight: 100;

    display: block;
    width: 433px;
    padding: var(--space-xxl) 64px;
    margin: 0 auto;

    line-height: 1.5;
    box-sizing: border-box;
    text-align: center;
    text-shadow: 0 0 5px var(--color-white), 0 0 5px var(--color-white), 0 0 5px var(--color-white);

    color: var(--color-black);
    // background-color: var(--color-white);

    background-position: center left;
    background-size: auto 80%;
    background-repeat: repeat-x;
  }

  &_title {
    font-size: var(--font-l);
    margin: 0 auto var(--space-xxl);
    border-radius: 0 0 var(--border-radius-l) var(--border-radius-l);
    // background: radial-gradient(ellipse farthest-corner at 50% 50%, rgba(255, 255, 255, 1) 10%, rgba(240, 174, 122, 0.5) 100%);
  }

  &_description {
    font-size: var(--font-m);
    margin: 100px auto 0;
  }

  &_icon {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 auto var(--space-xxl);

    border: var(--space-s) solid #E8816E;
    box-shadow: 0 0 5px var(--color-grey);
    background-color: #E8816E;

    background-position: center center;
    background-size: auto 100%;
    background-repeat: no-repeat;
  }
}

@keyframes quiz_slider {
  from {
    bottom: 0;
    left: auto;
    opacity: 1;
  }
  49% {
    bottom: 100%;
    opacity: 0;
  }
  51% {
    right: auto;
    top: 100%;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

@keyframes quiz_cloud {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -200px 0;
  }
}

@media (max-width: 900px) {
  .quiz {
    &_title,
    &_description {
      width: 100%;
      padding: var(--space-l) var(--space-xs);
    }
    &_title {
      font-size: var(--font-m);
    }
  }
}
