@import url("https://fonts.googleapis.com/css2?family=Playpen+Sans&display=swap");
/******* general styling **********/

html {
  box-sizing: border-box;
  font-size: 62.5%; /*1rem = 10px, 10px/16px = 62.5%*/
}
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body {
  max-width: 100vw;
  background: url(../images/route-map.webp) no-repeat 100% 80%;
  background-size: cover;
  background-attachment: fixed;
  font-family: "Playpen Sans", cursive;
}

h1 {
  width: 100%;
  font-size: 6rem;
  text-align: center;
  padding: 3rem;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  margin-bottom: 3rem;
}

.subhead {
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 2rem 2rem;
}

a {
  text-decoration: none;
}

.hov-effect:hover {
  text-decoration-color: blueviolet;
  color: white;
  background-color: blueviolet;
}

.display-none {
  display: none;
}
/******* navbar  **********/

header {
  position: fixed;
  display: flex;
  justify-content: space-between;
  height: 10rem;
  background: darkslategray;
  top: 0;
  width: 100%;
  align-items: center;
  z-index: 99;
}

#logo {
  height: 9rem;
  width: 9rem;
}

#navlinks {
  display: flex;
}
#navlinks li a {
  text-decoration: none;
  color: white;
}

#navlinks li {
  list-style: none;
  padding-right: 1rem;
  font-size: 3rem;
}

#navlinks li a:hover {
  border-bottom: 2px solid black;
}

.active {
  border-bottom: 2px solid black;
}

main {
  margin-top: 10rem;
  max-width: 100vw;
}

/********** footer style ***********/
footer {
  display: flex;
  justify-content: space-evenly;
  background: darkslategray;
  margin-top: 3rem;
}
.footer-section {
  width: 33%;
  position: relative;
}

.footer-external {
  margin: 3rem 0rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-external-imgs {
  max-width: 24%;
  width: 100%;
}

.footer-img-margin {
  margin-top: -2rem;
}

.footer-history-img {
  max-width: 100%;
  padding-top: 1rem;
}

.footer-external-text {
  position: absolute;
  bottom: 0.5rem;
  font-size: 1.5rem;
  color: white;
}

.footer-external-imgs:hover ~ .footer-external-text {
  color: blueviolet;
}

/* mobile nav  */

.container {
  max-width: 60%;
  width: 60%;
}

.mobile-navbar {
  width: 100%;
  position: absolute;
  top: 0;
  display: none;
}

.mobile-navbar .mobile-navbar-container li {
  list-style: none;
}

.mobile-navbar-container #nav-mobile-checkbox {
  position: absolute;
  display: block;
  height: 32px;
  width: 32px;
  top: 33px;
  right: 22px;
  opacity: 0;
  z-index: 5;
}

.mobile-navbar-container .hamburger {
  position: absolute;
  font-size: 3rem;
  top: 25px;
  right: 25px;
  z-index: 2;
}

.mobile-navlinks ul {
  height: 40rem;
}

#mobile-navlinks-logo {
  margin: 3rem;
  height: 10rem;
  width: 10rem;
}
.mobile-navbar .mobile-navlinks {
  transform: translate(-150%);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.5s ease-in-out;
  text-align: center;
  background-color: darkslategray;
}

.mobile-navbar-container .mobile-navlinks li {
  margin-bottom: 1.2rem;
  font-size: 1.5rem;
  font-weight: 500;
  margin: 5rem 0;
}

.mobile-navlinks li a {
  color: white;
}

.mobile-navbar-container input[type="checkbox"]:checked ~ .mobile-navlinks {
  transform: translateX(0);
}

/********** index page ***********/

.hero {
  width: 100%;
  height: 70vh;
  background: #ccc;
  margin: 0;
  padding: 0;
  position: relative;
}

.slide-show-container {
  height: 100%;
  width: 100%;
  max-width: 100%;
  position: relative;
  float: right;
}
/* CSS Styles for all slides */
.wrapper-one,
.wrapper-two,
.wrapper-three {
  background-color: #eee;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  position: absolute;
  background-position: center;
  background-size: cover;
  display: flex;
}

.wrapper-three {
  background-size: 100% 100%;
}

/* CSS Styles for each slide */

.wrapper-one {
  background-image: url("../images/st-nazaire-painting.webp");
}

.wrapper-two {
  background-image: url("../images/hms-campbeltown-hit-dock-2.webp");
  animation: slideTwoAnim 20s infinite;
}

.wrapper-three {
  background-image: url("../images/modification-to-campbeltown.webp");
  animation: slideThreeAnim 20s infinite;
}

/* Styles for the text */

.wrapper-text {
  position: relative;
  text-align: center;
  width: 100%;
  height: 100%;
}

.wrapper-text-inner {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 2rem;
  border-radius: 1rem;
  color: white;
  background: darkslategray;
}

