@keyframes fall { 0% { opacity: 0; } 50% { opacity: 1; } 100% { top: 150vh; opacity: 1; } } @keyframes sway { 0% { margin-left: 0; } 25% { margin-left: 50px; } 50% { margin-left: -50px; } 75% { margin-left: 50px; } 100% { margin-left: 0; } } #winter { z-index: 1; height: 150vh; overflow: hidden; position: absolute; top: 0; transition: opacity 500ms; width: 100%; pointer-events: none; } .snow { animation: fall ease-in infinite, sway ease-in-out infinite; color: white; position: absolute; } body { background: #241e1e; } main { font-size: 16px; max-width: 1250px; margin: 0 auto; background-color: #ffb380; font-family: 'Krub', sans-serif; } header { height: 200px; background-image: url('/images/blog/desert.png'); } footer { max-width: 750px; margin: 0 auto; } h1 { font-size: 1.8rem; } a:link, a:visited { color: #C03221; text-decoration: none; } a:hover, a:active { text-decoration: underline; } .content { max-width: 750px; margin: 0 auto; padding-bottom: 30px; } .content p { z-index: 2; line-height: 1.7em; font-size: 1.1rem; } .context { font-style: italic; }