/* styles.css */

.container {
  display: flex;
}

.box {
  flex: 1;
  height: 98vh; /* Set the height you desire */
  position:relative;
}

.chart-container {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
}

/* Style the bar charts */
.bar-chart {
  height: 0%;
  background-color: #000;
  opacity: 0.5;
  position: absolute;
  bottom: 0;
  transition: height 0.3s;
  width: 100%;
  border-top: 5px solid white;
}

.bar-score .score{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000;
  font-family: Tahoma;
  font-size: 70px;
  font-weight: bold;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 2px;
}

#box1 {
  background-color: #3991c0;
  background-position: center;
  background-image: url('image/DIV-SHARK.jpeg'); /* Replace with the path to the first wallpaper image */
  background-size: cover;
}

#box2 {
  background-color: #9b6f63;
  background-position: center;
  background-image: url('image/DIV-OWL.jpeg'); /* Replace with the path to the second wallpaper image */
  background-size: cover;
}

#box3 {
  background-color: #ffe5a7;
  background-position: center;
  background-image: url('image/DIV-DUCK.jpeg'); /* Replace with the path to the third wallpaper image */
  background-size: cover;
}

#box4 {
  background-color: #b45755;
  background-position: center;
  background-image: url('image/DIV-HAWK.jpeg'); /* Replace with the path to the fourth wallpaper image */
  background-size: cover;
}