html {
  overflow-x: hidden; 
}

.card{
  width: 100%;       
}

.card img {
    width: 100%;
    height: 26.875rem;
    object-fit: cover
}

@media (max-width: 70rem){
  .card img {
    height: auto;}
}

.svg-container {
    display: flex;
    justify-content: center;
    align-items:center;
    padding-top: 1.8rem;
    }
    
svg {
    border: 0.1rem solid #333;
    width: 80%; 
    height: auto;
    
  }
.room {
  stroke: white;
  stroke-width: 0.1rem;
  cursor: pointer;
  }

.corridor {
  stroke: #333;
  stroke-width: 0.1rem;
  }

.door {
  stroke: white;
  stroke-width: 0.1rem;
}

.title-container {
  display: block; 
  text-align: center;
  padding-top:2.5rem;
  padding-bottom: 5rem
}

#map {
  padding-bottom: 5rem
}

.button {
  border: none;
  padding: 1em 4em;
  text-align: center;
  font-size: 1.25em;
  opacity: 0.6;
  transition: 0.3s;
  display: block;
  text-decoration: none;
  cursor: pointer;
  margin: 10px;
}

.button:hover {opacity: 1}

.vboard-print {
  width: 100%;
  max-width: 35rem;
 
}
.vboard-pop {
  width: 100%;
  max-width: 35rem;
 
}