@import url('https://fonts.googleapis.com/css2?family=Festive&family=Lobster&family=Pacifico&family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300&family=Zen+Kurenaido&display=swap');
body{
    margin:0;
    padding:0;
    font-family: Roboto;
    font-size: 18px;
    background-color: rgb(104, 104, 104);
    color:whitesmoke;
}
.footerimg{
    background-image: url('../images/pexels-paco-toptech.jpg');
    max-width: 100%;
    height:auto;
    height:370px;
    width:400px;
    filter: grayscale(60%);
}
h1{
    margin:0;
    padding:0;
}
header{
    padding: 20px 20px;
}
ul li{
    list-style-type: none;
}
a{
    color:whitesmoke;
}
a:hover{
    color:blueviolet;
}
@media only screen and (max-width:550px){
    body{
        font-size: 17px;
    }
    h1{
        color: white;
        width:100%;
    }
    .container{
        width:90%;
        margin:auto;
    }
    header span{
        display:none;
    }
    header p{
        display:none;
    }
    .banner{
        display:none;
    }
    .footerimg{
        clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
        filter: grayscale(100%);
    }
    .footerimg:hover{
        filter: grayscale(20%);
    }

}
@media only screen and (max-width:1200px){
    body{
        font-size: 17px;
    }
    header{
        background-color: rgb(53, 53, 53);
        padding: 20px 20px;
    }
    h1{
        color: white;
        width:100%;
    }
    p{
        padding:0;
        margin:0;
    }
    
    footer{
        margin-top:40px;
        background-color: rgb(53, 53, 53);
        clear:both;
        padding:50px;
    }
    .container{
        max-width:800px;
        margin:auto;
    }
    .banner{
        background-image: url('../images/pexels-toptech_banner.jpg');
        background-position: bottom center;
        background-size:cover;
        background-repeat: no-repeat;
        height:300px;
    }
    footer p:first-child{
        float:left;
    }
    footer p:last-child{
        float:right;
    }
}
@media only screen and (min-width:1200px){
    body{
        background-image: url('../images/pexels-thomas-malecki-10557641.jpg');
    }
    .banner{
        display:none;
    }
    .footerimg{
        display:none;
    }
    .large-con{
        background-color: rgb(0, 0, 0,0.5);
        max-width: 1000px;
        margin:auto;
        padding:10px;
    }
}