/*
0 - 600px:      Phone
600 - 900px:    Tablet/Portrait
900 - 1200px:   Tablet/Landscape
1200 - 1800px:  Desktop
1800px +:       Big Desktop

$breakpoint argument choices
- phone
- tab-port
- tab-land
- bg-desk

Orden:
Base
Typography
general layout
grid
page layouts
components

1em = 16px
*/
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

html {
  font-size: 62.5%; }
  @media (max-width: 37.5em) {
    html {
      font-size: 37.5%; } }
  @media (max-width: 43.75em) {
    html {
      font-size: 43.75%; } }
  @media (max-width: 56.25em) {
    html {
      font-size: 50%; } }
  @media (max-width: 75em) {
    html {
      font-size: 56.25%; } }
  @media (max-width: 62.5em) {
    html {
      font-size: 62.5%; } }
  @media (min-width: 112.5em) {
    html {
      font-size: 75%; } }

body {
  box-sizing: border-box;
  padding: 3rem; }
  @media (max-width: 56.25em) {
    body {
      padding: 0; } }

@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); } }

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

@keyframes appearLogo {
  0% {
    opacity: 0;
    transform: translate(0); }
  50% {
    opacity: .5;
    transform: translate(0); }
  100% {
    opacity: 1;
    transform: translate(0); } }

body {
  font-family: 'Courgette', cursive;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.7;
  color: white; }
  @media (max-width: 37.5em) {
    body {
      font-size: .3rem; } }

.heading-primary {
  color: white; }
  .heading-primary--main {
    text-transform: none;
    text-align: center;
    display: block;
    font-size: 12rem;
    font-weight: 600;
    letter-spacing: 3.5rem;
    animation-name: moveInLeft;
    animation-duration: 2s;
    animation-timing-function: ease-out; }
    @media (max-width: 37.5em) {
      .heading-primary--main {
        letter-spacing: 1rem;
        font-size: 4.5rem; } }
    @media (max-width: 43.75em) {
      .heading-primary--main {
        letter-spacing: .5rem;
        font-size: 6.5rem; } }
  .heading-primary--sub {
    font-family: 'Lato', sans-serif;
    /* text-shadow: -1px 0 rgb(121, 121, 121), 0 1px rgb(121, 121, 121), 1px 0 rgb(121, 121, 121), 0 -1px rgb(121, 121, 121); */
    text-transform: uppercase;
    display: block;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 1rem;
    text-align: justify;
    animation-name: moveInLeft;
    animation-duration: 2s; }
    @media (max-width: 37.5em) {
      .heading-primary--sub {
        letter-spacing: .5rem;
        font-size: 1rem; } }
    @media (max-width: 56.25em) {
      .heading-primary--sub {
        letter-spacing: .5rem;
        font-size: 1.8rem; } }

.paragraph {
  color: #472289; }

.footer {
  font-size: 1.4rem; }
  @media (max-width: 37.5em) {
    .footer {
      font-size: .3rem; } }

.btn {
  text-decoration: none; }
  .btn:link, .btn:visited {
    padding: 1rem 6.5rem;
    display: inline-block;
    font-size: 7rem;
    /* width: 30px; */
    /* text-align: center; */
    text-decoration: none;
    color: #472289;
    margin: .5rem .2rem;
    border-radius: 20%;
    animation-name: moveInBottom;
    animation-duration: 2s;
    transition: all .2s; }
    @media (max-width: 56.25em) {
      .btn:link, .btn:visited {
        padding: 0 6.5rem;
        font-size: 4rem;
        margin: 2rem 1.2rem 0 .5rem; } }
    @media (max-width: 75em) {
      .btn:link, .btn:visited {
        padding: 1rem 1.8rem;
        font-size: 8rem;
        margin: 2rem 1.2rem 0 .5rem; } }
    @media (max-width: 37.5em) {
      .btn:link, .btn:visited {
        padding: 0 1.5rem;
        font-size: 5rem;
        margin: 3rem .2rem 2.2rem 0; } }
    @media (max-width: 43.75em) {
      .btn:link, .btn:visited {
        padding: 0 .8rem;
        font-size: 4rem;
        margin: 3rem .2rem 2.2rem 0; } }
  .btn:hover {
    transform: translateY(-0.3rem);
    /* box-shadow: 0 10px 20px rgba(0, 0, 0, .2); */ }
  .btn:active {
    transform: translateY(-0.1rem);
    color: #472289;
    /* box-shadow: 0 15px 10px rgba(0, 0, 0, .2); */ }

.header {
  height: 95vh;
  background-image: linear-gradient(to right, rgba(247, 171, 203, 0.9), rgba(254, 247, 192, 0.3), rgba(249, 62, 185, 0.9)), url(../img/562387-unsplash-medium.jpg);
  background-size: cover;
  background-position: top;
  position: relative; }
  @media (max-width: 37.5em) {
    .header {
      background-image: linear-gradient(to right, rgba(247, 171, 203, 0.9), rgba(254, 247, 192, 0.3), rgba(249, 62, 185, 0.9)), url(../img/562387-unsplash-small.jpg); } }
  .header__logo-box {
    position: absolute;
    top: 4rem;
    left: 4rem;
    animation-name: appearLogo;
    animation-duration: 3s;
    animation-timing-function: ease-out; }
    @media (max-width: 37.5em) {
      .header__logo-box {
        position: absolute;
        transform: translate(57%, 20%); } }
  .header__logo {
    height: 10rem; }
  .header__text-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: justify; }
  .header__buttons {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: justify; }

.footer {
  background-color: #f7ccde;
  padding: 3rem 0; }
  @media (max-width: 37.5em) {
    .footer {
      padding: 1rem 0rem 1.2rem; } }
  .footer__logo-box {
    text-align: center;
    margin-bottom: 1rem; }
  .footer__logo {
    width: 10rem;
    height: 10rem; }
  .footer__link:link, .footer__link:visited {
    color: #472289;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block; }
  .footer__link:hover, .footer__link:active {
    color: #472289; }
  .footer__copyright {
    color: #472289;
    border-top: 1px solid #472289;
    width: 40%;
    float: right; }
    @media (max-width: 37.5em) {
      .footer__copyright {
        width: 60%; } }