@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&family=Roboto:wght@100;300;400;500;700;900&display=swap');
          
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



          /* ____ Variables ____ */

:root {
  --clr-bg-main: #120F1B;
  --clr-bg-darken: #0A0812;

  --font-c-main: #E6DDFF;
  --font-c-contr: #F97676;

  --font-s-15:15px;
  --font-s-16:16px;
  --font-s-16:16px;
  --font-s-24:24px;
  --font-s-39:39px;

  /* --distance-padding-sides: 116px; */
  --distance-padding-sides: 32px;
  /* --distance-padding-top: 70px; */
  --distance-padding-top: 48px;
  --distance-logo-spacing: 15px;

  --display: none;
}



          /* ____ Typography ____ */

/* Roboto - fw: 1, 3, 4, 5, 7, 9 */
/* Merriweather - fw: 3, 4, 7, 9 */



a, li, p, h1, h2, h3, h4, h5, a {
  font-family: Merriweather;
  color: var(--font-c-main);
  font-size: var(--font-s-16);
  font-weight: 300;
}

.logo-cont h1,
.logo-cont h3 {
  font-family: Roboto;
  color: var(--font-c-contr);
  text-transform: uppercase;
}

.logo-cont h1 {
  font-size: var(--font-s-39);
  font-weight: 100;
  letter-spacing: calc(var(--font-s-39)*0.30);
  line-height: 75%;
  margin-bottom: var(--distance-logo-spacing);
}

.logo-cont h1 span{
  font-weight: 500;
}

.logo-cont h3 {
  font-size: var(--font-s-15);
  font-weight: 500;
  letter-spacing: calc(var(--font-s-15)*0.20);
  line-height: 84%;
}

.email-cont a {
  font-family: Roboto;
  font-size: var(--font-s-16);
  font-weight: 100;
  letter-spacing: calc(var(--font-s-16)*0.04);
  text-decoration: none;
}

.email-cont a:hover,
.email-cont a:focus{
  color: var(--font-c-contr);
  font-weight: 400;
  animation: NavChar 500ms ease-in-out forwards;
}

/* __ BODY / MAIN __ */

.text-cont h2 {
  font-size: var(--font-s-24);
  font-weight: 300;
  letter-spacing: calc(var(--font-s-24)*0.02);
  margin-bottom: 25px;
  display: var(--display);
}

.text-cont p {
  font-size: var(--font-s-16);
  font-weight: 300;
  letter-spacing: calc(var(--font-s-16)*0.06);
  line-height: 140%;
}


/* __ ANIMATION __ */

/* Nav */
@keyframes NavChar {
  from {
    color: var(--font-c-main);
  }
  to {
    color: var(--font-c-contr);
  }
}









         /* ____ Body ____ */

body {
  height: 100vh;
  width: 100vw;
  background-color: var(--clr-bg-main);
  position: relative;

  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
}

.logo-cont {
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 
    var(--distance-padding-top)
    auto
    80px;
}

.text-cont {
  box-sizing: border-box;
  width: calc(100% - var(--distance-padding-sides));
  margin-left: var(--distance-padding-sides);
  overflow: hidden;
}

.p-distance {
  margin-bottom: 35px;
}

.email-cont {
  margin-top: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.email-cont img {
  margin-right: 6px;
}

.deco-img {
  position: absolute;
}

.aurora {
  height: 350px;
  opacity: 50%;
  bottom: 8%;
  right: 0;
}

.mountain {
  height: 190px;
  bottom: 0;
  right: 0;
}


@media  (min-width: 500px) {
  :root {
    --clr-bg-main: #120F1B;
    --clr-bg-darken: #0A0812;
  
    --font-c-main: #E6DDFF;
    --font-c-contr: #F97676;
  
    --font-s-15:15px;
    --font-s-16:16px;
    --font-s-16:16px;
    --font-s-24:24px;
    --font-s-39:39px;
  
    --distance-padding-sides: 74px;
    --distance-padding-top: 59px;
    --distance-logo-spacing: 15px;
  
    --display: block;
  }

  .logo-cont {
    align-self: flex-start;
  }

  .email-cont a {
    font-size: var(--font-s-24);
  }

  .email-cont img {
    width: 30px;
    margin-right: 12px;
  }

  .aurora {
    height: 600px;
    opacity: 65%;
    bottom: 0;
  }
  .mountain {
    height: 250px;
  }
}





@media  (min-width: 1000px) {
  :root {
    --clr-bg-main: #120F1B;
    --clr-bg-darken: #0A0812;
  
    --font-c-main: #E6DDFF;
    --font-c-contr: #F97676;
  
    --font-s-15:15px;
    --font-s-16:16px;
    --font-s-16:16px;
    --font-s-24:24px;
    --font-s-39:39px;
  
    --distance-padding-sides: 116px;
    /* --distance-padding-sides: 32px; */
    --distance-padding-top: 70px;
    /* --distance-padding-top: 48px; */
    --distance-logo-spacing: 15px;
  
    --display: block;
  }

  .logo-cont {
    width: 472px;
    height: 175px;
    background-color: var(--clr-bg-darken);
    border-radius: 0 0 285px 0;
    box-shadow: 0 0 15px 1px rgba(226, 231, 255, 0.02);

    margin: 
      var(--distance-padding-top)
      var(--distance-padding-sides)
      80px;
  }

  .aurora {
    height: 1000px;
    opacity: 80%;
    bottom: 0;
  }
  .mountain {
    height: 450px;
  }

}