/* start clean, full size browswer without any margin or padding space  (margin 0; padding: 0;) to our elements h1, img, etc */
/* #BESTpractice: using the universal selector * {} */
/* box sizing: border-box changes the box model so that borders ad paddings are no longer added to the height or width of an element so with this getting rid of that behaviour */
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  font-size: 62.5%; }

body {
  box-sizing: border-box; }

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10rem); }
  80% {
    transform: translateX(1rem); }
  100% {
    opacity: 1;
    transform: translate(0); } }

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(10rem); }
  80% {
    transform: translateX(-1rem); }
  100% {
    opacity: 1;
    transform: translate(0); } }

body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  line-height: 1.7;
  color: #777;
  padding: 3rem; }

.heading-primary {
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 6rem;
  backface-visibility: hidden; }
  .heading-primary--main {
    display: block;
    font-size: 6rem;
    font-weight: 400;
    letter-spacing: 3.5rem;
    animation-name: moveInLeft;
    animation-duration: 1s;
    animation-timing-function: ease-out; }
  .heading-primary--sub {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 1.75rem;
    animation: moveInRight 1s ease-out; }


    .heading-secondary {
      font-size: 3.5rem;
      text-transform: uppercase;
      font-weight: 700;
      letter-spacing: .19rem;
      display: inline-block;
      background-image: linear-gradient(to right, #55c57a, #28b485);
      -webkit-background-clip: text;
      color: transparent;
      transition: all .2s; }
      .heading-secondary:hover {
        transform: skewY(2deg) skewX(15deg) scale(1.1);
        text-shadow: 0.5rem 1rem 2rem rgba(0, 0, 0, 0.2); }
    
    .u-center-text {
      text-align: center; }
    
    .u-margin-bottom-8 {
      margin-bottom: 8rem; }
    
  
.btn {
  /* :: after - The trick here is to add an element that looks exactly like the element/btn but we put it behind the btn 
    */ }
  .btn:link, .btn:visited {
    text-transform: uppercase;
    text-decoration: none;
    padding: 1.5rem 4rem;
    display: inline-block;
    border-radius: 10rem;
    transition: all .2s;
    position: relative;
    font-size: 1.6rem; }
  .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2); }
    .btn:hover::after {
      transform: scaleX(1.4) scaleY(1.6);
      opacity: 0; }
  .btn:active {
    transform: translateY(-1px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); }
  .btn--white {
    background-color: #fff;
    color: #777; }
    .btn--white::after {
      background-color: #fff; }
  .btn::after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 100%;
    border-radius: 10rem;
    /* ABSOLUTE positioning needs to have a reference. and the reference is the first elements with a relative position that it can find, now in this case it would be the header. but we dont want it to be the header, we want it to be hidden after the btn and so the reference should be the btn*/
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: all .4s; }
  .btn--animated {
    animation: moveInBottom .5s ease-out .75s;
    animation-fill-mode: backwards; }

.header {
  height: 95vh;
  /*to make the bg color transparent we switch from hex to rgba with a- changing the opacity, so we can see the bg img now) */
  background-image: linear-gradient(to right bottom, rgba(126, 213, 111, 0.8), rgba(40, 180, 133, 0.8)), url(../img/hero.jpg);
  background-size: cover;
  background-position: top;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
  /* POSITION is set absolute in realtion to its parent element, here the header. so we should set the header to relative. so now this (header) is the origin from where top and left start to count  */ }
  .header__logo-box {
    position: absolute;
    top: 4rem;
    left: 4rem; }
  .header__logo {
    height: 3.5rem; }
  .header__text-box {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center; }

.section-about {
  background-color: #f7f7f7;
  padding: 25rem 0;
  margin-top: -20vh; }