@media only screen and (max-width: 768px) {
  .main2 {
    max-width: 100%;
    flex-direction: column; /* Stack items vertically for smaller screens */
    align-items: center; /* Center content in the column */
  }
  .main {
    max-width: 100%;
    flex-direction: column; /* Stack items vertically for smaller screens */
    align-items: center; /* Center content in the column */
  }
  .box {
    border-width: 13rem;
    border-radius: 0.5rem;
    border-color: rgb(0, 0, 0);
  }

  .headers2 {
    border-radius: 0.5rem;
    flex-direction: column; /* Stack headers vertically for smaller screens */
    max-width: 50%;
  }

  .h1 {
    font-size: 1.5rem; /* Adjust the font size for h1 on smaller screens */
  }

  .h5,
  li {
    font-size: 0.3rem; /* Adjust the font size for h5 and li on smaller screens */
  }

  .avatar2 {
    max-width: 20%;
    width: 2.5rem; /* Adjust avatar size for smaller screens */
  }
}

@media only screen and (min-width: 2000px) {
  .main2 {
    /* Adjust styles for TVs */
    max-width: 100%;
    min-width: 150vh;
  }
  .main {
    max-width: 100%;
    flex-direction: column; /* Stack items vertically for smaller screens */
    align-items: center; /* Center content in the column */
  }

  .avatar2 {
    max-width: 20%;
    width: 8rem; /* Adjust avatar size for TVs */
  }
  .box {
    border-width: 13rem;
    border-radius: 0.5rem;
    border-color: rgb(0, 0, 0);
  }
}

@media only screen and (min-width: 769px) and (max-width: 1999px) {
  .main2 {
    /* Adjust styles for tablets */
    max-width: 100%;
    min-width: 80vh;
  }
  .main {
    max-width: 100%;
    flex-direction: row; /* Stack items vertically for smaller screens */
  }

  .avatar2 {
    max-width: 20%;
    width: 4rem; /* Adjust avatar size for tablets */
  }
  .box {
    border-width: 13rem;
    border-radius: 0.5rem;
    border-color: rgb(0, 0, 0);
  }
}


.main {
  min-height: 100vh;
  max-width: 100%;
  background-image: url('../css/images/clovers.png');
  background-size: cover;
  width: auto;
  display: flex;
  align-items: left;
  justify-content: left;
}

.main2 {
  max-width: 100%;
  min-height: 100vh;
  background-image: url('../css/images/italia.png');
  background-size: cover;
  width: auto;
  display: flex;
  flex-direction: row;
  align-items: top;
  justify-content: center;
}

.box {
  border-width: 13rem;
  border-radius: 0.5rem;
  border-color: rgb(0, 0, 0);
}

.tree {
  max-width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 300px;
}

.headers {
  max-width: 100%;
  min-width: 60vh;
  display: flex;
  flex-direction: row;
  border-radius: 0.5rem;
  background: linear-gradient(to right top, #12b320, #ffffff, #e56814);
}

.headers2 {
  max-width: 100%;
  min-width: 60vh;
  display: flex;
  flex-direction: row;
  border-radius: 0.5rem;
  background: linear-gradient(to right top, #dc0a0a, #ffffff, #5ee74f);
  
}

.avatar {
  vertical-align: middle;
  max-width: 100%;
  width: 7rem;
  height: 100%;
  border-radius: 50%;
}

.images {
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

.avatar2 {
  max-width: 100%;
  vertical-align: middle;
  width: 15rem;
  height: auto;
  border-radius: 50%;
}

.h1 {
  color: rgb(255, 255, 255);
  font-size: 7rem;
  font-weight: bolder;
}

.h5 {
  font-size: 0.7rem;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  color: rgb(0, 0, 0);
  border: 5px solid rgb(43, 43, 43);
  background-color: white;
}

li {
  font-size: 1rem;
  max-width: 100%;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  color: rgb(0, 0, 0);
  border: 5px solid rgb(70, 70, 70);
  background-color: white;
}

ul,
#myUL {
  list-style-type: none;
}

/* Remove margins and padding from the parent ul */
#myUL {
  margin: 0;
  padding: 0;
}

/* Style the caret/arrow */
.caret {
  max-width: 100%;
  cursor: pointer;
  user-select: none;
  /* Prevent text selection */
}

/* Create the caret/arrow with a unicode, and style it */
.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
  transform: rotate(90deg);
}

/* Hide the nested list */
.nested {
  display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
  display: block;
}