.header{padding:20px;background-color:blue;text-align:center}.header h3{color:#fff;font-size:20px}.nav{background-color:blue;padding:5px}.nav li{list-style:none;display:inline-block;padding:8px}.nav a{color:silver}.nav ul li a:hover{text-decoration:none;color:red;*{box-sizing:border-box}margin:0;font-family:Arial,Helvetica,sans-serif}.topnav{overflow:hidden;background-color:#e9e9e9}.topnav a{float:left;display:block;color:#000;text-align:center;padding:14px 16px;text-decoration:none;font-size:17px}.topnav a:hover{background-color:red;color:#000}.topnav a.active{background-color:#2196f3;color:#fff}.topnav a.punch{background-color:#fff;color:#000}.topnav .search-container{float:right}.topnav input[type=text]{padding:6px;margin-top:8px;font-size:17px;border:none;color:blue}.topnav .search-container button{float:right;padding:6px 10px;margin-top:8px;margin-right:16px;background:blue;font-size:17px;border:none;cursor:pointer;color:silver}.topnav .search-container button:hover{background:red}@media screen and (max-width:600px){.topnav .search-container{float:none}.topnav a,.topnav input[type=text],.topnav .search-container button{float:none;display:block;text-align:left;width:100%;margin:0;padding:14px}.topnav input[type=text]{border:1px solid #ccc}}}.lside container{width:90vw;height:500px border:1px solid #000;display:flex;justify-content:end;flex-direction:row float:left;width:50%;min-height:200px;background-color:blue;text-align:center}.rside container{width:90vw;height:500px border:1px solid #000;display:flex;justify-content:end;flex-direction:row text-align:center;float:right;width:50%;min-height:200px;background-color:blue}.footer{background-color:red;text-align:center;padding:10px}.footer p{color:#fff}