/*Main page styles*/
body {
    background-color: rgb(16, 23, 41);
    touch-action: pan-y;
    align-items: center;
}
.banner {
    background-color: rgb(16,23,41);
    height: fit-content;
    width:100%;
}
.logo {
  height: fit-content;
  width: 100%;
  cursor: pointer;
}
h1 {
    text-align: center;
    color: silver;
}
p {
    text-align: center;
    color: silver;
}
.quote {
    text-align:center;
    height: fit-content;
    color: silver;
    font-style:bold;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
address {
    text-align: center;
    color: silver;
}
img {
    display: block;
    margin:auto;
    width: 70%;
    height: 70%;
}
.flex-container {
  display: flex;
  justify-content:center;
  align-items: center;

}
.flex-box {
  width: 60%;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 5px solid rgb(233, 169, 63);
  font-style: italic;
  font-size: xx-large;
  font-family:dancing-script;
  text-align: center;
  color: rgb(233, 169, 63);
  
}
a {
  display: contents;
}

/*Form Page styles*/
iframe {
    display: block;
    margin: auto;
    padding: 10px;
    border: 3px solid rgb(233, 169, 63);
    border-radius: 10%;
}

/*Bio Page styles*/
.title {
  font-style: italic;
  font-family: dancing-script;
  text-align: center;
  color: rgb(233, 169, 63);
}
.bio {
  font-style: italic;
  font-family: dancing-script;
  text-align: center;
  color: silver;
  margin-left: 20%;
  margin-right: 20%;
}
/*Gallery Page styles*/
    .gallery-box {
      background: silver;
      padding: 30px;
      border-radius: 10px;
      border: 7px solid rgb(233, 169, 63);
      box-shadow: 0 0 10px rgba(0,0,0,0.2);
      width: 90%;
      text-align: center;
      margin: auto;
      position:relative;
      overflow: hidden;
    }

    .gallery-button-right {
      height: 100%;
      width: 30%;
      position: absolute;
      right: 10px;
      border-color: transparent;
      background-color: transparent;
      cursor: pointer;
    }

    .gallery-button-left {
      height: 100%;
      width: 30%;
      position: absolute;
      left: 10px;
      border-color: transparent;
      background-color: transparent;
      cursor: pointer;
    }

    .arrow {
      border: solid white;
      position: absolute;
      border-width: 0 3px 3px 0;
      display: inline-block;
      padding: 10px;
      cursor: pointer;
      background-color: transparent;
    }

    .arrow.right {
      right: 10px;
      top: 50%;
      transform: translateY(-50%) rotate(-45deg);
    }

    .arrow.left {
      left: 10px;
      top: 50%;
      transform: translateY(-50%) rotate(135deg);
    }

    .image-group {
      display:grid;
      grid-template-columns: 50% 50%;
      cursor: pointer;
    }

    .image-group.active {
      display: block;
    }

    .image-group img {
      width: 40%;
      max-height: 100px;
      object-fit: contain;
      margin: 5px;
      border: 2px;
      border-color:rgb(138, 98, 35);
      cursor: pointer;
    }

    .group-label {
      margin-bottom: 10px;
      font-weight: bold;
      font-style: italic;
      font-family: dancing-script;
      color:rgb(182, 131, 49);
      font-size: larger;
    }

    /* Gallery V2 Styles*/
    .tabGroup {
      display: none
    }
    .tabGroup.active {
      display: grid;
      grid-template-columns: 50% 50%;
    }

    .options-container {
      display:inline-flex;
      justify-content:center;
      align-items: center;
    }

    .options-box {
    width: 60%;
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-style: italic;
    font-size: xx-large;
    font-family:dancing-script;
    text-align: center;
    color: rgb(163, 117, 43);
    background-color: silver;
    cursor: pointer;
    }

    .options-box.active {
    width: 60%;
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    border: 5px solid rgb(233, 169, 63);
    font-style: italic;
    font-size: xx-large;
    font-family:dancing-script;
    text-align: center;
    color: rgb(163, 117, 43);
    background-color: silver;
    cursor: pointer;
    }   

    .close {
      position: absolute;
      top: 15px;
      right: 15px;
      color: black;
      font-size: 40px;
      font-weight: bold;
      cursor: pointer;
    }

    .close:hover {
      color: #2c2c2c;
    }

    .modal {
      display: none;
      position: fixed;
      z-index: 1000;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: silver;
      border-radius: 10px;
      border: 7px solid rgb(233, 169, 63);
      min-width: 40%;
      max-width: 90%;
      max-height: 90vh;
      height: auto;
      width: auto;
      text-align: center;
      align-items: center;
      margin: auto;
    }

    .modal-content {
      margin: auto;
      padding-top: 5%;
      padding-bottom: 5%;
      width: 90%;
      max-height: 80vh;
      height: auto;
    }