<commit_before>@import "settings";
@import "tools";

.home {
  width: 1200px;
  height: 700px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;

  &__map {
    position: relative;
    opacity: 0;
    width: 521px;
    height: 597px;

    background-repeat: no-repeat;
    background-position: center;

    @include center-block-horizontal;
    left: 75% !important;
    @include transition(opacity, 0.7s, ease);

    &--gray {
      background-image: url('../images/map--gray.svg');
    }

    &--color {
      a {
        &.purple:hover {
          filter: url(#dropshadowPurple);
        }

        &.green:hover {
          filter: url(#dropshadowGreen);
        }

        &.yellow:hover {
          filter: url(#dropshadowYellow);
        }

        &.blue:hover {
          filter: url(#dropshadowBlue);
        }

        &.pink:hover {
          filter: url(#dropshadowPink);
        }

        &.crimson:hover {
          filter: url(#dropshadowCrimson);
        }
      }
    }

    &--visible {
      opacity: 1;

      .home__caption {
        opacity: 1;
      }
    }
  }

  &__controls {
    position: absolute;
    top: 150px;
    width: 60%;
    opacity: 1;

    transition: opacity 0.5s ease-in, top 1s ease-out;

    &--hidden {
      opacity: 0;
      top: 600px
    }
  }

  &__heading {
    font-size: 100px;
    font-weight: bold;
    font-style: italic;
    margin: 0;
  }

  &__subheading {
    font-size: 25px;
    margin: 0;
    color: #555;
    font-weight: 100 !important;
    padding-left: 5px;
    width: 577px;
  }

  &__actions {
    width: 470px;
    height: 55px;
    margin: 32px;
  }

  &__action {
    float: left;
    display: inline-block;
    width: 177px;
    height: 55px;
    line-height: 55px;

    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;

    color: $cl-black;

    cursor: pointer;

    border: 1px solid $cl-black;

    @include transition(all, 0.45s, ease);

    &:hover {
      color: $cl-white;
      background: lighten($cl-pink, 5%);
      border-color: lighten($cl-pink, 5%);
    }

    &--pink {
      border: none;
      color: $cl-white;
      background: $cl-pink;
      margin-left: 10px;
    }

    &--close {
      position: absolute;
      bottom: 0;
      right: 0;

      @include transition(opacity, 0.3s, ease-out);
    }

    &--hidden {
      opacity: 0;
    }
  }

  &__down {
    display: block;
    width: 25px;
    height: 31px;
    margin: 0 auto;
    background-image: url('../images/arrow.png');
  }

  &__caption {
    position: absolute;
    font-size: 14px;
    font-style: italic;
    opacity: 0;

    &--left {
      text-align: left;

      .home__caption-circle {
        left: -20px;
      }
    }

    &--right {
      text-align: right;

      .home__caption-circle {
        right: -20px;
      }
    }

    &-circle {
      width: 12px;
      height: 12px;
      border-radius: 12px;
      position: absolute;
      top: 10px;
    }

    &--green {
      top: 146px;
      left: -115px;

      @include transition(opacity, 1s, ease, 1.3s);

      .home__caption-circle {
        background: #baf6cb;
      }
    }

    &--purple {
      top: 5px;
      left: 258px;

      @include transition(opacity, 1s, ease, 1.1s);

      .home__caption-circle {
        background: #9575cd;
      }
    }

    &--yellow {
      top: 82px;
      left: 340px;

      @include transition(opacity, 1s, ease, 0.9s);

      .home__caption-circle {
        background: #edfa52;
      }
    }

    &--crimson {
      top: 358px;
      left: 92px;

      @include transition(opacity, 1s, ease, 0.3s);

      .home__caption-circle {
        background: #c51162;
      }
    }

    &--pink {
      top: 522px;
      left: 254px;

      @include transition(opacity, 1s, ease, 0.5s);

      .home__caption-circle {
        background: #ff2d7f;
      }
    }

    &--blue {
      top: 585px;
      left: 278px;

      @include transition(opacity, 1s, ease, 0.7s);

      .home__caption-circle {
        background: #00b1fe;
      }
    }
  }
}<commit_msg>Finish with responsive home.html and home.scss<commit_after>@import "settings";
@import "tools";

.home {
  width: 1200px;
  height: 700px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  
  @media screen and(max-width: 700px) {
    width: 100%;
    height: 450px;    
  }
  
  &__map {
    position: relative;
    opacity: 0;
    width: 521px;
    height: 597px;

    background-repeat: no-repeat;
    background-position: center;

    @include center-block-horizontal;
    left: 75% !important;
    @include transition(opacity, 0.7s, ease);

    &--gray {
      background-image: url('../images/map--gray.svg');
    }

    &--color {
      a {
        &.purple:hover {
          filter: url(#dropshadowPurple);
        }

        &.green:hover {
          filter: url(#dropshadowGreen);
        }

        &.yellow:hover {
          filter: url(#dropshadowYellow);
        }

        &.blue:hover {
          filter: url(#dropshadowBlue);
        }

        &.pink:hover {
          filter: url(#dropshadowPink);
        }

        &.crimson:hover {
          filter: url(#dropshadowCrimson);
        }
      }
    }

    &--visible {
      opacity: 1;

      .home__caption {
        opacity: 1;
      }
    }
  }

  &__controls {
    position: absolute;
    top: 150px;
    width: 60%;
    opacity: 1;

    transition: opacity 0.5s ease-in, top 1s ease-out;
    @media screen and(max-width: 700px) {
      width: 100%; 
    }
    &--hidden {
      opacity: 0;
      top: 600px
    }
  }

  &__heading {
    font-size: 100px;
    font-weight: bold;
    font-style: italic;
    margin: 0;
    @media screen and(max-width: 700px) {
      font-size: 42px; 
      text-align: center;
    }
  }

  &__subheading {
    font-size: 25px;
    margin: 0;
    color: #555;
    font-weight: 100 !important;
    padding-left: 5px;
    width: 577px;
    @media screen and(max-width: 700px) {
      width: 100%;
      text-align: center;
      font-size: 20px; 
    }
  }

  &__actions {
    width: 470px;
    height: 55px;
    margin: 32px;
    @media screen and(max-width: 700px) {
      width: 100%;
      height: auto; 
      margin: 0;
    }
  }

  &__action {
    float: left;
    display: inline-block;
    width: 177px;
    height: 55px;
    line-height: 55px;

    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;

    color: $cl-black;

    cursor: pointer;

    border: 1px solid $cl-black;

    @include transition(all, 0.45s, ease);
    
    @media screen and(max-width: 700px) {
      display: block; 
      float: none;
      width: 50%;
      margin: 10px auto;
    }
    
    &:hover {
      color: $cl-white;
      background: lighten($cl-pink, 5%);
      border-color: lighten($cl-pink, 5%);
    }

    &--pink {
      border: none;
      color: $cl-white;
      background: $cl-pink;
      margin-left: 10px;
      @media screen and(max-width: 700px) {
        margin-left: auto;  
      }
    }

    &--close {
      position: absolute;
      bottom: 0;
      right: 0;

      @include transition(opacity, 0.3s, ease-out);
    }

    &--hidden {
      opacity: 0;
    }
  }

  &__down {
    display: block;
    width: 25px;
    height: 31px;
    margin: 0 auto;
    background-image: url('../images/arrow.png');
  }

  &__caption {
    position: absolute;
    font-size: 14px;
    font-style: italic;
    opacity: 0;

    &--left {
      text-align: left;

      .home__caption-circle {
        left: -20px;
      }
    }

    &--right {
      text-align: right;

      .home__caption-circle {
        right: -20px;
      }
    }

    &-circle {
      width: 12px;
      height: 12px;
      border-radius: 12px;
      position: absolute;
      top: 10px;
    }

    &--green {
      top: 146px;
      left: -115px;

      @include transition(opacity, 1s, ease, 1.3s);

      .home__caption-circle {
        background: #baf6cb;
      }
    }

    &--purple {
      top: 5px;
      left: 258px;

      @include transition(opacity, 1s, ease, 1.1s);

      .home__caption-circle {
        background: #9575cd;
      }
    }

    &--yellow {
      top: 82px;
      left: 340px;

      @include transition(opacity, 1s, ease, 0.9s);

      .home__caption-circle {
        background: #edfa52;
      }
    }

    &--crimson {
      top: 358px;
      left: 92px;

      @include transition(opacity, 1s, ease, 0.3s);

      .home__caption-circle {
        background: #c51162;
      }
    }

    &--pink {
      top: 522px;
      left: 254px;

      @include transition(opacity, 1s, ease, 0.5s);

      .home__caption-circle {
        background: #ff2d7f;
      }
    }

    &--blue {
      top: 585px;
      left: 278px;

      @include transition(opacity, 1s, ease, 0.7s);

      .home__caption-circle {
        background: #00b1fe;
      }
    }
  }
}
{'fraction_non_alphanumeric': 0.13690210102816272, 'fraction_numerical': 0.04302637460885114, 'mean_word_length': 1.684968496849685, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2432663', 'n_tokens_mistral': 3607, 'n_tokens_neox': 3124, 'n_words': 676}