nav,
footer {
  filter: opacity(50%);

}

body {
  background-image: url("./img/istockphoto-1446838823-2048x2048.jpg");
}

a {
  color: #9faaa6;
}

a:hover {
  color: white;
}

#contacts a:hover svg {
  fill: black !important;
}

.nav-link {
  font-size: large;
}

.grid-container2 {
  align-self: center;
  display: grid;
  justify-content: center;
  grid-template-columns: minmax(200px, 535px) minmax(200px, 535px);
  position: relative;
  gap: 20px;
}

.grid-container3 {
  align-self: center;
  display: grid;
  justify-content: center;
  grid-template-columns: minmax(290px, 350px) minmax(290px, 350px) minmax(
      290px,
      350px
    );
  position: relative;
  gap: 20px;
}

.accordion-container {
  align-self: center;
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "img name"
    "img description"
    "img button";
  position: relative;
  gap: 20px;
  padding: 10px;
}

.accordion-container > h3 {
  grid-area: name;
  text-align: center;
  color: #abd5dc;
  text-decoration: underline #79b2bc;
}

.accordion-container > img {
  grid-area: img;
}

.accordion-container > p {
  grid-area: description;
}

.accordion-container > a {
  grid-area: button;
}

.image {
  display: block;
  width: 100%;
  height: auto;
  transition: 0.5s ease;
  backface-visibility: hidden;
}

.hoverButton {
  transition: 0.5s ease;
  opacity: 0;
  margin: 0;
  position: absolute;
  /* top: 25%;
  left: 25%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); */
}

.container {
  background-color: #ffffff0f;
  place-items: center;
  align-content: center;
}

/* .container:hover .image {
  opacity: 0.3;
}

.container:hover .hoverButton {
  opacity: 1;
} */

.textBio {
  padding: 5%;
}

#bio-background {
  color: white;
  font-size: 1.5em;
  background-color: #04130cc6;
  padding: 5%;
  /* text-align: ; */
}

.modal-content {
  background-color: #1a2e25d9;
  color: white;
}

.section {
  background-color: #ffffff2b;
  grid-column: 1 / 3;
  color: #abd5dc;
  padding-left: 5%;
}

#scrollToTopBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 2;
  border: none;
  background-color: rgb(38, 41, 41);
  color: white;
  cursor: pointer;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 25px;
}

#scrollToTopBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

#contacts {
  padding-right: 75px;
}

.two-buttons {
  width: 40%;
}