/*
COLORS:

Light green: #7ed56f
Medium green: #55c57a
Dark green: #28b485

*/

* {
   margin: 0;
   padding: 0;
   box-sizing: inherit;
}

html {
   font-size: 62.5%;
}

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

   box-sizing: border-box;
}

.header {
   height: 95vh;
   background-image:linear-gradient(
      to right bottom, 
      rgba(234, 235, 237, 0.9),
      rgba(0, 0, 0, 0.9)), 
      url(../img/printer3d.jpg);
   background-size: cover;
   background-position: top;
   position: relative;

   clip-path: polygon(0 0, 100% 0, 100% 85vh, 0 100%);
}

.logo-box {
   position: absolute;
   top: 4rem;
   left: 4rem;
}

.logo {
   height: 15rem;
}

.logo:hover {
   transform: scale(1.2);
}

.text-box {
   position: absolute;
   top: 40%;
   left: 50%;
   transform: translate(-50%, -50%);
   text-align: center;  /*  this is to align the "Discover Our Tours" button and text to the center of the page. Because the btn is an inline element, it is treated as text.  */
}

.heading-primary {
   color: #fff;
   text-transform: uppercase;

   
   backface-visibility: hidden; 

   /* 
   sometimes the animation will move up a little unexpectedly. This cures that. Also for rotation animations. 
   */

   margin-bottom: 6rem;  /* this gives spacing between "Where Life Happens" and the button. */
}

.heading-primary-main {
   display: block;
   font-size: 6rem;
   font-weight: 400;
   letter-spacing: .7rem;

   animation-name: moveInLeft;
   animation-duration: 1s;
   animation-timing-function: ease-in-out;  

   /*
   animation-delay: 3s;
   animation-iteration-count: 3; repeats animation # of times specified
   */
}

.heading-primary-sub {
   display: block;
   font-size: 2rem';
   font-weight: 700;
   letter-spacing: 1rem;

   animation: moveInRight 1s ease-in-out; /* shorthand version instead of writing out each individual attribute */
   
}

@keyframes moveInLeft {
   0% {
      opacity: 0;
      transform: translateX(-12rem);
   }

   80% {
      transform: translateX(1rem);
   }

   100% {
      opacity: 1;
      transform: translate(0);
   }
}

@keyframes moveInRight {
   0% {
      opacity: 0;
      transform: translateX(12rem);
   }

   80% {
      transform: translateX(-1rem);
   }

   100% {
      opacity: 1;
      transform: translate(0);
   }
}

@keyframes moveInBottom {
   0% {
      opacity: 0;
      transform: translateY(3rem);
   }

   100% {
      opacity: 1;
      transform: translate(0);
   }
}

.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, .2);
}

.btn:active {
   transform: translateY(-1px);
   box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .2);
}

.btn-white {
   background-color: #fff;
   color: #777;
}

.btn::after {
   content: "";    /* this can be left empty, but needs to be there!  */
   display: inline-block;
   height: 100%;
   width: 100%;
   border-radius: 100px;
   position: absolute;   /* needs a reference position so we have to use position: relative; in the parent .btn (.btn:link) section!  */
   top: 0;
   left: 0;
   z-index: -1;
   transition: all .4s;
}

.btn-white::after {
   background-color: #fff;
}

.btn:hover::after {
   transform: scaleX(1.4) scaleY(1.6);
   opacity: 0;   /*  fades the rearward button to invisible while scaling.  Must use the transition property in the parent (.btn::after)!  */
}

.btn-animated {
   animation: moveInBottom .5s ease-in-out .75s;
   animation-fill-mode: backwards;   /* applies the styles of the @keyframes moveInBottom 0% (opacity and transform) before the animation starts!  */
}