:root
{
   --DarkRed: #a30031;
   --LightRed: #c9003c;
   --MatrixGreen: #92d490;
   --RichBlack: #010203;
   --Silver: #c0c0c0;
   --Tiger: #f96815;
}
@keyframes FadeIn
{
   0%{opacity:0;}
   100%{opacity:1;}
}
@keyframes SlideInLeft
{
   0%{opacity:0;transform:translateX(-100%);}
   100%{opacity:1;transform:translateX(0);}
}
@keyframes SlideInRight
{
   0%{opacity:0;transform:translateX(100%);}
   100%{opacity:1;transform:translateX(0);}
}
@keyframes TumbleInLeft
{
   0%{opacity:0;transform:translateX(-100%) rotate(-20deg);}
   100%{opacity:1;transform:translateX(0) rotate(0);}
}
@keyframes TumbleInRight
{
   0%{opacity:0;transform:translateX(100%) rotate(20deg);}
   100%{opacity:1;transform:translateX(0) rotate(0);}
}
@keyframes FlipPageLeft
{
   0%{opacity:0;transform:rotateY(-180deg);}
   100%{opacity:1;transform:rotateY(0);}
}
@media screen and (orientation:landscape)
{
   .GalleryPhoto {width:33%;}
   #AnnouncementsAndGallery
   {
      display:flex;
      flex-direction:row;
      align-items:center;
      gap:1em;
   }
   #Announcements
   {
      width:67%;
      height:100%;
      overflow:auto;
   }
   #GalleryReel
   {
      width:33%;
      height:100%;
      overflow:hidden;
      position:relative;
   }
}
@media screen and (orientation:portrait)
{
   .GalleryPhoto {width:50%;}
   #Announcements
   {
      width:100%;
   }
   #GalleryReel
   {
      width:100%;
      height:auto;
      padding-left:10%;
      padding-right:10%;
      position:relative;
      overflow:hidden;
   }
}
.GalleryImageLayer
{
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:auto;
   object-fit:contain;
   opacity:0;
   z-index:1;
   transition:opacity 0.3s ease-in-out;
}
.GalleryImageLayer.Active
{
   opacity:1;
   z-index:2;
}
.FadeIn { animation:FadeIn 0.6s ease; }
.SlideInLeft { animation:SlideInLeft 0.6s ease; }
.SlideInRight { animation:SlideInRight 0.6s ease; }
.TumbleInLeft { animation:TumbleInLeft 0.6s ease; }
.TumbleInRight { animation:TumbleInRight 0.6s ease; }
.FlipPage { animation:FlipPageLeft 0.6s ease; }
@media (min-width:768px)
{
   body{font-size:1rem;}
   button,a.button{font-size:1rem;padding:0.5em 1em;}
}
@media (min-width:1024px)
{
   h1 { font-size:2rem; }
   h2 { font-size:1.75rem; }
   h3 { font-size:1.5rem; }
}
* { box-sizing:border-box;text-align:center; }
a { color:darkblue;padding:0.5em;white-space:pre-wrap; }
body
{
   background-color:var(--RichBlack);
   color:var(--RichBlack);
   font-family:Arial,Helvetica,sans-serif;
   border:3em solid var(--DarkRed);
   border-image-source:linear-gradient(to top,var(--RichBlack) 5%,var(--DarkRed) 95%);
   border-image-slice:33%;
   border-image-width:3em;
   border-image-repeat:stretch;
   padding:1em;
}
button { height:1.5em;padding-top:0.25em; }
form { background-color:var(--Silver);text-align:left;padding:1em; }
h1 { color:var(--Silver); }
h2 { color:var(--DarkRed); }
img { width:100%; }
img.Icon { height:2em;width:auto; }
input { margin:0.25em; }
input[type=textarea] { width:100%;height:20em; }
li { padding:0.5em;text-align:left; }
nav { background-color:var(--LightRed);margin-bottom:1em;margin-top:1em;padding:1em; }
ol { background-color:var(--Silver);text-align:left;margin-top:1em;padding:1em; }
p { text-align:left; }
ul { background-color:var(--Silver);text-align:left;margin-top:1em;padding:1em; }
.FooterHeading { color:var(--RichBlack); }
.FooterLink { padding:0.5em;white-space:nowrap; }
.GalleryPhoto { float:right;padding-left:2em;padding-bottom:0; }
.AnnouncementImage { float:right;width:50%;margin-left:1em;margin-bottom:0.5em; }
.SectionContent { background-color:var(--Silver);padding:1em; }
#AnnouncementsAndGallery { width:100%; }
#BannerLogo { width:calc(100% + 2em);margin-top:-1em;margin-left:-1em;margin-right:-1em; }
#FormResult { width:0;height:0;padding:0;margin:0; }
