:root 
{
  --logo-size: 300px;
  --cavalry-red: #bd3d44;
  --cavalry-blue: #192f5d;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body 
{
   font-family:Arial;
   font-size: 14px;
   padding:0px;
   margin:0px;
}

logo
{
   position:fixed;
   top:10px;
   left:10px;
   display:inline-block;
   background:transparent url("/images/HUACAV_logo.png") no-repeat top left;
   background-size:var(--logo-size);
   width:var(--logo-size);
   height:var(--logo-size);
}

header
{
   position:fixed;
   top:0px;
   left:0px;
   width:100vw;
   height:200px;
   background:#ccc url("/images/headerImage1.jpg") no-repeat top left;
   background-size:cover;
   z-index:100;
}

nav
{
   margin-top:200px;
   padding-left:calc(30px + var(--logo-size));
   padding-top:10px;
   padding-bottom:10px;
   border-top:8px solid #bd3d44;
   background-color:#ccc;
}

.nav-link
{
   display:inline-block;
   color: var(--cavalry-blue);
   cursor:pointer;
   font-size:16px;
   text-decoration:none;
   cursor:pointer;
   margin-right:10px;
}

.nav-link:hover 
{
   text-decoration:underline;
}

socialLinks
{
   position:absolute;
   right:40px;
   top:150px;
}

socialLinks img
{
   margin-left:5px;
   filter: drop-shadow(2px 2px 2px #fffff3);
   cursor:pointer;
}

main
{
   margin-top:calc(var(--logo-size) - 60px);
   padding:20px;   
   padding-bottom:50px;
}

#pageBody
{
   width: calc(100vw - 600px);
   background-color:#fff;
   margin-left: auto;
   margin-right: auto;
}

#pageBody h1 
{
   font-size: 30px;
}

#pageBody h1, #pageBody div 
{
   text-align: left;
   line-height:1.5em;
}

button
{
   background-color:var(--cavalry-blue);
   padding:10px;
   border-radius:5px;
   color:#fff !important;
   font-weight:bold;
}

footer
{
   position:fixed;
   display:block;
   bottom:0px;
   left:0px;
   width:100%;
   height:80px;
   padding:10px;
   background-color:#ccc;
   border-top:5px solid #bd3d44;
}

footer .nav-link
{
  font-size:14px; 
  color: darkblue;
  margin-right:15px; 
}

.identifyingInfo
{
   margin-top:10px;
}

charityId
{
   display:block;
   margin-top:-30px;
}

copy
{
   float:right;  
}

welcomeImage
{
   width:100%;
   height:300px;
   background:transparent url("/images/welcome_image.jpg") no-repeat top left;
   display:block;
   background-size:cover;
   margin-top:30px;
}

#membershipPage table
{
   border-collapse: collapse; 
   table-layout: fixed; 
   width: 100%;
}

#membershipPage td
{
   vertical-align:top;
   border:1px solid #000;
   padding:10px 10px 10px 10px;
}

#membershipPage td ul
{
   margin-top:5px;
   margin-left:-25px;
}

#menuBtn
{
   display:none;
}

eventMonth, eventTime, eventLocation
{
   display:block;
}

eventDate, eventTitle
{
   display:inline-block;
   font-size:16px;
}

eventDate
{
   width:50px;
}

eventTime, eventLocation
{
   margin-left:55px;
}

eventLocation
{
   margin-bottom:20px;
}
eventMonth
{
   font-weight:bold;
   font-size:20px;
   margin-top:10px;
   margin-bottom:10px;
}

@media all and (max-width: 500px) 
{
   :root 
   {
     --logo-size: 150px;
   }

   logo
   {
      position:initial;
      background-position: top center;
      display:inline-block;
      width:100%;
   }

   header
   {
      height:130px;
   }

   nav
   {
      width:100vw;
      line-height:2em;
      margin-top:-25px;   
      padding:40px 0px 0px 10px;
   }

   .nav-link
   {
      display:block;
   }

   .hidden
   {
      display:none;
   }

   #menuBtn
   {
      display:inline-block;
      position:absolute;
      left:5px;
      top:140px;
      cursor:pointer;
   }

   socialLinks
   {
      right:5px;
      top:140px;
   }

   main
   {
      margin-top:var(--logo-size);
   }

   #pageBody
   {
      width: calc(100vw - 40px);
   }

   welcomeImage
   {
      background-position: top center;
   }

   footer
   {
      text-align:center;
      font-size:10px;
      height:65px;
   }

   footer .nav-link
   {
      display:inline-block;
      margin-top:-10px;
   }

   copy
   {
      display:none;
   }
}