@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body, html {
  background-color: #9deba9; 
  font-family: "Montserrat", sans-serif;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #666;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
  background-color: #111;
}


.navMenu {
  position:absolute;
  top: 8%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.navMenu a {
  color: #000000;
  text-decoration: none;
  font-size: 1.2em;
  text-transform: uppercase;
  font-weight: 500;
  user-select: none;
  padding: 7px;
  width: 80px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.navMenu a:hover {
  color: #fddb3a;
}

.below-header {
    font-size: 1em;
    background-color: white;
    top: 25%;
    position: absolute;
    height: 2180%;
    width: 80%;
    padding-left:7%;
    padding-right: 7%;
    padding-top: 2%;
    margin-left: 10%;
    margin-right: 10%;
    box-shadow:1px 1px 1px #919191,
        1px 2px 1px #919191,
        1px 3px 1px #919191,
        1px 4px 1px #919191,
        1px 5px 1px #919191,
        1px 6px 1px #919191,
        1px 7px 1px #919191,
        1px 8px 1px #919191,
        1px 9px 1px #919191,
        1px 10px 1px #919191,
    1px 18px 6px rgba(16,16,16,0.4),
    1px 22px 10px rgba(16,16,16,0.2),
    1px 25px 35px rgba(16,16,16,0.2),
    1px 30px 60px rgba(16,16,16,0.4);
    z-index:  -1;

}

.shorten-about-page {
  height: 500%;
}

.shorten {
  height: 200%;
}

.shortenBeastsPage2 {
  height: 450%;
}

.shortenBeastsPage3 {
  height: 2250%;
}

.waterBeastsPage{
  height: 530%;
}

.very-shorten {
  height: 100%;
}

.shortenOtherPage {
  height: 1400%;
}

.shortenBeastsPage {
  height: 620%;
}

.slightlyShortenBeastsPage {
  height: 300%;
}

.image {
  height: 300px;
  margin-left: 15%;
}

.heading {
    margin-top: 6%;
    margin-left: 10%;
    position: absolute;
    display: block;
    font-size: 1.8em;
    user-select: none;
    font-weight: bold;

}

.description {
  font-weight: 600;
}

input {
  border: none;
  color: white;
  padding-left: 5%;
}

.search-wrapper {
  position: absolute;
  display: flex;
  top: 20%;
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  padding-left: 2%;
  background-color: black;
  z-index: -1;
}

.searchTerm {
  width: 100%;
  border: 3px solid #00B4CC;
  border-right: none;
  padding: 5px;
  height: 20px;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: #9DBFAF;
}

.search {
    background-color:black;
    height: 36px;
}
.searchTerm:focus{
  color: #00B4CC;
}

/*Resize the wrap to see the search bar change!*/
.wrap{
  width: 100%;
  position: absolute;
  top: 50%;
  left: 150%;
  
  transform: translate(-50%, -50%);
}

.user-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 2rem;
  margin-top: 1rem;
  padding-left: 7%;
  padding-right: 7%;

}

.card-img {
  width: 150px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.card {

  padding: .5rem;

}

.card > .header {
  margin-bottom: .25rem;
  margin-top: 10%;
  text-align: center;
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: bold;
}

.card > .body {
  margin-top: 10%;
  font-size: 0.8rem;
  color: rgb(45, 45, 45);
  height: 200px;
  text-align: center;
  font-weight: 600;
}

.hide {
  display: none;
}

.dropdown {
  position: relative;
  display: inline-block;

}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 140px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  text-decoration: none;
  color: #000000;
  text-decoration: none;
  font-size: 0.8em;
  text-transform: uppercase;
  font-weight: bold;
  user-select: none;
  padding: 7px;
  padding-left: 12%;
  width: 80px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  background-color: #f1f1f1
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

@media screen and (max-width: 1050px) {
  body, html {
    background-color: #9deba9; 
  }

  .navMenu {
      top: 8%;
      padding-left: 5%;
      margin-top: 0%;
      margin-right: 0%;
      padding-top: 3%;
      left: 0%;
      width: 100%;
      -webkit-transform: translate(0%, 0%);
      transform: translate(0%, 0%);
      height: 15%;
      background-color: white;
      position: absolute;
    }

  .navMenu a {
      padding: 10px;
      font-size: 0.8em;
      margin-left: 0%;
      font-weight: bold;

  }

  .below-header {
    font-size: 0.9em;
    position: absolute;
    width: 100%;

    padding-left: 7%;
    padding-right: 7%;
    padding-top: 4%;
    margin-left: 0%;
    margin-right: 0%;
    background-color: #9deba9; 
    box-shadow: none;
  }

  .heading {
    margin-top: 0%;
    padding-top: 3%;
    margin-left: 0%;
    padding-left: 6.5%;
    height: 8%;
    width: 100%;
    position: absolute;
    font-size: 1.2em;
    font-weight: bold;
    background-color: white;
  }

  .image {
    height: 250px;
    margin-left: 0%;
  }

  .search-wrapper {
    padding-left: 6%;
    top: 20%;
    height: 5%;
    margin-left: 0%;
    margin-right: 0%;
    width:100%;
  }

}

@media screen and (max-width: 800px) {

  body, html {
    background-color: #9deba9; 
  }

  .navMenu {
      top: 8%;
      padding-left: 5%;
      margin-top: 0%;
      margin-right: 0%;
      padding-top: 3%;
      left: 0%;
      width: 100%;
      -webkit-transform: translate(0%, 0%);
      transform: translate(0%, 0%);
      height: 12%;
      background-color: white;
      position: absolute;
    }

  .navMenu a {
      padding: 10px;
      font-size: 0.8em;
      margin-left: 0%;
      font-weight: bold;

  }

  .below-header {
    font-size: 0.9em;
    position: absolute;
    width: 100%;
    padding-left: 7%;
    padding-right: 7%;
    padding-top: 4%;
    margin-left: 0%;
    margin-right: 0%;
    background-color: #9deba9; 
    box-shadow: none;
  }

  .heading {
    margin-top: 0%;
    padding-top: 6%;
    margin-left: 0%;
    padding-left: 6.5%;
    height: 8%;
    width: 100%;
    position: absolute;
    font-size: 1.2em;
    font-weight: bold;
    background-color: white;
  }

  .image {
    height: 250px;
    margin-left: 0%;
  }

  .search-wrapper {
    padding-left: 6%;
    top: 20%;
    height: 5%;
    margin-left: 0%;
    margin-right: 0%;
    width:100%;
  }
}

@media screen and (max-width: 400px) {

  body, html {

    background-color: #9deba9; 
  }

  .navMenu {
      top: 8%;
      padding-left: 5%;
      margin-top: 0%;
      margin-right: 0%;
      padding-top: 3%;
      left: 0%;
      width: 100%;
      height: 7%;
  }
  .navMenu a {
      padding: 5px;
      font-size: 0.6em;
      margin-left: 0%;
      font-weight: bold;
  }

  .image {
    height: 160px;
    margin-left: 5%;
  }
  .below-header {
    font-size: 0.9em;
    position: absolute;
    width: 100%;
    padding-left: 7%;
    padding-right: 7%;
    padding-top: 4%;
    margin-left: 0%;
    margin-right: 0%;
    background-color: #9deba9; 
    box-shadow: none;
  }
  .heading {
    margin-top: 0%;
    padding-top: 6%;
    margin-left: 0%;
    height: 8%;
    padding-left: 6.5%;
    position: absolute;
    font-size: 1.2em;
    font-weight: bold;
  }

  .search-wrapper {
    margin-left:0%;
    margin-left:0%;
    top: 15%;
    height: 15%;
    padding-left: 6.5%;
    width: 100%;
  }



  .card-img {
    width: 80px;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .card > .header {
    font-size: 0.6rem;
  }

  .user-cards {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  }
}