body {
    /* background-color: #EEEEEE; */
    font-family: 'Cardo', serif;
    margin: 0;
    padding: .5em;
}
* {
    box-sizing: border-box;
}
h1, h2 {
    font-family: 'Montserrat', sans-serif;
    padding-left: .5em;
}
/* adding keyframe animation */
.fly {
    width: 150px;
    /* height: 150px; */
    animation-name: flying-drone;
    animation-duration: 10s;
    animation-timing-function: ease-in-out;
    animation-play-state: running;
}
@keyframes flying-drone {
    0% { transform: translateX(0) }
    50% { transform: translateX(calc(100vw - 150px)) }
    100% { transform: translateX(0) }
}
#grid-floats {
    width: 100%; 
    margin: 0;
    padding: 0;
    /* overflow: hidden; */
}
#grid-floats .grid-item {
    float: left;
}
li:first-child {
    width: calc(50% - 20px);
    /* to highlight the big elements  */
    background-color: #FDE3A7;
    /* box-shadow: 5px 5px 10px #6C7A89; */
}
.grid-item {
    width: calc(25% - 20px); 
    height: 300px;
    margin: 10px;
    padding: 10px;
    background-color: #A2DED0;
    /* float: left; */
    /* border: 2px solid gray; */
    list-style-type: none;
}
.grid-item img {
    width: calc(50% - 20px);
    padding: .5em;
    float: left;
}
.grid-item:hover {
    opacity: .7;
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}
#grid-floats::after {
    content: '';
    display: block;
    clear: both;
}
#grid-flex {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-evenly; */
}
#grid-flex .grid-item {
    height: auto;
}
/* for tablets and iPads */
@media (min-width: 601px) and (max-width: 1024px) {
    li:nth-child(-n+2)  {
         width: calc(50% - 20px);
         height: 280px;
        /* to highlight the big elements  */
         background-color: #FDE3A7;
         /* box-shadow: 5px 5px 10px #6C7A89; */
     }
     .grid-item {
         width: calc(33.3% - 20px);
         overflow: auto;
     }
 }
/* for mobile phones */
@media (max-width: 600px) {
    li:first-child {
        width: calc(100% - 20px);
    }
    .grid-item {
        width: calc(50% - 20px);
        height: 350px;
        overflow: auto;
    }
    .grid-item img {
        width: 100%;
        float: none;
    }
    .fly {
        animation-duration: 5s;
    }
}