.header {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 50px;
  font-size: 35px;
  color: #1c583a;
  padding: 15px;
  text-shadow: 1px 2px 8px rgba(44, 160, 92, 0.3);
}

.header h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
  color: #2ca05c;
}

.side-navbar {
  position: sticky;
  top: 100px;
  width: fit-content;
  height: fit-content;
  background-color: mintcream;
  border: 1px solid #8eb69b;
  border-left: 10px solid #8eb69b;
  border-radius: 18px 18px 18px 18px;
  float: left;
  margin-left: 50px;
  padding: 20px;
}

.side-navbar li {
  list-style-type: none;
  margin-top: 10px;
  margin-bottom: 10px;
  color: rgb(118, 125, 119);
  transition: 0.3s ease-in-out;
  border-radius: 10px;
  padding: 8px;
}

.side-navbar li:hover {
  color: #2ca05c;
  /* font-size: 18px; */
  transform: translateX(12px);

  background-color: #e7e8e77b;
}

.side-navbar h2 {
  margin-top: 20px;
  font-size: 20px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: #1c583a;
}

.side-navbar hr {
  margin-bottom: 15px;
}

.tile-card {
  color: #777b79;
  width: fit-content;
  margin-left: 420px;
  margin-right: 30px;
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid rgb(224, 228, 226);
  border-radius: 20px;
  background-color: mintcream;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  transition: 0.3s ease-in-out;
}

.tile-card#what-is-sdg-15:hover {
  box-shadow: 0px 0px 15px rgb(83, 194, 103, 0.6);
  transform: scale(1.01);
}

.tile-card#importance-terrestrial:hover {
  box-shadow: 0px 0px 15px rgb(20, 140, 74, 0.6);
  transform: scale(1.01);
}

.tile-card#biodiversity-crisis:hover {
  box-shadow: 0px 0px 15px rgb(208, 20, 20, 0.6);
  transform: scale(1.01);
}

.tile-card#interconnections-climate:hover {
  box-shadow: 0px 0px 15px rgb(44, 97, 203, 0.6);
  transform: scale(1.01);
}

.tile-card#human-dependence:hover {
  box-shadow: 0px 0px 15px rgb(86, 165, 230, 0.6);
  transform: scale(1.01);
}

.tile-card#economic-implications:hover {
  box-shadow: 0px 0px 15px rgb(24, 75, 117, 0.6);
  transform: scale(1.01);
}

.tile-card#urgency-time-critical:hover {
  box-shadow: 0px 0px 15px rgba(205, 127, 39, 0.6);
  transform: scale(1.01);
}

.tile-card#global-cooperation:hover {
  box-shadow: 0px 0px 15px rgba(64, 96, 128, 0.7);
  transform: scale(1.01);
}

.tile-card#transformative-action:hover {
  box-shadow: 0px 0px 15px rgb(83, 194, 103, 0.6);
  transform: scale(1.01);
}

.tile-card h2 {
  color: #1c583a;
}

.image-container {
  display: flex;
  margin: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 950px;
  height: 300px;
  border-radius: 20px;
  align-items: center;
  justify-content: space-evenly;
}

#image-container-1 {
  background-color: #48bb7814;
}

#image-container-2 {
  background-color: #2f855a13;
}

#image-container-3 {
  background-color: #c5303011;
}

#image-container-4 {
  background-color: #3182ce15;
}

#image-container-5 {
  background-color: #63b3ed10;
}

#image-container-6 {
  background-color: #2c538216;
}

#image-container-7 {
  background-color: #dd6c2012;
}

#image-container-8 {
  background-color: #4a556811;
}

#image-container-9 {
  background-color: #48bb7817;
}

.further-reading {
  width: 1085px;
  color: #2c5282;
  margin-left: 420px;
  margin-bottom: 30px;
  padding: 25px;
  border: 1px solid rgb(224, 228, 226);
  border-radius: 20px;
  background-color: mintcream;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  padding-left: 35px;
}

.further-reading h2 {
  text-align: center;
  margin-bottom: 10px;
}

.further-reading li:hover {
  text-decoration: underline;
}

.images {
  object-fit: fill;
  width: 400px;
  height: 280px;
  display: block;
  border-radius: 20px;
  transition: 0.3s ease;
}

.images:hover {
  transform: scale(1.03);
}

#goals,
#action {
  width: 900px;
  height: 280px;
}

.topButton {
  position: fixed;
  right: 15px;
  bottom: 100px;
  padding: 5px;
  border-radius: 17px;
  font-size: 25px;
  font-weight: bold;
  color: #8eb69b;
  border: 2px solid #8eb69b;
  text-align: center;
  z-index: 1;
}

.topButton:hover {
  background-color: rgba(116, 214, 116, 0.148);
  color: #1c583ac5;
  border-color: #1c583a7c;
}