body {
    margin: 0; /* remove default margin */
    padding: 0; /* remove default padding */
    background-color: #1f1f2b; /* Change the background color */
}

.box-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 5%; /* add padding to the left and right of the container */
}

.box {
    width: 14%; /* adjust the width of the boxes */
    height: 14%; /* make the height the same as the width */
    aspect-ratio: 1; /* maintain a 1:1 aspect ratio */
    background-color: #1f1f2b;
    border-radius: 20px; /* rounded edges */
    margin: 2% 2% 2% 2%; /* add space between the boxes */
    position: relative; /* position the pseudo-element relative to the box */
    transition: transform 0.2s; /* add transition effect */
    margin-top: 9%; /* add distance to the top of the boxes */
}

.box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1f1f2b;
    border-radius: 20px; /* rounded edges */
    transform: scale(1.2); /* grow the pseudo-element on hover */
    transition: transform 0.4s;
    z-index: -1; /* place the pseudo-element behind the box */
}

.box:hover::before {
    transform: scale(1.2); /* grow the pseudo-element more on hover */
}

.box:hover {
    transform: scale(1.1); /* grow the box on hover */
}

/* Specify the dimensions of the scrollbar */
::-webkit-scrollbar {
    width: 10px; /* for vertical scrollbar */
    height: 10px; /* for horizontal scrollbar */
  }
  
  /* Style the scrollbar track (the area outside the thumb) */
  ::-webkit-scrollbar-track {
    background-color: #1f1f2b;
    border-radius: 10px;
  }
  
  /* Style the scrollbar thumb (the draggable part) */
  ::-webkit-scrollbar-thumb {
    background-color: pink;
    border-radius: 10px;
    transition: background-color 0.2s;
  }
  
  /* Change the scrollbar thumb color on hover */
  ::-webkit-scrollbar-thumb:hover {
    background-color: #ffcccc;
  }

  #rectangle {
    top: 0;
    left: 0;
    width: 100%;
    height: 7%;
    position: absolute;
    border-radius: 50px; /* rounded edges */
    border: none;
    background-color:#5d93bd;
}

@media (max-width: 600px) {
    #rectangle {
        border-radius: 15px; /* rounded edges */
    }
}

@media (min-width: 1200px) {
    #rectangle {
        border-radius: 45px; /* rounded edges */
    }
}

#Home {
    top: .7%;
    left: .7%;
    width: 3.5%;
    height: 5.5%;
    position: absolute;
    border-radius: 50px; /* rounded edges */
    border: none;
    background-color:#1f1f2b;
}

#Home img {
    width: 80%;
    height: 80%;
    object-fit: cover;
    margin: auto;
  }

  #Home {
    transition: transform 0.2s; /* add transition effect */
  }
  
  #Home:hover {
    transform: scale(1.1); /* scale up the button on hover */
  }
  
  #Home img {
    transition: transform 0.2s; /* add transition effect */
  }
  
  #Home:hover img {
    transform: scale(1.1); /* scale up the image on hover */
  }

  #Home:hover {
    background-color:#34344d;
}

.box img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  margin: auto;
  border-radius: 20px;
}