/* ------------------- Variables-------------------- */
/* ------------------------------------------------- */

:root {
  --darkBackground: hsl(300, 5%, 8%);
  --darkBackgroundOpacity: hsla(300, 5%, 8%, 0.8);

  --themedBlue: hsl(179, 100%, 39%);
  
  --textLight: aliceblue;
  --textDark: hsl(239, 94%, 19%);

 
  --lightestBlue: hsl(190, 77%, 88%);
  --lightBlue: hsl(189, 75%, 75%);
  --regularBlue: hsl(190, 100%, 42%);
  --darkerBlue: hsl(201, 98%, 36%);
  --darkestBlue: hsl(239, 94%, 19%);
  
  --gradBlue:  linear-gradient(to right, hsl(190, 100%, 42%) ,  hsl(201, 98%, 36%) , hsl(239, 94%, 19%));
  
}

/* --------------------- Layout -------------------- */
/* ------------------------------------------------- */

body {
  margin: 0;
/*   height: 100vh; */
  /* color: var(--textLight); */
/*   background-image: url(https://cdn.glitch.global/8b9aa5e6-5016-40b7-b8db-dbc252d90e29/_d7a2ad9e-0483-4766-a26b-f8f8e1bd140b.jpg?v=1715711243725);
  background-repeat: no-repeat;
  background-size: cover; */
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-image: var(--gradBlue);
}

.websiteBody {
  display: grid;
  grid-template-rows: 2.5em auto auto 1em 46em;
  height: fit-content;
}

header {
  background-color: var(--darkBackground);
  text-align: center;
  z-index: 3;
}

main {
/*   background-color: var(--darkBackgroundOpacity); */
  background-image: url(https://cdn.glitch.global/8b9aa5e6-5016-40b7-b8db-dbc252d90e29/_d7a2ad9e-0483-4766-a26b-f8f8e1bd140b.jpg?v=1715711243725);
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--textDark);
  text-align: center;
}

.mainHeading {
  background-color: var(--darkBackgroundOpacity);
  height: 100%;
}


footer {
  background-color: var(--darkBackground);
/*   padding: 0.1em; */
/*   height: fit-content; */
}