/* Animations */
@keyframes slideTwoAnim {
  0% {
    opacity: 0;
  }
  17% {
    opacity: 0;
  }
  33% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  67% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes slideThreeAnim {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  67% {
    opacity: 1;
  }
  83% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.hero-header-text {
  position: absolute;
  top: -4%;
  left: 0%;
  border: 2px solid darkslategray;
  background: darkslategray;
  color: white;
  padding: 2rem;
  font-size: 3rem;
  width: 100%;
  max-width: 100%;
  text-align: center;
}

.hero-down-arrow {
  position: absolute;
  bottom: 0%;
  left: 50%;
  font-size: 5rem;
  color: darkslategray;
}

/************ main content of index page *************/

.index-main {
  display: flex;
  flex-wrap: wrap;
}

.st-nazaire-main-content {
  width: 100vw;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  height: fit-content;
  margin: 3rem 10rem;
  padding: 5rem 7rem;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
}

.st-nazaire-main-content img {
  float: left;
  margin: 2rem;
}

.tirpitz,
.mapplan-detailed,
.memorial-closeup,
.memorial-fullsize {
  width: 30%;
}

.mock-up {
  float: none;
  width: 100%;
  margin: 2rem 0 !important;
  padding: 0rem 2rem;
}

.st-nazaire-main-content-header {
  margin: 3rem 0;
  font-size: 3rem;
  text-align: center;
}

.st-nazaire-main-content-text {
  text-align: justify;
  font-size: 2.5rem;
  padding: 0 2rem;
  margin-bottom: 2rem;
}

.st-nazaire-memorial {
  border: thin #c0c0c0 solid;
  display: flex;
  flex-flow: column;
  padding: 5px;
  margin: auto;
  width: 30%;
}

.st-nazaire-memorial-img {
  margin: 0rem !important;
  max-width: 100%;
}

.st-nazaire-memorial-caption {
  background-color: #222;
  color: #fff;
  font: italic smaller sans-serif;
  padding: 3px;
  text-align: center;
  font-size: 2rem;
}

/************ gallery page *************/

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Creates the columns */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

.gallery-img-size {
  width: 100%;
}

blockquote {
  font-size: 2rem;
  text-align: justify;
  padding: 0 2rem;
  margin-bottom: 2rem;
}

.vc-winners {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 5rem 0rem;
}

.vc-winners-title {
  width: 100%;
  text-align: center;
  font-size: 3rem;
  margin-bottom: 3rem;
}
.vc-winners-card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 44vw;
  margin: 4rem 2rem;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
}

.vc-winners-card-title {
  margin: 3rem 0;
  font-size: 1.5rem;
}

.vc-winners-card img {
  float: left;
  height: 300px;
  width: 200px;
  margin: 2rem 2rem 0.5rem 1rem;
}

blockquote i {
  padding-right: 1rem;
}

.citation {
  text-decoration: underline;
  font-size: 22px;
  color: white;
}

/************* media page ***************/

.youtube-documentary {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.youtube-documentary-innervid {
  margin: 0 auto;
}
.youtube-documentary-head {
  width: 100%;
  font-size: 2rem;
  margin-bottom: 1rem;
}
.youtube-documentary-video iframe {
  aspect-ratio: 16 / 9;
  width: 70rem;
}

/* podcast */
.podcast {
  width: 80%;
  margin: 15rem auto;
}

.podcast-header {
  color: black;
  margin-bottom: 2rem;
}

.podcast-header a {
  font-size: 2rem;
  color: white;
  text-decoration: none;
}

.montgomery {
  width: 100%;
  border: none;
}

/* st nazaire books */
.st-nazaire-books {
  display: flex;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
  width: 90%;
  margin: 0 auto;
}

.st-nazaire-books > * {
  padding: 10px;
}

.st-nazaire-books-fig {
  flex: 1 0 100%;
}

.st-nazaire-books-head {
  font-size: 2rem;
  margin-bottom: 2rem;
  flex: 1 100%;
}

.st-nazaire-books-fig {
  display: flex;
  align-items: center;
  justify-content: center;
}

.st-nazaire-books-fig-img {
  width: 25%;
}

.order {
  order: 2;
}

.st-nazaire-books-fig-review {
  margin: 2rem;
  text-align: justify;
  max-width: 75rem;
}
.st-nazaire-books-fig-review-inner {
  border-radius: 3rem;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  font-size: 1.5rem;
  padding: 3rem;
}

.st-nazaire-books-fig-review-inner a {
  font-size: 2rem;
  float: right;
  color: white;
  text-decoration: underline;
}

form {
  width: 40rem;
  margin: 11rem auto;
  padding: 3rem;
  border-radius: 5rem;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 1);
}
form h2 {
  font-size: 2rem;
  text-align: center;
}

fieldset {
  border: none;
}
fieldset label {
  font-size: 2rem;
  width: 125px;
}

fieldset input[type="checkbox"] {
  width: auto;
  transform: scale(1.5);
}
#first-name,
#last-name,
#email-address {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 10px;
  width: 100%;
  color: #2c3e50;
  font-size: 13px;
}

