@import url(/css/base.css);

:root {
   --h-color: #522f14;
   --a-color: #003d66;
   --a-visited-color: #450664;
   --a-hover-color: maroon;
   --content-bg: #fdfaf5 url(/css/events/birds/bird-panorama.webp) repeat-x 0 bottom;
   --shade-bg: #ffd none;
   --content-padding-bottom: 238px;

   --logo-width: 189px;
   --logo-height: 200px;
   --logo-image: url(/css/events/birds/logo.webp);

   --header-color: white;
   --header-color-text-shadow: var(--dark-text-shadow);
   --header-color-bg: #6a3c00 none;
   --header-a-color: #ffdf99;
   --header-a-text-shadow: var(--dark-text-shadow);
   --header-bar-bg: #feffff url(/css/events/birds/titlebar.jpg);

   --nav-color: #f3b983;
   --nav-a-color: #;
   --nav-a-text-shadow: var(--light-text-shadow);
   --nav-a-hover-color: yellow;
   --nav-a-hover-bg-color: #6a3f07;
   --nav-hr-width: 63px;
   --nav-hr-height: 45px;
   --nav-hr-bg: url(/css/events/birds/gap.webp) no-repeat;
}

@keyframes growOwl {
   0% {
      width: 100px;
      height: 113px;
   }

   100% {
      width: 200px;
      height: 226px;
   }
}

@keyframes moveOwl {
   0% { top:0%; left:-226px; }
   100% { top:100vh; left:calc(100% + 226px); }
}

#owl {
   position: absolute;
   top: 0;
   background: transparent url(/css/events/birds/owl.webp) no-repeat;
   background-size: contain;
   animation: growOwl 20s ease-in forwards, moveOwl 10s infinite linear;
   z-index: 9999;
}