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

:root {
   --h-color: #111;
   --a-color: #000;
   --a-visited-color: #707070;
   --a-hover-color: maroon;
   --shade-bg: #efefef none;
   --img-filter: grayscale(100%);
   
   --logo-width: 154px;
   --logo-height: 200px;
   --logo-image: url(/css/anniversaries/911/logo.webp);

   --header-color: white;
   --header-color-text-shadow: var(--dark-text-shadow);
   --header-color-bg: #171717 none;
   --header-a-color: white;
   --header-a-hover-color: white;
   --header-a-hover-bg: #666 none;
   --header-bar-bg: white url(/css/anniversaries/911/titlebar.jpg);
   --header-title-bg: white none;

   --nav-color: #bdbdbd;
   --nav-a-color: #292929;
   --nav-a-text-shadow: var(--light-text-shadow);
   --nav-a-hover-color: white;
   --nav-a-hover-bg-color: #262626;
}

/* No idea why, but for some reason, this causes alignment problems on the homepage buttons and some other pages, plus might cause a "website crashed" error for some people when the filter is set to var(--img-filter). It's gotta be a browser bug, though, since this never happened in past years and why would a filter that adds a grayscale cause alignments to change? It makes no sense! But if the bug is fixed, the "mail *" (and "img") CSS below can be removed. */
main * {
   filter: none;
}

img {
   filter: var(--img-filter);
}