body, html {margin: 0px; 0px; padding: 0px;}

.container { display: flex; flex-wrap: wrap; }

.pane { box-sizing: border-box; min-height: 100px; padding: 10px; }

/* Adjust the width of panes for different screen sizes */
@media (min-width: 900px) {
   p{font-size: 15pt;} table,small{font-size: 13pt;} p{margin: 12px 40px;}
   h4{font-size: 13pt; margin: 12px 40px;} h3{font-size: 15pt; margin: 12px 40px;} h2{font-size: 17pt; margin: 12px 40px;} h1{font-size: 19pt; margin: 12px 40px;} 
   .pane { width: 33.33%; }
}

@media (max-width: 899px) {
   p{font-size: 13pt;} table,small{font-size: 12pt;} p{margin: 11px 30px;}
   h4{font-size: 11pt; margin: 11px 30px;} h3{font-size: 13pt; margin: 11px 30px;} h2{font-size: 15pt; margin: 11px 30px;} h1{font-size: 17pt; margin: 11px 30px;} 
   .pane { width: 50%; }
}

@media (max-width: 599px) {
   p{font-size: 12pt;} table,small{font-size: 11pt;} p{margin: 10px 18px 10px 22px;}
   h4{font-size: 14pt; margin: 10px 20px;} h3{font-size: 12pt; margin: 10px 20px;} h2{font-size: 14pt; margin: 0px 20px;} h1{font-size: 16pt; margin: 10px 20px;}
   .pane { width: 100%; }
}

/* Style the panes to differentiate them */
.pane:nth-child(odd) { background-color: #eeffff; }

.pane:nth-child(even) { background-color: #ffffee; }

img { min-width: 300px; 1px; height: auto; margin: 2px 5px; }

#landscape-message { display:none; }
@media only screen and (orientation:portrait) {
    #wrapper { display:none; }
    #landscape-message { display:block; }
}

 .boxed {border: 5px solid red; width: 90%; margin: auto; text-align: center; background-color: #ccffff;}