body{
  padding-top: 2%; 
  line-height: 1.4;
}

a{
  color: dodgerblue;
}

.home-content {
  display: flex; 
  flex-direction: column; 
  gap: 150px; 
  align-items: 
  center; justify-content: 
  center; width: 100%; 
  padding-top: 2%;
  position: relative;
}
  
.room-div{
  width:70vw; 
  display: flex; 
  position: relative;
}

.panel-container{
  display: flex; 
  width: 80%; 
  justify-content: center; 
  gap: 20px;
}

.left-panels{
  display: flex; 
  flex: 1; 
  height: 700px; 
  position: sticky; 
  top: 20px; 
  flex-direction: column; 
  align-items: center; 
  gap: 20px;
}

.left-panel{
  display: flex; 
  flex-direction: column; 
  border: 5px solid dodgerblue; 
  width: 100%; 
  height: 150px; 
  background-color: dodgerblue; 
  color:white; 
}

.left-panel-content{
  flex: 1; 
  height: 120px; 
  background-color: aliceblue; 
  padding: 5px; 
  color: dodgerblue;  
  font-size: small;

}

.right-panels{
  display:flex; 
  flex-direction: column; 
  gap: 4px; 
  padding: 4px; 
  flex: 2.5; 
  height: 2000px; 
  background-color: lightblue;
}

.right-panel{
  background-color: white; height: 400px; padding: 5px; color: rgb(33, 12, 23);
}

@media (max-width: 750px){
  .room-div{
    width: 90vw;
  }
}

@media (min-width: 1000px){
  .room-div{
    width: 60vw;
  }
}