@font-face { font-family: Raleway; font-weight: 300; font-display: swap; src: url(raleway-300.woff2) format("woff2"); }

* { margin: 0; padding: 0; }
html { min-height: 100%; position: relative; }
body { margin-bottom: 100px; background: var(--bg); color: #fff; font: 300 16px Raleway, sans-serif; text-align: center; }

h1 { padding: 40px 0 10px; font-size: 32px; font-weight: 300; }
p { padding-bottom: 10px; }
a { color: #fff; }

header { padding-top: 75px; animation: fadeInTop .4s ease-in-out .9s both; }
header img { width: 125px; height: 125px; border: 3px solid #fff; border-radius: 50%; }

main { box-sizing: border-box; max-width: 480px; margin: 0 auto; padding: 0 20px; animation: fadeInTop .6s ease-in-out .9s both; }
main section { padding: 20px; }
.icons a { display: inline-block; width: 32px; height: 32px; transition: transform .6s ease .02s; }
.icons a:hover { transform: rotateY(360deg); }

footer { position: absolute; bottom: 0; width: 100%; height: 100px; padding-top: 30px; box-sizing: border-box; background: rgba(0, 0, 0, .07); font-size: 13px; animation: fadeInBottom .5s ease-out .9s both; }
footer p { padding-bottom: 0; }
footer a { text-decoration: none; }
footer a:last-of-type { text-decoration: underline; }

@keyframes fadeInTop { from { opacity: 0; transform: translateY(-25px); } }
@keyframes fadeInBottom { from { opacity: 0; transform: translateY(25px); } }