@import url("https://use.typekit.net/tdw7jkd.css");
:root {
  --color-black: #222327;
  --color-white: #FFFFFF;
  --color-white-trasnparent: #ffffffcc;
  --color-clear: #f2f2f2;
  --color-main: #2776EA;
  --color-secondary: #ffffff80;
  --color-dark-blue: #1D4F72;
  --color-red: #E82A60;
  --color-complement: #FAA202;
  --color-dark-complement: #7E3B3F;
  --color-warning: #ff000033;
  --color-acent: #9AF906;
  --font-chinese-rock: "chinese-rocks", sans-serif;
  --font-futura: "futura-pt-condensed", sans-serif;
  --font-mreaves: "mr-eaves-modern", sans-serif;
  --font-gives: "gibbs", sans-serif;
  --font-neworder: "new-order", sans-serif;
  --nav-total: 5;
}

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

body{
    background-color: var(--color-main);
    display: grid;
    align-content: center;
    overflow: hidden;
    min-height: 100vh;
}

h1{
    font-family: var(--font-neworder);
    font-weight: 700;
    letter-spacing: 1.4px;
    font-size: clamp(1.4rem,-.6rem + 6.4vw,3rem);
    text-transform: uppercase;
}

h2{
    font-family: var(--font-neworder);
    font-weight: 700;
    letter-spacing: 1.4px;
}

h3{
    font-family: var(--font-neworder);
    font-weight: 700;
    margin: 3rem 0;
    font-size: 1.5rem;
}


h1, h2, h3{
    text-align: center;
    color: var(--color-white);    
}


img {
  width: 100%;
  max-width: 600px;
  margin: 3rem auto;
  display: block;
}

.icon{
    max-width: 2rem;
    padding: 0;
    margin: 0;
    display: inline-block;
}

main {
  animation-name: opacityIn;
  animation-duration: 1.5s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  padding: 1rem;
  opacity: 0;
}


@keyframes opacityIn {
  from {opacity: 0;}
  to {opacity: 1;}
}


@keyframes transitionTop {
  from {transform: translateY(200%);}
  to {transform: none;}
}