@import "helpers/variables";
@import "helpers/mixins";
@import "helpers/placeholders";

@media screen and (max-width: 1150px){
  header{
    .wordmark{
      font-size: 3em;
    }
    .main-navigation__list{
      font-size: 1.5em;
    }
  }

  #home{
    #about-me{
      font-size: 2.1vw;
    }
  }
}


@media screen and (max-width: 850px){
  header{
    .wordmark{
      font-size: 2.5em;
    }
    .main-navigation__list{
      font-size: 1.25em;
    }
  }
  #home{
    #about-me{
      -webkit-clip-path: polygon(0 0, 100% 2%, 100% 95%, 0% 100%);
      clip-path: polygon(0 0, 100% 2%, 100% 95%, 0% 100%);
    }
    #my-work{
      -webkit-clip-path: polygon(0 5%, 100% 0, 100% 100%, 0% 95%);
      clip-path: polygon(0 5%, 100% 0, 100% 100%, 0% 95%);
      .brands{
        .brands__list{
          font-size: 0.75em;
        }
      }
    }
  }
}

@media screen and (max-width: 720px){
  header{
    display: block;
    width: 100%;
    .wordmark{
      margin: 0.35em 5% 0;
      font-size: 1.85em;
    }
    .main-navigation{
      width: 100%;
      .main-navigation__list{
        width: 100%;
        display: flex;
        justify-content: space-around;
        background-color: $color-secondary;
        color: #FFF;
        margin-top: 0.5em;
        .main-navigation__item{
          a{
            color: #FFF;
            padding: {
              top: 0.5em;
              bottom: 0.5em;
            }
            &:hover, &:focus, &.active{
              background-color: #FFF;
              color: $color-secondary;
            }
          }
        }
      }
    }
  }
  #home{
    #about-me{
      font-size: 1em;
      padding-bottom: 20%;
    }
    #my-skills{
      .my-skills__list{
        justify-content: flex-start;
        .my-skills__bucket{
          width: 49%;
          &:nth-of-type(3n){
            margin-right: 2%;
          }
          &:nth-of-type(2n){
            margin-right: 0;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 640px){
  #contactForm{
    fieldset{
      .fieldList{
        .field{
          width: 100%;
          &.field--pad{
            padding-right: 0;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 540px){
  #home{
    .fullPageIntro{
      #intro{
        .intro__heading{
          font-size: 3em;
        }
        .intro__deck{
          font-size: 1.25em;
        }
      }
    }
    #my-skills{
      text-align: center;
      .my-skills__list{
        justify-content: flex-start;
        .my-skills__bucket{
          width: 100%;
          &:nth-of-type(3n){
            margin-right: 0;
          }
          &:nth-of-type(2n){
            margin-right: 0;
          }
          &:nth-of-type(4){
            width: 100%;
          }
          .my-skills__breakdown{
            padding: 0;
            .my-skills__example{
              list-style: none;
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 480px){
  #home{
    #about-me{
      padding-bottom: 30%;
    }
    #my-work{
      .brands{
        .brands__heading{
          font-size: 0.75em;
        }
      }
    }
  }
}

@media screen and (max-width: 420px){
  header{
    .main-navigation__list{
      font-size: 1em;
    }
  }

  #home{
    .fullPageIntro{
      #intro{
        top: 45%;
      }
      .intro__trigger{
        bottom: 3.5em;
        width: 30px; height: 30px;
        span{
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-top: 15px solid #3e5d96;
        }
      }
    }
  }
}


@media screen and (max-height: 600px){
  #home{
    .fullPageIntro{
      height: auto;
      #intro{
        position: initial;
        transform: translate(0, 0);
        margin: 8em auto 0;
      }
      .intro__trigger{
        position: initial;
        transform: translate(0, 0);
        margin: 2em auto;
      }
    }
  }
}