@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap");

#backgroundImg {
  z-index: -5;
  width: 100%;
  object-fit: cover;
  position: fixed;
  /* filter: brightness(35%) saturate(0%); */
}

main {
  padding-bottom: 0rem;
}

h1 {
  margin-bottom: 1rem;
}

header {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background: rgb(28, 28, 28);

  /* background:rgba(28, 28, 28, 0.155); */
  display: flex;
  align-items: center;
  flex-flow: column;
  width: 100%;
  height: 95vh;
  /* background-image: url("../Media/thing.png");
    background-size: contain;
    background-position: center; Centers the image */
}

#banner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; /* adjust if needed */
  height: auto;
  z-index: 0;
  outline: none;
  /*opacity: 0.3; /* optional: makes it more like a background */
}

header > *:not(#banner) {
  position: relative;
  z-index: 1;
}

header .slideshow {
  margin-top: 1rem;
  width: 50%;
  height: 6vh;
  top: 25%;
  transform: translate(00%, -25%);
}

header #MainSlideShow {
  outline: white solid 3px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.824);
}

#arow-down {
  margin-top: 1rem;

  top: 25%;
  width: 40px;
  height: auto;
}

header h1 {
  z-index: 2;
  font-size: 60px;
  text-align: center;
  font-family: "Jost", sans-serif;
  width: 100%;
  color: rgb(255, 255, 255);
  opacity: 100%;
  top: 5%;
}

.section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas: "content image";
  grid-gap: 2rem;
}

/* For larger monitors */
@media (min-width: 1600px) {
  .section {
    grid-gap: 4rem;
  }
}

/* Mobile view*/
@media (max-width: 700px) {
  header h1 {
    font-size: 40px;
  }
  #banner {
    height: 60%;
  }

  .section {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "content"
      "image";
  }

  #headerText h1 {
    width: fit-content;
  }
}

.section .content {
  grid-area: content;
}

.section h1 {
  margin-bottom: 2rem;
}

.section img {
  grid-area: image;
  text-align: right;
  justify-content: right;
  width: 100%;
  /*margin-top: 25%;
    margin-bottom:25%; */
}

#aboutSection {
  /* display: flex;
    flex-flow: row wrap; */
  align-items: center;
}

#spaceSection {
  background-image: radial-gradient(
    rgba(0, 127, 141, 0.605),
    rgba(0, 127, 141, 0.797),
    rgb(0, 127, 141)
  );
  display: grid;
  grid-template-areas:
    "header"
    "content"
    "image";
  justify-items: center;
  padding: 1rem;
}

#spaceSection h1 {
  grid-area: header;
  text-align: center; /* Centers the heading text */
  margin-bottom: 1rem; /* Provides spacing below the heading */
}

#spaceSection .slideshow {
  grid-area: image;
  text-align: center;
  width: 100%; /* Ensures it fits within the container */
  max-width: 80vh; /* Maintains a reasonable maximum size */
  outline: rgb(255, 255, 255) solid 3px;
}

.carousel-item {
  width: 100%;
  height: auto;
  object-fit: cover;
  overflow: hidden;
  transform-origin: center;
}

.carousel-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  overflow: hidden;
  transform-origin: center;
}

.custom-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 3rem;
  height: 3rem;
}

.carousel-control-prev.custom-arrow {
  left: -3rem; /* Adjust for better placement on smaller screens */
  color: white;
}

.carousel-control-next.custom-arrow {
  right: -3rem; /* Adjust for better placement on smaller screens */
  color: white;
}

.custom-arrow .carousel-control-prev-icon,
.custom-arrow .carousel-control-next-icon {
  filter: none; /* Keeps the default white color */
  opacity: 1; /* Maintains Bootstrap's semi-transparent effect */
}

.custom-arrow:hover .carousel-control-prev-icon,
.custom-arrow:hover .carousel-control-next-icon {
  filter: none; /* Ensures no unwanted color changes */
  opacity: 1; /* Makes the icon fully visible */
  color: cyan;
}

#caption-description {
  text-align: left;
  padding: 0.5rem; /* Adds spacing for readability */
}

#spaceSection .content {
  grid-area: content;
  text-align: left;
  margin-bottom: 1rem;
  width: 100%; /* Adjust width to fit smaller screens */
  max-width: 70vh; /* Limits the width on larger screens */
  margin-top: 0rem;
}

#spaceSection h2 {
  text-align: center;
  margin-bottom: 1rem;
}

