html {
  scroll-behavior: smooth;
  background-color: white;
  -ms-overflow-style: none;
  color: rgb(0, 0, 0);
}

h1 {
font-family: 'Montserrat', sans-serif;
}

h2 {
font-family: 'Montserrat', sans-serif;
}

p {
font-family: 'Open Sans', sans-serif;
}

#body {
  margin: 0%;
  height: auto;
}

a:link {
  text-decoration: none;
  color: rgb(212, 215, 216);
}

a:visited {
  text-decoration: none;
  color: rgb(212, 215, 216);
}

a:hover {
  text-decoration: underline;
  color: rgb(206, 87, 18);
}

/* 9.jpg, bgpos: bottom | 95.jpg, bgpos: center | 110.jpg, bgpos: bottom */
.header {
  padding-top: 1rem;
  background-image: url("galback.jpg");
/*    background-color: rgb(228, 230, 231); */
  background-position: center;
  background-size: cover;
  height: 30rem;
  margin: 0%;
}

/* #hindsight {     THIS GOES WITH 110.jpg
color:steelblue;
font-family:'Times New Roman', Times, serif;
} */

/*
.inside-header {

}
*/

.title { /* Title */
  margin: 1%;
  height: 6rem;
  text-align: center;
  color: rgb(255, 255, 255);
  font-size: 1.3em
}

#logo { /* Logo */
  text-align: center;
}

#logo-img {
  width: 10rem;
}


.navbar {
  z-index: 30; /* Because the fading images overlap the navbar */
  background-color: rgb(23, 23, 23);
  position: sticky;
  top: 0;
  font-family: 'Open Sans', sans-serif;
}

.navbar ul{
    list-style: none;
    margin: 0%;
    padding: 0%;
}

.navbar li {
    display: inline-block;
    padding: 0 20px;
}

.navbar p:hover {
  color: rgb(206, 87, 18);
  cursor: default;
}

.navbar p {
  color: rgb(212, 215, 216);
  transition: 0.2s;
}

.navbar a {
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    transition: 0.2s;
  }

  .dropdown {
      position: relative;
      display: inline-block;
      text-decoration: none;
      text-transform: uppercase;
      font-size: 14px;
      font-weight: bold;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      border-radius: 0% 0% 10% 10%;
      background-color: rgb(23, 23, 23);
      min-width: 15rem;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
    
    .dropdown-content a {
      color: rgb(212, 215, 216);
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    
    .dropdown-content a:hover {
      background-color: rgb(212, 215, 216);
      color: rgb(206, 87, 18);
  }
    
    .dropdown:hover .dropdown-content {display: block;}     


.dropdown-2 {
      position: relative;
      display: inline-block;
      text-decoration: none;
      text-transform: uppercase;
      font-size: 14px;
      font-weight: bold;
    }
    
    .dropdown-2-content {
      display: none;
      position: absolute;
      border-radius: 0% 0% 8% 8%;
      background-color: rgb(23, 23, 23);
      min-width: 15rem;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
    
    .dropdown-2-content a {
      color: rgb(212, 215, 216);
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    
    .dropdown-2-content a:hover {
      background-color: rgb(212, 215, 216);
      color: rgb(206, 87, 18);
  }
    
    .dropdown-2:hover .dropdown-2-content {display: block;} 

    .dropdown-3 {
      position: relative;
      display: inline-block;
      text-decoration: none;
      text-transform: uppercase;
      font-size: 14px;
      font-weight: bold;
    }
    
    .dropdown-3-content {
      display: none;
      position: absolute;
      border-radius: 0% 0% 8% 8%;
      background-color: rgb(23, 23, 23);
      min-width: 5rem;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
    
    .dropdown-3-content a {
      color: rgb(212, 215, 216);
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    
    .dropdown-3-content a:hover {
      background-color: rgb(212, 215, 216);
      color: rgb(206, 87, 18);
  }
    
    .dropdown-3:hover .dropdown-3-content {display: block;} 

        @keyframes ydeal {
          from { transform: translate3d(0, 0, 0);}
          to { transform: translate3d(0, 200px, 0);}
        }
        @media (prefers-reduced-motion: no-preference) {
          #ydeal {
            animation-name: ydeal;
            animation-duration: 2s;
            animation-iteration-count: 1;
          }
        } 

#gallery {
  text-align: center;
  font-size: 3em;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
  justify-content: center;
}
.column {
  max-width: 22%;
  padding: 0 4px;
}
.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
  border-radius: 3.6%;
  transition: 0.3s;
}
.column img:hover {
  /* Use either transform:scale or opacity on hover. Both does not look good. ↓ */
  transform:scale(1.1);
  /* opacity: 0.7; */
  cursor: pointer;
}

.modal {
display: none;
position: fixed;
z-index: 60;
/*padding-top: 100px;*/
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

.modal-content {
flex-flow: column wrap;
margin: auto;
max-height: 90%;
border-radius: 3%;
}
/*
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
*/

.modal-content, #caption {
animation-name: zoom;
animation-duration: 873.968ms;
}

@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}

.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}

.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 850px){
.modal-content {
  max-width: 100%;
}
}


@media screen and (max-width: 800px) {
  .column {
    flex: 33%;
    max-width: 33%;
  }
}
@media screen and (max-width: 600px) {
  .column {
    flex: 75%;
    max-width: 75%;
  }
}

.footer {
  display: flex;
  text-align: center;
  position: absolute;
  bottom: 0%;
  width: 100%;
}

/* .footer text-align didn't seem to do anything...: */
#footer-txt {
  text-align: center;
  font-size: 1.5rem;
  font-family: 'Montserrat', sans-serif;
}


@media screen and (max-width:750px) {
  #nav-abt {
    display: none;
  }

  #nav-hist {
    display: none;
  }

  #nav-join {
    display: none;
  }
}

@media screen and (max-width:455px) {
  #logo { /* Logo */
    padding-top: 4rem;
    text-align: center;
  }

  .navbar li {
    padding: 0 15px;
  }

  .dropdown-content {
    min-width: 6rem;
  }
}