body {
    background-color: #270102;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 0.9em;
    color: #110001;
}

.header {
    background-color: #B38E76;
    padding: 0.8em;
    margin: 0.8em;
    text-align:center;
    
}

.city {
    background-color: #9e415a;
    padding: 0.8em;
    margin: 0.8em; 
    text-align: justify;
}

.language {
    background-color: #be637b;
    padding: 0.8em;
    margin: 0.8em;
    text-align: center;
}

.historical-places{
    /* align-content: center; */background-color: #722e2e;
    padding:0.8em;
    margin: 0.8em;
    text-align: center;
}


table {
    border-collapse: collapse;
    width: 60%;
    margin: auto;
    
  }

th, td {
    border: 2px solid #652A3A;
    padding: 5px;
    text-align: left;
    
  }

  th {
    background-color: #8b3f53;
    text-align: center;
  }


.place-1 {
    background-color: #722e2e;
    padding: 0.8em;
    margin: 0.6em;
    width: 28.2%;
    /*height: 30.2em;*/
    float: left;
    text-align: left;
    /*border: 1px solid #270102;
    border-radius: 0.8em;*/
}

.place-2 {
    background-color: #722e2e;
    padding: 0.8em;
    margin: 0.6em;
    width: 28.2%;
    /*height: 30.2em;*/
    float: left;
    text-align: left;
    /*border: 1px solid #270102;
    border-radius: 0.8em;*/
}

.place-3 {
    background-color: #722e2e;
    padding: 0.8em;
    margin: 0.6em;
    width: 28.2%;
    /*height: 30.2em; */
    float: left;
    text-align: left;
   /* border: 1px solid #270102;
    border-radius: 0.8em;*/
}

.header img {
    float: right;
    margin: 0.8em; 
    width: 38%;
    height: 20em;
    border: 1px solid #8b3f53;
    border-radius: 0.8em;
}

.city img {
    float: left;
    margin-right: 2em;
    margin-left: 1em;
    margin-bottom: 1em;
    width: 38% ;
    height: 20em;
    border: 1px solid #8b3f53;
    border-radius: 0.8em;
}

.clearfix {
    overflow: auto;
}

.place-1 img {
    float: right;
    margin: 0.8em; 
    width: 45%;
    height: 15em;
    border: 1px solid #8b3f53;
    border-radius: 0.8em;
}

.place-2 img {
    float: right;
    margin: 0.8em; 
    width: 45%;
    height: 15em;
    border: 1px solid #8b3f53;
    border-radius: 0.8em;
}

.place-3 img {
    float: right;
    margin: 0.8em; 
    width: 45%;
    height: 15em;
    border: 1px solid #8b3f53;
    border-radius: 0.8em;
}
 /* max-width 500px means that anything less than 500px will keep the changes and anything above will not change*/
 /* min-width 500px means that anything more than 5oopx will change and anything less will not change */
