/* FOOTER */

footer {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
  flex-wrap: wrap-reverse;
  gap: 1rem;

	position: fixed;

	bottom: 0;

	width: 100vw;

  padding: 1rem 2rem;
  
	background-color: rgb(50, 50, 50, 1);
	border-top: 2px solid black;
	color: aliceblue;
	box-shadow: 1px -3px 7px 2px rgba(0, 0, 0, 0.5);
}

footer h4 {
  margin: 0;
}

footer .info {
  display: flex;
  align-items: center;
  align-items: center;
  gap: 0.4rem;
}
footer .info .box {
  width: 1.6rem;
  height: 1.6rem;
  border: #000 solid 1px;
  margin-right: 0.6rem;
  border-radius: 0.2rem;
}
footer .box.darkred {
  background-color: #880e4f;
}
footer .box.red {
  background-color: #e53935;
}
footer .box.orange {
  background-color: #fb8c00;
}
footer .box.yellow {
  background-color: #ffeb3b;
}
footer .box.violet_extreme_hitze {
  background-color: #9e46f8;
}
footer .box.violet_hitze {
  background-color: #c9f;
}
footer .box.violet_uv {
  background-color: #fe68fe;
}
footer .box.green {
  background-color: #c5e566;
}
footer .box.pink {
  background-color: #ff8080;
}
footer .box {
  position: relative;
}

.box[title]:hover::after {
  content: attr(title);
  position: absolute;
  top: -270%;
  left: 0;
  padding: 0.6rem;
  width: 8.75rem;
  background-color: rgb(50, 50, 50, 1);
  border: 2px solid black;
  text-align: center;
  box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.5);
}




@media screen and (width <= 400px) {
  footer {
    flex-direction: column;
    justify-content: center;
    padding: 0.5rem 1rem;
  }
  
  footer h4 {
    font-size: 10px;
  }
}