.checkbox-buttons {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 2rem;
}

.checkbox-buttons:first-child {
  margin-top: 1rem;
}

.checkbox-buttons div {
  display: flex;
  width: 40%;
  justify-content: flex-end;
}

.button {
  width: 100px;
  background: darkslategray;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 1px;
  cursor: pointer;
  padding: 10px;
  margin: 10px 5px;
  text-decoration: none;
  font-size: 14px;
}
.button:hover,
.buy-hover:hover {
  text-decoration-color: blueviolet;
  color: white;
  background-color: blueviolet;
}

textarea {
  width: 100%;
}

/******************* sign up confirmation page ****************/

.signup-confirm-text {
  background: darkslategray;
  font-weight: bold;
  width: 576px;
  font-size: 3rem;
}

.signup-confirm-img {
  width: 576px;
}

.signup-confirm-header {
  font-size: 6rem;
}

.signup-confirm-section {
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 60rem;
}

.signup-confirm-text a {
  color: white;
}
/************** media query *******************/

@media only screen and (max-width: 1026px) {
  /* index page */
  h1 {
    font-size: 5rem;
    padding: 2rem;
  }
  .slide-show-container {
    width: 100%;
  }
  .tirpitz,
  .mapplan-detailed,
  .memorial-closeup,
  .memorial-fullsize {
    width: 60%;
  }
  .st-nazaire-memorial {
    width: 60%;
  }

  /* Media page */

  .st-nazaire-books {
    max-width: 100%;
    width: 100%;
  }
  .st-nazaire-books-fig-review {
    margin: 2rem;
  }
  .st-nazaire-books-fig-img {
    width: 40%;
  }
  .st-nazaire-books {
    padding: 0 2rem;
  }
  .style-test {
    font-size: 1.4rem;
  }
}

/* gallery page - changes image colums from 4 to 2 */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }

  .st-nazaire-books-fig {
    flex-direction: column;
  }

  .order {
    order: 0;
  }
}
@media only screen and (max-width: 769px) {
  /* navbar */
  #navlinks li {
    font-size: 2rem;
  }

  /* index page */
  .hero-header-text {
    top: 0%;
    width: 100%;
    font-size: 1.5rem;
  }
  .st-nazaire-main-content-header {
    font-size: 2rem;
  }
  .st-nazaire-main-content {
    margin: 3rem 3rem;
    padding: 3rem 2rem;
  }

  .tirpitz,
  .mapplan-detailed,
  .memorial-closeup,
  .memorial-fullsize {
    width: 60%;
  }
  .st-nazaire-main-content-text {
    font-size: 1.5rem;
  }
  /* footer */
  footer {
    flex-wrap: wrap;
  }
  .footer-section {
    width: 50%;
  }
  .footer-external {
    margin: 3rem 2rem;
  }
  /* gallery page */
  h1 {
    font-size: 4rem;
  }
  .vc-winners-card {
    max-width: 100%;
  }

  /* media page */
  .podcast {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 15rem 1rem;
  }

  .youtube-documentary-video iframe {
    width: 100vw;
  }
}

/* gallery page changes image colums from 2 to 1 */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

@media screen and (max-width: 589px) {
  /* signup confirm section */

  .signup-confirm-header {
    font-size: 4rem;
  }
  .signup-confirm-text {
    width: 91%;
    font-size: 2rem;
  }

  .signup-confirm-img {
    width: 91%;
  }
}

@media screen and (max-width: 426px) {
  /* mobile nav bar */

  .mobile-navbar {
    display: block;
  }

  .lg-screen-navbar {
    display: none;
  }
  /* home page */
  .st-nazaire-main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .tirpitz,
  .mapplan-detailed,
  .memorial-closeup,
  .memorial-fullsize {
    width: 95%;
  }
  /* footer */
  footer {
    flex-direction: column;
  }

  .footer-section {
    width: 100%;
  }

  .footer-external-img-town {
    width: 25%;
  }
  .footer-external-img-classified {
    max-width: 100%;
  }
  .footer-external-img-history {
    max-width: 100%;
    padding: 0rem 4rem;
  }

  /* home page */

  h1 {
    font-size: 3rem;
    padding: 1rem;
  }

  /* gallery page */
  .vc-winners-card {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* media page */

  .st-nazaire-main-content {
    margin: 3rem;
    padding: 0rem;
  }
  .st-nazaire-memorial {
    margin: 0;
    width: 100%;
  }

  .podcast-header {
    text-align: center;
  }
  .st-nazaire-books {
    margin: 0;
    width: 100%;
  }

  .st-nazaire-books-fig {
    padding: 0rem;
    margin: 3rem 0rem;
  }
  .st-nazaire-books-fig-img {
    width: 75%;
  }
  .st-nazaire-books-fig-review {
    margin: 0;
    padding-top: 1rem;
  }
  .style-test {
    font-size: 1.3rem;
  }
  form {
    width: 100%;
  }
}