@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/playfair.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
	
html {margin: 0;}
body {margin: 0 auto;min-height: 100vh;max-width: 1300px;background: linear-gradient(135deg, #466494 0%, #2f3c63 100%);display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: 1fr min-content;font-family: 'Roboto', sans-serif;}
header {align-self: center;text-align: center;}
h1 {font-family: 'Playfair Display', serif;color: #fff;font-weight: normal;padding: 0 20px;font-size: 4.5em;margin: 0;letter-spacing: 10px;opacity: 0;animation: fadeIn 2s ease-out forwards, letterSpacing 3s ease-out forwards;}
h1 span {font-size: 1.08em;}

/* Animation */
@keyframes letterSpacing {
  0% {letter-spacing: 10px;}
  100% {letter-spacing: 20px;}
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

h1 small {font-size: 0.5em;color: #fff;}
main {font-family: sans-serif;color: #ddd;align-self: center;margin: 20px;text-align: justify;line-height: 1.6em;font-size: 1.2em;padding: 0 20px;}
main figure {text-align: center;}
main img {border-radius: 50%;border: 3px solid #fff;margin-bottom: 30px;transition: transform 0.3s ease, box-shadow 0.3s ease;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);}
main img:hover {transform: scale(1.1);box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);}
footer {text-align: center;grid-column: 1 / span 2;border-top: 1px solid #fff;font-family: sans-serif;padding: 20px 0;}
footer ul {padding: 0;}
footer li {list-style: none;display: inline-block;margin: 0 20px;}
footer li a {text-decoration: none;color: #fff;transition: color 0.3s ease;}
footer li a:hover {color: #ddd;}
a {color: #fff;}

@media screen and (max-width: 640px) {
  body {display: block;}
  header {text-align: center;}
  footer {margin: 0 20px;}
  footer li {display: block;}
  main img {margin-bottom: 10px;}
}