:root {
  --royalblue: #38499f;
  --royalred: #fa236e;
  --royalpink: #f94f8a;
  --royaldarkred: #892044;
  --royalgold: #c89917;
  --royalbeige: #e8e5c3;
  --royalwhite: #f8f2bf;
  --white: #ffffff;
  --blushpink: #f1abb9;
  --lightgreen: #8cbfb0;
  --blue: #8aa5ff;
  --emerald: #50c878;
  --teal01: #89d2dc;
  --teal02: #008080;
  --mustard: #ffdb58;
  --lightgray: #e3e3e3;
  --wateryblue: #99c0e3;
  --turquoise: #30d5c8;
  --cream: #fffdd0;
  --amethyst: #9966cc;
  
  font-size: 16px;
}

/*
<div id="colors">
<div class="color" style="background-color: #38629f">Queen Blue</div>
<div class="color" style="background-color: #27456f">Police Blue</div>
<div class="color" style="background-color: #d6e7ff">Water</div>
<div class="color" style="background-color: #acceff">Pale Cornflower Blue</div>
<div class="color" style="background-color: #4f409f">Blue-Magenta Violet</div>
<div class="color" style="background-color: #372d6f">Deep Koamaru Blue</div>
<div class="color" style="background-color: #dfd9ff">Pale Lavender</div>
<div class="color" style="background-color: #bfb3ff">Vodka Lavendar</div>
<div class="color" style="background-color: #389f86">Zomp Green</div>
<div class="color" style="background-color: #276f5e">Amazon Green</div>
<div class="color" style="background-color: #d6fff5">Light Cyan</div>
<div class="color" style="background-color: #acffeb">Pale Blue</div>
<div class="color" style="background-color: #9f7138">Metallic Sunburst</div>
<div class="color" style="background-color: #6f4f27">Field Drab Brown</div>
<div class="color" style="background-color: #ffecd6">Papaya Whip White</div>
<div class="color" style="background-color: #ffdaac">Navajo White</div>
</div>
*/

* {
    margin: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
}

/* Style the body */
body {
  font-family: Arial, Helvetica, sans-serif;
  /* margin: 0 2vw 2vh 2vw; */
  width: 100%;
    height: 100%;
    background-color: var(--royalgold);
}

.fakeimg {
  display: none;
}

/* Hero section */
.hero {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 25%;
  margin: 10vh 0 1vh 0;
  /* background-image: url("../images/thegamenobg.png"); */
  /* background-image: url("../images/thegame-03-cropped.jpg"); */
  /* background-size:auto; */
  /* background-position: center; */
  /* background-size: cover; */
  /* background-repeat: no-repeat; */
}

.hero img {
  width: 98%;
  aspect-ratio: 10 / 2.5;
  border-radius: 2vw;
  margin: 0 5vw  0 7.5vw;
}

/* #hero-label { */
  /* text-align: center; */
  /* color: var(--royalwhite); */
  /* background-color: var(--royalblue); */
  /* margin: 1vh 0 0 0; */
  /* width: 100%; */
/* } */

/* typewriter effect */
#hero-label {
  color: var(--royalwhite);
  display: inline-block;
  letter-spacing: 0.1rem;
  /* border-right: solid 3px black; */
  width: 0;
  margin-left: 4vw;
  overflow: hidden;
  white-space: nowrap;
  animation: hero-label 2s steps(14) 1s forwards,
  blink 0.5s steps(1);
}
@keyframes hero-label {
  to { width: 14ch }
}
@keyframes blink {
  from { border-color: transparent }
  /* 50% { border-color: black; } */
  to { border-color: transparent; }
}
/* end typewriter effect */

/* Header/logo Title */
.header {
  padding: 80px;
  text-align: center;
  background: #1abc9c;
  color: white;
}

/* Increase the font size of the heading */
.header h1 {
  font-size: 3rem;
}

/* Style the top navigation bar */
.navbar {
  position: fixed;
  top: 0;
  height: 7vh;
  overflow: hidden;
  background-color: var(--royalblue);
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 3rem;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}


/* Style the navigation img */
.navbar img {
  height: 6vh;
  /* float: left; */
  /* display: block; */
}


/* Style the navigation bar links */
.navbar a {
  /* float: right; */
  /* display: block; */
  color: white;
  text-align: center;
  padding: 7px 7px;
  text-decoration: none;
  font-size: .75rem;
}

/* Right-aligned link */
.navbar a.right {
  float: right;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Column container */
.row {  
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
}

/* Main column */
.main {   
  -ms-flex: 70%; /* IE10 */
  flex: 70%;
  background-color: var(--royalblue);
  padding: 20px;
  /* margin-left: 2vw; */
  /* margin-right: 2vw; */
}

.main section {
  margin-bottom: 2rem;
  /* margin-right: 2vw; */
  border-radius: 2vw;
}

.main section h2 {
  text-align: center;
  background-color: var(--royalgold);
  margin-bottom: 2vh;
}

.main section p {
  text-align: left;
  padding: 2vw;
}

/* About Us section */
.main #main-aboutus {   
 color: var(--royalwhite);
 font-weight: 400;
}

.main #main-aboutus h2 {   
  border-radius: 2vw;
  color: var(--royalgold);
  background-color: var(--royalwhite);
 }

 /* Our Mission section */
