@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&family=EB+Garamond:wght@400;600&display=swap');

:root{
  --wood:#3b2a1e;
  --gold:#c9a34e;
  --parchment:#f4ecd8;
  --shadow:rgba(0,0,0,.5);
}

body{
  margin:0;
  font-family:"EB Garamond", serif;
  background:radial-gradient(circle at 20% 20%, #4a3426, #1f140d 70%);
  color:#2b1b12;
  animation:fadeIn 1s ease;
}

@keyframes fadeIn{
  from{opacity:0}
  to{opacity:1}
}

nav{
  background:linear-gradient(#4b3426,#2b1a10);
  padding:15px;
  text-align:center;
  border-bottom:4px solid var(--gold);
  box-shadow:0 4px 10px black;
}

nav a{
  color:#f5e6c8;
  margin:0 20px;
  text-decoration:none;
  font-family:"MedievalSharp", cursive;
  font-size:20px;
  transition:.3s;
}

nav a:hover{
  color:var(--gold);
  text-shadow:0 0 8px var(--gold);
}

.wrapper{
  max-width:900px;
  margin:60px auto;
  padding:40px;
  background:var(--parchment);
  border:8px solid var(--wood);
  border-radius:14px;
  box-shadow:0 20px 40px var(--shadow);
}

h1,h2{
  font-family:"MedievalSharp", cursive;
  color:var(--wood);
  text-align:center;
}

.card{
  background:#efe3c2;
  border:3px solid #6a4b2f;
  padding:20px;
  margin:20px 0;
  border-radius:10px;
  transition:.3s;
}

.card:hover{
  transform:scale(1.02);
  box-shadow:0 10px 20px rgba(0,0,0,.4);
}

footer{
  text-align:center;
  padding:20px;
  color:#aaa;
}