*{
    box-sizing:border-box;
}

body{
    background:rgb(255, 255, 210);
    transition: background .5s, font-size .5s;
}

img{
    max-width: 100%;
}

.container{
    max-width:1100px;
    margin:0 auto;
}

header, .left, .center, .right, footer, .mobile-banner{
    border: 1px solid;
    padding:20px;
}

header, footer{
    text-align:center;
}

header{
    margin-bottom:10px;
}

footer{
    margin-top:10px;
}

.mobile-banner{
    margin-bottom:10px;
    background:lightyellow;
    text-align:center;

    display:none;
}

main{
    display:flex;
    gap:10px;
}

.left, .right{
    width:25%;
}

.center{
    width:50%;
}

/* 
max-width use for desktop first
min-width use for mobile first
*/

/* tablet media query */
@media screen and (max-width: 1000px){
    body{
        background:rgb(249, 203, 210);
        font-size:115%;
    }

    main{
        flex-wrap:wrap;
    }

    .left{
        width:100%;
    }

    .center, .right{
        width:calc(50% - 5px);
    }

}

/* phone size media query */
@media screen and (max-width: 600px) {
    body {
        background:rgb(195, 198, 255);
        font-size:140%;
    }

    .mobile-banner{
        display:block;
    }

    .center, .right{
        width:100%;
    }
}