/* Mobile View Adjustments */
@media (max-width: 700px) {
  #spaceSection {
    grid-template-areas:
      "header"
      "content" /* Stacks the image above the content */
      "image";
    padding: 1rem;
  }

  #spaceSection .slideshow {
    width: 100%;
  }

  #spaceSection .content {
    text-align: center;
  }

  .carousel-control-prev.custom-arrow {
    left: 0rem; /* Adjust for better placement on smaller screens */
  }

  .carousel-control-next.custom-arrow {
    right: 0rem; /* Adjust for better placement on smaller screens */
  }
}

#eventTypes {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  width: 100%;
  justify-content: center;
  margin-bottom: 2rem;
}

#eventTypes .element {
  margin: 2rem;
  outline: rgb(255, 255, 255) solid 3px;
}

#eventTypes .imageSlot {
  width: 100%;
  object-fit: cover;
  overflow: hidden;
  display: flex;
  justify-content: center;

  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "."
    "."
    "text";
  align-items: end;
  position: relative;
}

#eventTypes .imageSlot .text {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 2;
  text-align: center;
  margin: 0;
  grid-area: text;
  background-color: rgba(0, 0, 0, 0.479);
  width: 100%;
  padding: 0.5rem;
  color: white;
}

#eventTypes .element:hover {
  outline: rgb(0, 255, 255) solid 4px;
}

#eventTypes .element:hover .text h3 {
  transform: translateY(-5px);
}

#eventTypes img {
  width: 330px;
  height: 255px;
  object-fit: cover;
  transition: transform 0.3s ease;
  transform-origin: center;
}

#eventTypes .element:hover img {
  transform: scale(1.2);
}

/* #calendar {
  width: 100%;
  border: none;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

#calendar iframe {
  width: 75%;
  max-width: 1000px;
  height: 400px;
  margin-top: 2rem;
  margin-bottom: 2rem;
} */

/* Mobile View Adjustments */
@media (max-width: 700px) {
  #eventTypes .element {
    margin: 0rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  #calendar iframe {
    width: 100%;
    height: 400px;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
}

.eboardSection {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  padding-bottom: 1rem;
  /* padding-left: 4rem; */
  /* padding-right: 4rem; */
}

.eboardSection .eboardSlot {
  margin: 2em;
  width: 200px;
  height: 200px;
}

.eboardSection .text p {
  width: 100%;
  height: 100%;
  text-align: center;
}

.eboardSection .text {
  display: none;
  width: 200px;
  height: 200px;
  padding-top: 1em;
}

.eboardSection .eboardSlot img {
  display: block;
  filter: drop-shadow(10px 10px 1px #00000089);
  z-index: 1;
  width: 100%;
  height: 100%;
  outline: cyan solid 5px;
}

.eboardSection .eboardSlot:hover img {
  filter: brightness(50%) drop-shadow(10px 10px 1px #00000089);
  transform: translateY(-5px);
}

.eboardSection .eboardSlot:hover .text {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "position"
    "."
    "person";
  z-index: 2;
  position: absolute;
}

.eboardSlot #postion {
  grid-area: position;
}

.eboardSlot #person {
  grid-area: person;
}

#contact {
  background: rgb(28, 28, 28);
  /* background:#00abb1; */
  padding: 2rem;
  padding-bottom: 0rem;
  margin-bottom: 0rem;
  text-align: center;
}

#contact hr {
  margin: 0;
  margin-top: 2rem;
}
#socials div p {
  margin: 10px;
}

#socials {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
}

#socials div {
  display: flex;
  flex-flow: column;
  justify-content: center;
}

#socials a {
  color: white;
}
#socials #insta a:hover {
  color: cyan;
}
#socials #discord a:hover {
  color: rgb(255, 0, 174);
}
#socials #email a:hover {
  color: rgb(255, 238, 0);
}
#socials i:hover {
  transform: translateY(-2px);
}

#contact h1,
#contact p {
  margin: 1rem;
  text-align: center;
}

footer {
  background: rgb(28, 28, 28);
  margin: 0;
  padding: 2rem;
  padding-top: 1rem;
}

#homeButton:visited {
  color: #ff0088;
}

#homeButton:hover {
  color: rgb(255, 255, 255);
}

.carousel-control-next,
.carousel-control-prev:hover {
  color: #00abb1;
}

#siteNav .dropdown .dropdown-content a.active h3 {
  /* color: cyan; */
}

#siteNav .dropdown .dropdown-content a h3:hover {
  color: rgb(255, 255, 255);
}

#siteNav .dropdown .dropdown-content a h3:active {
  /* color: cyan; */
  background-color: rgba(0, 0, 0, 0);
}

#siteNav #homeButton h3 {
  color: rgb(0, 255, 255);
  transition: background-color 0.2s linear;
}

#siteNav #homeButton:hover h3 {
  color: white;
}

#siteNav .dropdown:hover #homeButton h3 {
  color: white;
}