* {
    box-sizing:border-box;
}

body {
    background:whitesmoke;
    transition:background .5s, font-size .5s;
}

img {
    max-width:100%;
}

.container {
    max-width:1100px;
    margin:30px auto;
    
    /* a way to change the individual margins going clockwise, starting at the top and ending on the left */
    /* margin:10px 30px 50px 70px; */
}

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:lightsteelblue;
    text-align:center;

    display:none;
}

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

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

.center {
    width:50%
}

/* 
    max-width = desktop-first
    min-width = mobile-first
*/

/* tablet media query */
@media screen and (max-width: 1000px) {
    body {
        background:whitesmoke;
    }

    main {
        flex-wrap:wrap;
    }

    .left {
        width:100%;
    }

    .center, .right {
        /* gap will add up to 10px because this accounts for two elements combined */

        /* calc function used to do math between two different units */
        width:calc(50% - 5px);
    }
}

/* phone media query */
@media screen and (max-width: 600px) {
    body {
        background:whitesmoke;
        font-size:120%;
    }

    .mobile-banner {
        display:block;
    }

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