html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
    box-sizing: border-box;
    background-color: hsl(0, 0%, 100%);
}

em { font-style: italic; }
strong { font-weight: 800; }
body {
    font-family: "jost";
    width: 95%;
    margin: auto;
    color: hsl(240, 6%, 10%);
    & p,li,img,h1,h2,h3 {
        opacity: 0;
        transform: translateY(12px);
        animation: fadeUp 0.8s ease-out forwards;
    }
    & div.home {
        & p:nth-of-type(1) { animation-delay: 0.1s; }
        & p:nth-of-type(2) { animation-delay: 0.2s; }
        & p:nth-of-type(3) { animation-delay: 0.3s; }
    
        & li:nth-of-type(1) { animation-delay: 0.4s; }
        & li:nth-of-type(2) { animation-delay: 0.5s; }
        & li:nth-of-type(3) { animation-delay: 0.6s; }
        & li:nth-of-type(4) { animation-delay: 0.7s; }
        & li:nth-of-type(5) { animation-delay: 0.8s; }
        & li:nth-of-type(6) { animation-delay: 0.9s; }
        
        & p:nth-of-type(4) { animation-delay: 1s; }
        & p:nth-of-type(5) { animation-delay: 1.1s; }
        & p:nth-of-type(6) { animation-delay: 1.2s; }
    }
    & a {
        color: #009DDC; 
        text-decoration: none;
        &:hover {
            text-decoration: underline;
        }
        &.wiggle {
            display: inline-block;
            text-decoration: underline;
        }   
        &.wiggle span {
            display: inline-block;
            will-change: transform;
        }
        &.wiggle:hover span {
            animation: snake 400ms ease-in-out infinite;
            animation-delay: calc(var(--i) * 45ms);
        }
    }
    & .wiggle_static {
        display: inline-block;
        text-decoration: underline;
    }   
    & .wiggle_static span {
        display: inline-block;
        will-change: transform;
        animation: snake 2s ease-in-out infinite;
        animation-delay: calc(var(--i) * 300ms);
    }
}

@keyframes snake {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

header {
    margin: 2rem auto;
}

main {
    max-width: 800px;
}

footer {
    & p {
        margin: 0 auto;
        font-size: 1rem;
    }
}

.dream_container {
  & li {
  }
}

.dream {
  margin: auto;
  width: 200px;
  img {
      width: 100%;
  }
}