*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Georgia',serif;
  background:#faf7ec url('assets/tea_stain.png') repeat;
  min-height:100vh;
  position:relative;
  padding-top:80px;
}
header{
  position:fixed;
  top:0;left:0;width:100%;
  background:#594e3b;
  color:#f3e97a;
  display:flex;align-items:center;
  padding:10px 20px;
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
  z-index:1000;
}
header img.crest{height:50px;width:auto;margin-right:12px;}
nav a{
  color:#f3e97a;
  margin:0 12px;
  text-decoration:none;
  font-weight:bold;
}
nav a:hover{color:#fff;text-decoration:underline;}
main{padding:40px 20px;max-width:900px;margin:0 auto;}
footer{
  font-size:0.8rem;
  text-align:center;
  padding:40px 0 80px;
  color:#594e3b;
}
.cannon-container{
  position:fixed;
  bottom:20px;right:20px;
  width:96px;height:96px;
  cursor:pointer;z-index:900;
}
.custard-blast{
  position:absolute;
  bottom:25px;right:90px;
  width:0;height:0;
  background:#f3e97a;
  border-radius:50%;
  opacity:0;
  transition:all 0.5s ease-out;
  box-shadow:0 0 20px 10px #f3e97a;
  pointer-events:none;
}
.cannon-container:hover .custard-blast{
  width:160px;height:90px;
  opacity:1;
  transform:translateX(-180px) rotate(-10deg);
}
@keyframes timkins-run{
  0%{right:20px;}
  100%{right:300px;opacity:0;}
}
.timkins{
  display:none;
  position:fixed;
  bottom:40px;
  right:20px;
  font-size:40px;
  animation:timkins-run 1.8s linear forwards;
}
.cannon-container:hover + .timkins{display:block;}