@font-face { font-family: 'fhpsun'; src: url('fonts/fhpsun.woff2') format('woff2'), url('fonts/fhpsun.woff') format('woff'); }
@font-face { font-family: 'minionpro'; src: url('fonts/minionpro.woff2') format('woff2'), url('fonts/minionpro.woff') format('woff'); }
@font-face { font-family: 'redaction'; src: url('fonts/redaction.woff2') format('woff2'), url('fonts/redaction.woff') format('woff'); }

* { padding: 0; margin: 0; }
::selection { background: #fffe8f; color: #1d1d1b; }

html, body { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: white; animation-name: animationOpacity; animation-duration: 0.5s; }

h1 { font-family: 'redaction', serif; font-weight: normal; color: #1d1d1b; font-size: 16vw; text-align: center; animation-name: animation; animation-duration: 0.9s; }
p { font-family: 'fhpsun', sans-serif; font-weight: normal; color: #1d1d1b; font-size: 22px; text-align: left; width: 600px; }

a { font-family: 'minionpro', serif; font-weight: normal; color: #1d1d1b; opacity: 0.75; text-decoration: none; transition: 0.2s; }
a:hover { opacity: 1; }

header { position: fixed; top: 0; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); }
header > img { width: 200px; }

main { position: fixed; width: 100%; top: 45%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); }

footer { position: fixed; bottom: 20px; left: 20px; }
footer > p:nth-child(2) { margin-top: 20px; font-size: 18px; }
footer img { position: fixed; bottom: 20px; right: 20px; width: 200px; }

@media (max-width: 800px) {
  header > img { width: 160px; }
  p { font-size: 16px; width: 50vw; }
  footer > p:nth-child(2) { font-size: 14px; }
  footer img { width: 30vw; }
}

@keyframes animation {
  0% { transform: rotate(-360deg) scale(0.3); }
  100% { transform: rotate(0) scale(1); }
}

@keyframes animationOpacity {
  0% { opacity: 0; }
  100% { opacity: 1; }
}