.container{
min-height: 100vh;  
max-width: 100%;
gap:10px;
}

.mainbox {
  
  background-color: hsl(270, 48%, 83%);
  padding: 5%;
  height: fit-content;
  border-radius: 20px;
  box-shadow: 10px 10px 9px #cdecd0;
  border-right: solid #fdfffe;
  border-bottom: solid #fdfffe;
  background-image: url(/streetscrapbook/img/asfalt-dark.png);
  
}

.imgcontainer {
  flex: 1;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  position: relative;
}

.title {
  display: flex;
  justify-content: center;
 

 
}

.title img{
  max-width: 100%;
  padding-bottom: 20px;
}

.imgcontainer img {
  max-width: 100%;
  height: auto;
  border-radius: 20px;
}

.imgcontainer img:hover {
  transform: scale(0.95);
}



@media (max-width: 768px) {
  nav {
    justify-content: center; /* center nav container itself */
  }

  

  .imgcontainer {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  position: relative;
}


  }
    
     @media (max-width: 600px) {
    .container {
    flex-direction: column;
    gap:0
    }  

header img {
transform: scale(1.4);
margin-bottom: 13px;
}
     }