*{box-sizing:border-box;margin:0;padding:0}body{display:flex;flex-direction:column}header{background-color:#1e90ff;color:#fff;text-align:center;padding:20px}.content-area{display:flex;flex-grow:1;padding:1em}.main-content{flex-grow:3;padding:1em;background-color:#f8f8f8}.sidebar{flex-grow:1;padding:1em;background-color:#e7e7e7}.foother{background-color:deeppink;color:#fff;padding:2em;text-align:center}@media (max-width:768px){.content-area{flex-direction:column}}