:root 
{
   --Black: #000000;
   --BrightBlue: #007bff;
   --Glow: rgba(255, 255, 255, 0.4);
   --LightBlue: #55aaff;
   --StrongGlow: rgba(255, 255, 255, 0.8);
   --White: #ffffff;
}
@media screen and (orientation: landscape) 
{
   .GalleryContainer { column-count: 3; column-gap: 10px; }
   .GalleryImage { width: 100%; }
   #Logo 
   {
      display: inline-block;
      margin-left: 30%;
      vertical-align: middle;
      width: 35%;
   }
   #MainMenu 
   {
      display: inline-flex;
      justify-content: flex-end;
      vertical-align: middle;
      width: 35%;
   }
   #MainMenu .NavBtn, #MainMenu .MenuDropdown 
   {
      margin: 0 0.5%;
      width: 24%;
   }
   #ProfilePic1, #ProfilePic2 { width: 33%; }
}
@media screen and (orientation: portrait) 
{
   .GalleryContainer { column-count: 2; column-gap: 10px; }
   .GalleryImage { width: 100%; }
   #Logo 
   {
      display: inline-block;
      vertical-align: middle;
      width: 50%;
   }
   #MainMenu 
   {
      display: inline-block;
      text-align: right;
      vertical-align: middle;
      width: 50%;
   }
   #ProfilePic1 { width: 65%; }
   #ProfilePic2 { width: 50%; }
}
* { box-sizing: border-box; }
a 
{
   color: var(--BrightBlue);
   text-decoration: none;
   transition: color 0.3s ease;
}
a:hover, a:focus 
{
   color: var(--LightBlue);
   text-decoration: underline;
}
body 
{
   background-color: var(--Black);
   color: var(--White);
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1.125rem;
   line-height: 1.6;
   margin: 0;
   padding: 1em;
   text-align: center;
}
details summary { list-style: none; outline: none; }
details summary::-webkit-details-marker { display: none; }
fieldset 
{
   border: none;
   margin: 0;
   padding: 0;
}
h1 { margin-bottom: 1em; }
.DropdownList 
{
   background: var(--Black);
   border: 0.063rem solid var(--White);
   display: flex;
   flex-direction: column;
   left: 0;
   position: absolute;
   top: 100%;
   width: 100%;
   z-index: 100;
}
.GalleryContainer 
{
   margin: 0 auto;
   width: 100%;
}
.GalleryImage 
{
   border: 0.063rem solid transparent;
   break-inside: avoid;
   display: block;
   height: auto;
   margin-bottom: 5px;
   padding: 5px;
   transition: all 0.3s ease;
}
.GalleryImage:hover 
{
   border: 0.063rem solid var(--White);
   box-shadow: 0 0 0.938rem var(--StrongGlow);
   cursor: pointer;
   transform: scale(1.02);
}
video.GalleryImage 
{
   aspect-ratio: 9 / 16;
   background-color: var(--Black);
   object-fit: cover;
}
.MenuDropdown { position: relative; }
button.NavBtn, .MenuSummary 
{
   background-color: var(--Black);
   border: 0.063rem solid var(--White);
   box-shadow: 0 0 0.313rem var(--Glow);
   color: var(--White);
   cursor: pointer;
   display: inline-block;
   font-size: 1rem;
   min-height: 3rem;
   padding: 0.75em 0.5em;
   text-align: center;
   transition: box-shadow 0.3s ease;
   vertical-align: top;
   width: 100%;
}
button.NavBtn:hover, .MenuSummary:hover { box-shadow: 0 0 0.938rem var(--StrongGlow); }
.ButtonFormat 
{
   background-color: var(--Black);
   border: 0.063rem solid var(--White);
   box-shadow: 0 0 0.313rem var(--Glow);
   color: var(--White);
   cursor: pointer;
   display: inline-block;
   font-size: 1.1rem;
   height: 3.5rem;
   line-height: 3.5rem;
   padding: 0 1rem;
   text-align: center;
   transition: box-shadow 0.3s ease;
   vertical-align: top;
   width: auto;
}
.ButtonFormat:hover { box-shadow: 0 0 0.938rem var(--StrongGlow); }
button.SubNavBtn { background: var(--Black); border: none; border-bottom: 0.063rem solid var(--White); color: var(--White); margin: 0; padding: 0.625rem; width: 100%; }
button.Tabs 
{
   all: unset;
   cursor: pointer;
   display: inline-block;
   height: auto;
   margin: 0 2.5%;
   vertical-align: middle;
   width: 15%;
}
button.Tabs img 
{
   display: block;
   filter: grayscale(100%);
   height: auto;
   opacity: 0.6;
   transition: all 0.3s ease;
   width: 100%;
}
button.Tabs:hover img, button.Tabs[aria-selected='true'] img 
{
   filter: grayscale(0%);
   opacity: 1;
}
#Comments { width: 100%; }
#FooterBanner { display: block; }
#FooterBanner img 
{
   height: auto;
   max-width: 100%;
}
#FormResult 
{
   border: none;
   height: 0;
   visibility: hidden;
   width: 0;
}
#GalleryLabel 
{
   display: block;
   height: 3.5rem;
   line-height: 3.5rem;
   margin: 0;
   text-align: center;
   width: 100%;
}
#ProfilePic1 
{
   float: left;
   padding-bottom: 1rem;
   padding-right: 1.5rem;
}
#ProfilePic2 
{
   float: right;
   padding-bottom: 1rem;
   padding-left: 1.5rem;
}
#TabBar 
{
   margin: 1.5em 0;
   text-align: center;
   white-space: nowrap;
   width: 100%;
}```