body {
  display: flex;
  min-height: 100vh;
}

.main-container {
  margin-top: 30px;
  display: grid;
  grid-template-columns: 3fr 1fr;
  column-gap: 20px;
  width: 100%;
  height: 800px;
  margin-left: 130px;
  margin-right: 130px;
  border-radius: 2px;
  background-color: whitesmoke;
}

.right-div {
  box-shadow: 15px 15px 15px darkgray;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  background-color: white;
}

.left-div {
  display: grid;
  grid-template-rows: 1.4fr 1.4fr;
  row-gap: 30px;
}

.top-div {
  display: grid;
  grid-template-columns: 2fr 1fr;
  column-gap: 30px;
}
.purple-container {
  display: block;
  background-color: blueviolet;
  color: white;
  box-shadow: 15px 15px 15px darkgray;
}

.grey-container {
  display: block;
  color: white;
  background-color: rgba(33, 32, 32, 0.625);
  box-shadow: 15px 15px 15px darkgray;
}

.bottom-div {
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: 30px;
}

.white-container {
  box-shadow: 15px 15px 15px darkgray;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  background-color: white;
}

.navy-container {
  box-shadow: 15px 15px 15px darkgray;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  background-color: rgb(31, 31, 57);
  color: white;
}

.profile-picture-name {
  display: flex;
  padding: 20px;
  margin-left: 0;
}

.profile-picture {
  display: inline-block;
  width: 50px;
  height:50px;
  margin-right: 0;
  margin-left: 20px;
  border-radius: 30px;
  border-style: solid;
  border-color: darkgray;
  vertical-align: top;
}

.info {
  margin-left: 0;
  margin-top: 0;
  vertical-align: top;
}

.user-name {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  margin-top: 0;
  margin-left: 0;
}

.description {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: medium;
  margin-top: 0;
  
}
.user-review, .description, .user-name, .status {
  margin-left: 30px;
  margin-right: 30px;
  vertical-align: top;
}

/* Responsive styles */
@media (max-width: 750px) {
  .main-container {
    grid-template-columns: 1fr; /* Switch to a single column */
    margin-left: 20px;
    margin-right: 20px;
    height: auto; /* Allow height to adjust dynamically */
  }

  .left-div, .right-div {
    margin-bottom: 20px; /* Add spacing between stacked sections */
  }

  .left-div {
    grid-template-rows: auto; /* Adjust rows to fit content */
    row-gap: 20px;
  }

  .top-div, .bottom-div {
    grid-template-columns: 1fr; /* Stack the columns */
    column-gap: 2px;
  }

  .profile-picture {
    width: 40px; /* Reduce size for smaller screens */
    height: 40px;
    margin-left: 10px;
  }

  .user-name, .description, .user-review, .status {
    margin-left: 10px;
    margin-right: 10px;
    font-size: small; /* Adjust font size for smaller screens */
  }

  .purple-container, .grey-container, .white-container, .navy-container {
    box-shadow: none; /* Remove box shadow for smaller screens */
  }
}

@media (max-width: 500px) {
  .main-container {
    margin-left: 10px;
    margin-right: 10px;
  }

  .profile-picture {
    width: 30px;
    height: 30px;
  }

  .user-name, .description, .user-review, .status {
    font-size: x-small; /* Further reduce font size for very small screens */
  }
}