Kalkuli/2018.2-Kalkuli_Front-End

@import '../../assets/sass/main.scss';

.header {
  position: relative;
  height: 100vh;
  background-image: linear-gradient(
                      to right bottom, 
                      $color-light-blue,
                      $color-dark-blue
                    );
  clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  
  
  &__container {
    position: absolute;
    top: 30%;
    left: 8%;
    &__h1 {
      color: white;
    }
    &__bar {
      padding: .3em;
      background-color: $color-yellow;
      width: 43%;
      margin: 2.4rem 0;
    }
    &__p {
      color: white;
    }
  }
}

@media (min-width:320px) { 
  /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 
  .header__container { 
    width: 22rem;
    &__h1 {
      font-size: 3.3rem;
    }
    &__p {
      font-size: 1.6rem;
    }
  }
}
@media (min-width:480px) {
   /* smartphones, Android phones, landscape iPhone */ 
  .header__container { 
    width: 30rem;
    &__h1 {
      font-size: 4.5rem;
    }
    &__p {
      font-size: 1.9rem;
    }
  }
}
@media (min-width:600px) {
   /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ 
  .header__container {
    width: 40rem;
    &__h1 {
      font-size: 6rem;
    }
    &__p {
      font-size: 2rem;
    }
  }
}

@media (min-width:1281px) {
  .header__container { 
    width: 48rem;
    &__h1 {
      font-size: 8rem;
    }
    &__p {
      font-size: 2.3rem;
    }
  }
}