@media only screen and (max-width:800px) {

    .historical-places {
    display: flex;
    padding: 0em;
    flex-direction: column;
    align-items: center;
}

    .place-1 {
        background-color: #722e2e;
        /* padding: 0.8em; */
        /* margin: auto; */
        width: 90%;
        /*height: 30.2em;*/
        display: block;
        /*text-align: left;
        /*border: 1px solid #270102;
        border-radius: 0.8em;*/
    }
    
    .place-2 {
        background-color: #722e2e;
        /* padding: 0.8em; */
        /* margin: 0.6em; */
        width: 90%;
        /*height: 30.2em;*/
        display: block;
        /*text-align: left;
        /*border: 1px solid #270102;
        border-radius: 0.8em;*/
    }
    
    .place-3 {
        background-color: #722e2e;
        /* padding: 0.8em; */
        /* margin: 0.6em; */
        width: 90%;
        /*height: 30.2em; */
        display: block;
        /*text-align: left;
       /* border: 1px solid #270102;
        border-radius: 0.8em;*/
    }
    
    .header img {
        margin: auto; 
        width: 40%;
        height: 20em;
        border: 1px solid #8b3f53;
        border-radius: 0.8em;
    }
    
    .city img {
        margin: auto;
        width: 100%; 
        height: 17em; 
        border: 1px solid #8b3f53;
        border-radius: 0.8em;
    }
    
    .clearfix {
        overflow: auto;
    }
    
    .place-1 img {
        float: right;
        /* margin: 0.1em; */ 
        width: 40%;
        height: 21em;
        border: 1px solid #8b3f53;
        border-radius: 0.8em;
    }
    
    .place-2 img {
        float: left;
        /* margin: 0.3em; */ 
        width: 40%;
        height: 21em;
        border: 1px solid #8b3f53;
        border-radius: 0.8em;
    }
    
    .place-3 img {
        float: right;
        /* margin: 0.3em; */ 
        width: 40%;
        height: 21em;
        border: 1px solid #8b3f53;
        border-radius: 0.8em;
    }

    .header {
        background-color: #B38E76;
        padding: 0.8em;
        margin: 0.8em;
        text-align:center;
        display: flex;
        flex-direction: column;
    }

    .city {
        background-color: #9e415a;
        padding: 0.8em;
        margin: 0.8em; 
        text-align: justify;
        display: flex; 
        flex-direction: column;
        align-items: center;
    }
    
    .language {
        background-color: #be637b;
        padding: 0.8em;
        margin: 0.8em;
        text-align: justify;
        display: flex;  
        flex-direction: column;
        align-items: center;
    }
    
    table {
        border-collapse: collapse;
        width: 95%;
        margin: auto;
        
      }
    
    th, td {
        border: 2px solid #652A3A;
        padding: 5px;
        text-align: left;
        
      }
    
      th {
        background-color: #8b3f53;
        text-align: center;
      }

}

@media only screen and (max-width:426px) {

    .historical-places {
    display: block;
    padding: 0.4em;

    }

    .place-1 {
        background-color: #722e2e;
        /* padding: 0.8em; */
        /* margin: 0.6em; */
        width: 90%;
        /*height: 30.2em;*/
        display: block;
        /*text-align: left;
        /*border: 1px solid #270102;
        border-radius: 0.8em;*/
    }
    
    .place-2 {
        background-color: #722e2e;
        /* padding: 0.8em; */
        /* margin: 0.6em; */
        width: 90%;
        /*height: 30.2em;*/
        display: block;
        /*text-align: left;
        /*border: 1px solid #270102;
        border-radius: 0.8em;*/
    }
    
    .place-3 {
        background-color: #722e2e;
        /* padding: 0.8em; */
        /* margin: 0.6em; */
        width: 90%;
        /*height: 30.2em; */
        display: block;
        /*text-align: left;
       /* border: 1px solid #270102;
        border-radius: 0.8em;*/
    }
    
    .header img {
        margin: auto; 
        width: 100%;
        height: 20em;
        border: 1px solid #8b3f53;
        border-radius: 0.8em;
    }
    
    .city img {
        margin: auto;
        width: 100%; 
        height: 17em; 
        border: 1px solid #8b3f53;
        border-radius: 0.8em;
    }
    
    .clearfix {
        overflow: auto;
    }
    
    .place-1 img {
        float: right;
        margin: 0.3em; 
        width: 45%;
        height: 18em;
        border: 1px solid #8b3f53;
        border-radius: 0.8em;
    }
    
    .place-2 img {
        float: left;
        margin: 0.3em; 
        width: 45%;
        height: 18em;
        border: 1px solid #8b3f53;
        border-radius: 0.8em;
    }
    
    .place-3 img {
        float: right;
        margin: 0.3em; 
        width: 45%;
        height: 18em;
        border: 1px solid #8b3f53;
        border-radius: 0.8em;
    }

    .header {
        background-color: #B38E76;
        padding: 0.8em;
        margin: 0.8em;
        text-align:center;
        display: flex;
        flex-direction: column;
    }

    .city {
        background-color: #9e415a;
        padding: 0.8em;
        margin: 0.8em; 
        text-align: justify;
        display: flex; 
        flex-direction: column;
        align-items: center;
    }
    
    .language {
        background-color: #be637b;
        padding: 0.8em;
        margin: 0.8em;
        text-align: justify;
        display: flex;  
        flex-direction: column;
        align-items: center;
    }
    
    table {
        border-collapse: collapse;
        width: 95%;
        margin: auto;
        
      }
    
    th, td {
        border: 2px solid #652A3A;
        padding: 5px;
        text-align: left;
        
      }
    
      th {
        background-color: #8b3f53;
        text-align: center;
      }
}