.main #main-ourmission {   
  color: var(--royalbeige);
  font-weight: 400;
 }
 
 .main #main-ourmission h2 {   
   border-radius: 2vw;
  }

  /* In Memoriam Area */
.main #main-inmemoriamarea {
    margin-bottom: 2vh;
    padding-bottom: 1vh;
    border-radius: 2vw;
  }
  
  .main #main-inmemoriamarea {
    background-color: purple;
    color: lightgold; 
  }
  
  .main #main-inmemoriamarea h2 {   
    border-radius: 2vw;
  }

/* Members Area */
.main #main-membersarea {
  margin-bottom: 2vh;
  padding-bottom: 1vh;
  border-radius: 2vw;
}

.main #main-membersarea {
  background-color: var(--wateryblue);
  /* color: darkgreen; */
}

.main #main-membersarea h2 {   
  border-radius: 2vw;
}

.zoom-on-scroll {
  transform: scale(.75);
  transition: transform 0.5s ease-in-out;
}

/* Members Area profile card*/
.card {
  /* display: flex; */
  /* flex-direction: row; */
  border-radius: 3vw;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
  /* max-width: 300px; */
  padding: 1vw 2vw;
  /* text-align: center; */
  font-family: arial;
  font-weight: 400;
  margin: 2vw 2vw;
}

.card .profile-card-header {
  text-align: center;
  margin-bottom: 2vh;
}

.card .title {
  color: var(--royalblue);
  font-size: .80rem;
}

.card img {
  width: 100px;
  margin: 1vw 1vw;
  border-radius: 2vw;
}
  

/* .card button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
  font-size: 1rem;
} */

.card a {
  /* text-decoration: none; */
  /* font-size: 1.5rem; */
  font-size: .75rem;
  color: var(--royaldarkred);
}

/* .card button:hover, .card a:hover {
  opacity: 0.7;
} */




/* individual profile cards
so we can change colors, etal.
without editing the index.html file
 */
#william-parker-profile {
  background-color: var(--royalbeige);
  color: darkblue;
}
#ken-jones-profile {
  background-color: var(--lightgray);
  color: darkblue;
}
#carl-cater-profile {
  background-color: var(--turquoise);
  color: darkblue;
}
#charles-mckee-profile {
  background-color: var(--royalblue);
  color: palegoldenrod;
}
#henry-deaderick-profile {
  background-color: var(--royalgold);
  color: darkblue;
}
#elvis-pitts-profile {
  background-color: var(--white);
  color: darkblue;
}
#elvis-pitts-profile img {
  height: 20vh;
  width: auto;
}
#don-hamilton-profile {
  background-color: var(--royalbeige);
  color: darkblue;
}
#anthony-gomez-profile {
  background-color: var(--lightgray);
  color: darkblue;
}
#kevin-penn-profile {
  background-color: var(--royalgold);
  color: var(--white);
  font-weight: bold;
}
#will-crosier-profile {
    background-color: var(--royalbeige);
    color: darkblue;
    font-weight: bold;
  }



/* Gallery section */

.main #main-gallery {
  background-color: cyan;
  color: #000;
  padding-bottom: 1vh;
}

.main #main-gallery h2 {   
  border-radius: 2vw;
  color: var(--royalgold);
  background-color: var(--royalwhite);
 }

.main .gallery-section-subheader {
  text-align: center;
  margin-bottom: 2vh;
}

/* #main-gallery-images img {
  /* width: 30vw; */
  /* height: auto; */
  /* border-radius: 2vw; */
  /* border: solid black 10px; */
/* } */
/* #main-gallery-images {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: space-evenly;
  align-items: center;
  gap: 10px;
  margin: 2vw 2vw;
  background-color: var(--royalred);
} */

.main #main-news {
  display: none;
  background-color: var(--blue);
  color: var(--royalwhite);
}

.main #main-news h2 {   
  border-radius: 2vw;
  color: var(--royalgold);
  background-color: var(--royalwhite);
 }

.main #main-events {
  display: none;
  background-color: var(--emerald);
  color: var(--royalwhite);
}

.main #main-events h2 {   
  border-radius: 2vw;
  color: var(--royalwhite);
  background-color: var(--royalgold);
 }

.main #main-socialmedia {
  display: none;
  background-color: var(--mustard);
  color: var(--royalblue);
}

.main #main-socialmedia h2 {   
  border-radius: 2vw;
  color: var(--royalgold);
  background-color: var(--royalwhite);
 }
 
 .main #main-contactform {
  display: none;
  background-color: var(--amethyst);
  color: var(--royalwhite);
}

.main #main-contactform h2 {   
  border-radius: 2vw;
  color: var(--royalwhite);
  background-color: var(--royalgold);
 }
/* Footer */
.footer {
  display: block;
  width: 100vw;
  padding: 20px;
  text-align: center;
  background: var(--royalblue);
}

.footer p a {
  color: var(--royalwhite);
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
  /* .row {   
    flex-direction: column;
  } */
  /* .hero {
    height: 15vh;
  } */
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
  .navbar {
    /* height: 12vh; */
  }
  .navbar img {
    /* display: none; */
    /*width: 100%;*/
  }
  .navbar a {
    /* float: none; */
    /* width: 100%; */
    /* font-size: .75rem; */
  }
  .card {
    /* flex-direction: column; */
  }
  
}

.shadowtext {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

.video-column {
  display: flex;
}
video {
  max-width: 100%;
  height: auto;
}