/* Media Query*/
@media only screen and (max-width: 600px) {
    .image2{
     display: inline;
     width: 300px;
     height: 300px;
    }
    .image4{
        width: 300px;
        height: 300px;
    }
    .image5{
        width: 50px;
        height: 50px;
    }
    @media only screen and (min-width: 100px) {
        .image2{
         display: inline;
         width: 100px;
         height: 100px;
        }
        .image4{
            width: 100px;
            height: 100px;
        }
        .image5{
         display: none;
        }

       }
    
   }
  

/* CSS */

.heading1{
    text-align: center;
    font-family: monospace;
    font-weight: bolder;
    background-color: red;
    color: whitesmoke;
    text-shadow: -1px 5px 5px black;
}
.image{
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 180px;
   height: 180px;
   border-radius: 500px;
   border: 2px solid black;

}
.heading2{
    text-align: center;
    font-family: monospace;
    font-weight: bolder;
    background-color:chartreuse;
    color: whitesmoke;
    text-shadow: -1px 5px 5px black;
}
.heading3{
    text-align: center;
    font-family: monospace;
    font-weight: bolder;
    background-color:yellow;
    color:whitesmoke;
    text-shadow: -1px 5px 5px black;
}

.heading4{
    text-align: center;
    font-family: monospace;
    font-weight: bolder;
    background-color:blue;
    color:whitesmoke;
    text-shadow: -1px 5px 5px black;
}

#head{
    text-align: center;
    animation-name: eshop;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-direction: alternate-reverse;
    animation-timing-function: ease-in-out;
}
@keyframes eshop {
   from{
       color: red;
   }
   To{
       color: blueviolet;
   }
    
}
.heading5{
    text-align: center;
    font-family: monospace;
    font-weight: bolder;
    background-color:darkgoldenrod;
    color:whitesmoke;
    text-shadow: -1px 5px 5px black;
}

#head1{
    text-align: center;
    animation-name: fshop;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-direction: alternate-reverse;
    animation-timing-function: ease-in-out;
}

@keyframes fshop {
    from{
        color: green;
    }
    To{
        color: limegreen;
    }
    
}

.image3{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#head2{
    text-align: center;
    animation-name: ushop;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-direction: alternate-reverse;
    animation-timing-function: ease-in-out;
}
   
@keyframes ushop {
    from{
        color: blue;
    }
    To{
        color: blueviolet;
    }
    
}
.heading6{
    text-align: center;
    font-family: monospace;
    font-weight: bolder;
    background-color:burlywood;
    color:whitesmoke;
    text-shadow: -1px 5px 5px black;
}

.image4{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
h5{
    text-align: center;
    font-family: sans-serif;
    font-weight: 300;
}
footer .container .image5{
    float: right;
    position: relative;
    bottom: 40px;
}