@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');

*, ::before, ::after {
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

*, header, footer, .div1, .div2, .div3, .div4 {
    font-size: 2rem;
    font-family: 'Orbitron', serif;
    font-weight: 400;
    text-align: center;

}

header, footer {
    font-family: 'Orbitron', serif;
    font-weight: 400;
    float: left;
    height: 300px;
    width: 100%;
    border: 2px solid black;
    background: #A33B20
}

.div1 {
    background: url('https://wallpapercave.com/wp/wp6650166.gif') no-repeat scroll center center;
    background-size: cover;
    float: left;
    height: 500px;
    width: 20%;
    border: 2px solid black;
  
}

.div2 {
    background: url('https://i.pinimg.com/originals/9f/92/6c/9f926c8c220127d81c8ba6897aa8d5db.gif') no-repeat scroll center center;
    background-size: cover;
    float: left;
    height: 500px;
    width: 40%;
    border: 2px solid black;
    /* background: #70566D; */
}

.div3 {
    background: url('https://i.pinimg.com/originals/1a/2b/7e/1a2b7e14b6bd016f335886f7b62ba61a.gif') no-repeat scroll center center;
    background-size: cover;
    float: left;
    height: 500px;
    width: 20%;
    border: 2px solid black;
    /* background: #adab13; */
}

.div4 {
    background: url('https://64.media.tumblr.com/5027d799662c5e065967d7023005b614/tumblr_pb1ow7SwRx1xqkqqwo1_500.gifv') no-repeat scroll center center;
    background-size: cover;
    float: left;
    height: 500px;
    width: 20%;
    border: 2px solid black;
    /* background: #56178a; */
}

/* ******************************** TABLET ******************************** */

@media (min-width: 581px) and (max-width: 868px) {
    * header footer div .div2 .div3 .div4 {
        font-size: 1.6rem;
        color: rgb(255, 0, 0);
    }

    .div1 {
        width: 33.3333%;
        /* background: #18360c ; */
    }

    .div2 {
        width: 33.3333%;
        /* background: #db6719; */
    }    

    .div3 {
        width: 33.3333%;
        /* background: #7262b6; */

    }

    .div4 {
        width: 100%;
        /* background: #43e94ba1; */
    }

    footer, header {
        background: #0b3c5c ;
    }
}

/* *******************************  MOBILE ******************************* */
@media (max-width: 580px) {
    * header footer div .div2 .div3 .div4 {
        font-size: 1.2rem;
        color: blue;
    }

    .div1 {
        width: 100%;
        /* background: #44A1A0 ; */
    }

    .div2 {
        width: 50%;
        /* background: #70566D; */
    }    

    .div3 {
        width: 50%;
        /* background: #adab13; */

    }
    .div4 { 
        width: 100%;
        /* background: #56178a; */
    }

    footer, header {
        background: #A33B20 ;
    }
}