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

* {
    box-sizing: border-box;
    background-color: hsl(216, 20%, 95.1%);
}

@font-face {
  font-family: "PP Editorial New";
  src: url("fonts/PPEditorialNew-Ultralight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Editorial New";
  src: url("fonts/PPEditorialNew-UltralightItalic.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "PP Editorial New";
  src: url("fonts/PPEditorialNew-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Editorial New";
  src: url("fonts/PPEditorialNew-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "PP Editorial New";
  src: url("fonts/PPEditorialNew-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Editorial New";
  src: url("fonts/PPEditorialNew-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "PP Editorial New";
  src: url("fonts/PPEditorialNew-Ultrabold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Editorial New";
  src: url("fonts/PPEditorialNew-UltraboldItalic.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

em { font-style: italic; }
strong { font-weight: 800; }
body {
    font-family: "PP Editorial New", serif;
    font-weight: 300;
    width: 95%;
    margin: auto;
    color: hsl(240, 6%, 10%);
    & p {
        font-size: 1.375rem;
        line-height: 2rem;
        opacity: 0;
        transform: translateY(12px);
        animation: fadeUp 0.8s ease-out forwards;
    }
    & p:nth-of-type(1) { animation-delay: 0.2s; }
    & p:nth-of-type(2) { animation-delay: 0.4s; }
    & p:nth-of-type(3) { animation-delay: 0.6s; }
    & p:nth-of-type(4) { animation-delay: 0.8s; }
    & p:nth-of-type(5) { animation-delay: 1s; }
    & p:nth-of-type(6) { animation-delay: 1.2s; }
    & p:nth-of-type(7) { animation-delay: 1.4s; }
    & p:nth-of-type(8) { animation-delay: 1.6s; }
    & a {
        color: #001fcc; 
        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;
}

nav {
}

.logo h1 {
}

.nav-links {
}

.nav-links a {
}

.nav-links a:hover {
}

main {
    max-width: 800px;
}

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

h1 {
    font-weight: normal;
}

.dream_container {
  & li {
    font-size: 1.375rem;
    line-height: 2rem;
  }
}

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