@media(max-width: 600px) {
    .info {
      width: 90% !important;
    }
}
@media(max-width: 850px){
    #map {
        width: 100% !important;
    }
}
@media(max-width: 500px) {
    .why-we th, tr{
    padding: 6px !important;
    padding-right: 1rem !important;
    font-size: 16px !important;
    }
    .why-we{
        margin: 0 !important;

    }
    .special{
        margin: 5% !important;
    }
    iframe{
        width: 98% !important;
    }
    .near{
        padding: 15px
    }
    .table-near th,tr,td{
        font-size: 2.3vh;
        padding: 1vh;
    }
    
}
@media (min-width: 500px){
.modal-dialog {
    max-width: 700px !important;
}
.table-near th,tr,td{
    font-size: 16px;
    padding-right: 9% !important;
    padding: 3px;
}
.near{
    padding: 5%;
    padding-top: 30px;
}

}
  
header{
    margin: 0;
    padding: 0;
    height: 70px;
    position: sticky; 
    font-family: 'Roboto', sans-serif;
    font-style: normal;
}
header a{
    color: dimgray;
}
h1{
    margin: 0;
    padding: 0;
}
body{
    margin: 0;
    background-color: darkgray;
}
.info{
    margin: auto;
    justify-content: center;
    width: 65%;
    align-items: center;
    justify-content: center;
    margin-bottom: 6rem;
    margin-top: 3rem;

}

.info h2{
    text-align: center;
    font-family: 'Playfair Display';
    font-style: italic;
}
.info p{
    font-size: 20px;
    margin-top: 20px;
    font-family: 'Roboto Light',sans-serif;
}
.btn-primary{
    background-color: rgb(41, 71, 90) !important;
    border-color: rgb(41, 71, 90) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
#rooms{
    padding-top: 2rem; 
}
.card-title{
    font-style: italic;
    font-family: 'Playfair Display Medium';

}
.card-text{
    font-family: 'Roboto Light',sans-serif;
}
.table-near th{
    font-family: 'Playfair Display Medium';
    font-style: italic;
}
.table-near td{
    font-family: 'Roboto Light',sans-serif;

}
.table-near{
    justify-content: center;
    align-items: center;
    display: flex;
}

.why-we{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem;
    margin-top: 2rem;
}
.why-we th,tr{
    font-family: 'Roboto Light',sans-serif;
    padding: 6px;
    padding-right: 3rem;
    font-size: 16px;
}
#special h2{
    font-family: 'Playfair Display Medium';
    font-style: italic;
    display: flex;
    justify-content: center;
}
#special{
    margin: 6%;
    padding: 1rem;
    background-color: rgb(216, 231, 240);
}
.ths{
    font-size: 22px !important;
}
#map {
    width: 90%;
    height: 30rem;

}
html, body {
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}
#bok{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem;
}
footer{
    width: 100%;
    background-color: #F1F1F1;
    display: flex;
    justify-content: space-between;
    font-family: 'Roboto Light',sans-serif;
}
#contacts{
    font-family: 'Roboto Light',sans-serif;
    padding: 2rem;
    font-size: 17px;
}
#contacts h1{
    font-size: 24px;
    padding-bottom: 10px;
}
#contacts i{
    padding: 5px
}
#contacts a{
    color: black;
}
#site-links{
    font-family: 'Roboto Light',sans-serif;
    padding: 2rem;
    font-size: 17px;
    list-style-type: none;
}
#site-links h1{
    font-size: 24px;
    padding-bottom: 10px;
}
#site-links i{
    padding: 5px
}
#site-links a{
    color: black;
    
}