.extended {
/*   height: 36em; */
  background: url(https://cdn.glitch.global/8b9aa5e6-5016-40b7-b8db-dbc252d90e29/_05eb803c-29fa-4fb5-ab39-9c426c35c553.jpg?v=1716212275214);
  margin: 0;
/*   background-repeat: no-repeat; */
  background-size: cover;
  border-bottom: 1em solid;
}

.backdrop {
  background-color: var(--darkBackgroundOpacity);
  height: 100%;
}

/* ------------------- Decoration ------------------ */
/* ------------------------------------------------- */

a {
  text-decoration: none;
  color: aliceblue;
  margin: 0 5px 0 5px;
}

.title {
  font-weight: bold;
  font-size: 115%;
  color: var(--regularBlue);
  float: left;
  margin-left: 5%;
  
  
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.stickyDiv {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

/* .linkPages {
  float: right;
  margin-right: 5%;
} */

/* .title,
.linkPages {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
} */

h1 {
  color: var(--textLight);
  margin: 0;
}

p {
  color: var(--textLight);
  font-style: oblique;
  line-height: 1.5;
}

.mainTitle {
/*   padding-top: 3em; */
}

.pageTag {
  margin-bottom: 15em;
}

/* .disclaimer {
    font-size: small;
    float: left;
    margin-left: 2.5%;
} */

.staffLoginButton {
  float: right;
}

.pswContainer {
  float: right;
  padding: 0.5em;
}


::backdrop {
  background-image: var(--gradBlue);
  opacity: 0.75;
}




/* --------------------- Cards --------------------- */
/* ------------------------------------------------- */

.content {
  display: grid;
  justify-content: center;
  grid-gap: 1%;
  /* grid-template-columns: repeat(4, 1fr); */
  grid-template-columns: 24% 24% 24% 24%;
/*   margin-bottom: 5%; */
  background: var(--lightestBlue);
  padding: 2.5rem;
  text-align: center;
  border-top: 1em solid;
  

  /* display: flex;
    flex-direction: row; */
}

.contentCard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /*     background: rgba(0, 199, 196, 0.479); */
  background: var(--regularBlue);
  padding: 1rem;
  border-radius: 1em;
/*   outline: solid var(--darkestBlue) 0.1em; */
/*   box-shadow: 2.5px 2.5px var(--darkBackground); */
  margin-bottom: 2rem;
}

.contentCardInner {
  height: fit-content;
  width: 100%;
  background-color: var(--darkerBlue);
  line-height: 1.5;
  margin: 0.5rem 0;
  color: var(--textLight);
  padding-top: 3%;
  padding-bottom: 3%;
  border-radius: 1.5em;
/*   outline: solid var(--darkestBlue) 0.1em; */
  cursor: pointer;
  
   position: relative;
  
}

.spacer {
  height: 18em;
}

.moreDetails:hover {
  background-color: var(--darkestBlue);  
}

.dropDownContent {
/*   height: fit-content; */
/*   width: 100%; */
  background-color: var(--darkerBlue);
  line-height: 1.5;
  color: var(--textLight);
  border-radius: 1.5em;
  cursor: pointer;
  
  .hiddenDropdown:focus-visible {
    outline: none;
}
  
  
  
  
/*    display: none; */
/*    position: absolute; */
/*    z-index: -1; */
}


/* ------------------------------- noted out */

/* .dropDownContent a {
  display: block;
  padding-top: 3%;
  padding-bottom: 3%;
  margin-top: 0.25em;
  color: var(--textLight);
  
}


.contentCardInner:hover .dropDownContent {
    display: block;
    background-color: var(--darkerBlue);
    z-index: 2;
    border-radius: 1.5em;
    width: inherit;
    top: 0.25em;
    outline: 0.25em solid black;
}

.hiddenDropdown {
    outline: solid var(--darkestBlue) 0.1em;
    border-radius: 1.5em;
}

.hiddenDropdown:hover {
  background-color: var(--darkestBlue);
  border-radius: 1.5em;
  
}
 */




/* ----------------- Contact Form ------------------ */
/* ------------------------------------------------- */

.contactCard {
  margin: auto;
  width: 50%;
  padding: 2em;
  margin-bottom: 2em;
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=number], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}


/* --------------------  Modal --------------------- */
/* ------------------------------------------------- */

.hidden {
  display: none;
  background-color: var(--darkBackgroundOpacity);
  border: 5px solid;
  height: 95vh;
  width: 95vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.closeButton {
  color: var(--textLight);
  height: 5em;
  width: 5em;
  float: right;
  cursor: pointer;
}












/* ---------------- Media Queries ------------------ */
/* ------------------------------------------------- */

@media (max-width: 1700px) {
  .content {
    display: flex;
    flex-direction: column;
    padding: 10%;
    gap: 3rem;
  }
}

/* @media (max-width: 1700px) {
  .linkPages {
    text-align: center;
    float: none;
    margin-top: 5%;
    background-color: black;
    width: 100%;
    padding: 1%;
  }
} */

/* @media (max-width: 1700px) {
  .header {
    background-color: hsla(180, 20%, 5%, 0.719);
  } 
} */

@media (max-width: 1700px) {
 .mainTitle {
  margin-top: 1em;
  }
}

@media (max-width: 1700px) {
  body {
    background-repeat: repeat;
    background-size: auto;
/*     aspect-ratio: 1/1; */
  }
}

@media (max-width: 1700px) {
  .mainHeading {
    padding: 0 1.5em 0 1.5em;
/*     background-color: var(--darkBackgroundOpacity);
    background-image: url(https://cdn.glitch.global/8b9aa5e6-5016-40b7-b8db-dbc252d90e29/_d7a2ad9e-0483-4766-a26b-f8f8e1bd140b.jpg?v=1715711243725);
    background-repeat: no-repeat;
    background-size: cover; */
  }
  
  .pswContainer {
    display: none;
  }
}


/* -------------------------------------------------------------- */

/* 
@media (max-width: 1700px) {
  .contentCardInner:active .dropDownContent {
    display: block;
    background-color: var(--darkerBlue);
    z-index: 2;
    border-radius: 1.5em;
    width: inherit;
    top: 0.25em;
    outline: 0.25em solid black;
  }

.hiddenDropdown:active {
  background-color: var(--darkestBlue);
  border-radius: 1.5em;
  }
  
  .contentCardInner:hover .dropDownContent {
    display: none;
 }
  
} */