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("wow3.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;} 

section {
    padding: 40px, 30%;
    padding-top: 4%;
    padding-bottom: 4%;
}

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

#name-color {
    color: brown;
}

/* ‼ Preferrably use PADDING rather than margin to adjust images and text because having margin: auto helps when resizing the window/screen ‼*/
/* Setting → margin-left/right: auto ← perfectly centers the element when the window is too small to fit on one line.*/

#skipper {
    font-size: 1.5em;
    width: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    flex-grow: 3;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-left: auto;
    margin-right: auto;
}

#skipper-disc {
    width: 75%;
    padding-right: 6rem;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

#skipper-h {
    padding-bottom: 1rem;
    /* text-align: left; */
}

#skipper-img {
    margin-left: auto;
    margin-right: auto;
    border-radius: 5%;
    border-color: black;
    border-style:solid;
}

#cc {
  font-size: 1.5em;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  flex-grow: 3;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
}

#cc-disc {
  width: 75%;
  padding-left: 6rem;
  text-align: right;
  margin-left: auto;
  margin-right: auto;
}

#cc-h {
  padding-bottom: 1rem;
  /* text-align: right; */
}

#cc-img {
  margin-left: auto;
  margin-right: auto;
  border-radius: 5%;
  border-color: black;
  border-style: solid;
}

#leadership2 {
  text-align: center;
  font-size: 2.5em;
}
/* _____________Epic Bosun guy ___________*/

#boatswain {
  font-size: 1.5em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-grow: 3;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
}

#boat-disc {
  width: 75%;
  padding-right: 6rem;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

#boat-h {
  padding-bottom: 1rem;
}

#boat-img {
  margin-left: auto;
  margin-right: auto;
  border-radius: 5%;
  border-color: black;
  border-style: solid;
}
/* ____________________ BoMAd ___________*/

#boatmateadmin {
  font-size: 1.5em;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  flex-grow: 3;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
}

#boatmateadmin-disc {
  width: 75%;
  padding-left: 6rem;
  text-align: right;
  margin-left: auto;
  margin-right: auto;
}

#boatmateadmin-img {
  margin-left: auto;
  margin-right: auto;
  border-radius: 5%;
  border-color: black;
  border-style: solid;
}



/* ____________________ BoPro ___________*/




#boatmatepro {
  font-size: 1.5em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-grow: 3;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
}

#boatmatepro-disc {
  width: 75%;
  padding-right: 6rem;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

#boatmatepro-h {
  padding-bottom: 1rem;
}

#boatmatepro-img {
  margin-left: auto;
  margin-right: auto;
  border-radius: 5%;
  border-color: black;
  border-style: solid;
}
/* ____________________ Storekeeper ___________*/
#storekeeper {
  font-size: 1.5em;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  flex-grow: 3;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
}

#store-disc {
  width: 75%;
  padding-left: 6rem;
  text-align: right;
  margin-left: auto;
  margin-right: auto;
}

#store-h {
  padding-bottom: 1rem;
}

#store-img {
  margin-left: auto;
  margin-right: auto;
  border-radius: 5%;
  border-color: black;
  border-style: solid;
}

/*         Purser              _____________________ */
#purser {
  font-size: 1.5em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-grow: 3;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
}
/* _________________ Purser ____________ */
#purser-disc {
  width: 75%;
  padding-right: 6rem;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

#purser-h {
  padding-bottom: 1rem;
}

#purser-img {
  margin-left: auto;
  margin-right: auto;
  border-radius: 5%;
  border-color: black;
  border-style: solid;
}
/* _________________ Yeoman ____________ */

#yeoman {
  font-size: 1.5em;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  flex-grow: 3;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
}

#yeoman-disc {
  width: 75%;
  padding-left: 6rem;
  text-align: right;
  margin-left: auto;
  margin-right: auto;
}

#yeoman-h {
  padding-bottom: 1rem;
}

#yeoman-img {
  margin-left: auto;
  margin-right: auto;
  border-radius: 5%;
  border-color: black;
  border-style: solid;
}
/* _________________ Med Sped guy ____________ */

#mspec {
  font-size: 1.5em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-grow: 3;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
}

#mspec-disc {
  width: 75%;
  padding-right: 6rem;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}
/*
#mspec-h {
  padding-bottom: 1rem;
}
*/
#mspec-img {
  margin-left: auto;
  margin-right: auto;
  border-radius: 5%;
  border-color: black;
  border-style: solid;
}




#dino {
  font-size: 1.5em;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  flex-grow: 3;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
}

#dino-disc {
  width: 75%;
  padding-left: 6rem;
  text-align: right;
  margin-left: auto;
  margin-right: auto;
}

#dino-h {
  padding-bottom: 1rem;
}

#dino-img {
  margin-left: auto;
  margin-right: auto;
  border-radius: 5%;
  border-color: black;
  border-style: solid;
  max-width: 272px;
  max-height: 351px;
}


.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:1200px) {

  #skipper-disc {
    text-align: center;
    padding: 1%;
  }

  #cc-disc {
    text-align: center;
    padding: 1%;
  }

  #boat-disc {
    text-align: center;
    padding: 1%;
  }

  #boatmateadmin-disc {
    text-align: center;
    padding: 1%;
  }

  #boatmatepro-disc {
    text-align: center;
    padding: 1%;
  }

  #store-disc {
    text-align: center;
    padding: 1%;
  }

  #purser-disc {
    text-align: center;
    padding: 1%;
  }

  #yeoman-disc {
    text-align: center;
    padding: 1%;
  }

  #mspec-disc {
    text-align: center;
    padding: 1%;
  }
}

@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;
  }

  .mspec-p {
    font-size: 1.15rem;
  }

  .navbar li {
    padding: 0 15px;
  }

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