#wrapper{display:grid;grid-template-areas:'header header header header header menu' 'content content content content content content' 'content content content content content content' 'login footer footer footer footer footer';grid-gap:10px;background:#2196f3;padding:10px}#wrapper div{background:#eee;text-align:center;padding:10px 10px;border-radius:15px}html{font-family:sans-serif;font-size:15px}body{padding:0;margin:0;background:#2196f3}ul{padding:0;margin:0}li{list-style-type:none;text-align:left}a{display:block;text-decoration:none;color:#2196f3;font-weight:bold;font-size:18px;padding:5px 10px}a:hover{background:#2196f3;color:#fff;border-radius:25px}#header{grid-area:header}#headerimg{display:inline-block;float:left;position:relative}#menu{grid-area:menu;display:grid;align-items:center}#login{grid-area:login;display:grid;align-items:center}#content{grid-area:content}#aside{grid-area:aside}#footer{grid-area:footer;display:grid;place-items:center}.clock-container{display:flex;flex-direction:column;justify-content:center;align-items:center}.flip-clock{display:flex;gap:10px;align-items:center}.flip-unit{background:#fff;color:#000;font-size:3em;font-weight:bold;padding:20px 15px;border-radius:8px;min-width:80px;text-align:center;box-shadow:0 5px 15px rgba(0,0,0,.2);position:relative;overflow:hidden}.separator{font-size:3em;color:#fff;margin:0 5px}.flip-unit.flip{animation:flip .5s ease}@keyframes flip {
    0%   { transform: rotateX(0deg); }
    50%  { transform: rotateX(-90deg); }
    100% { transform: rotateX(0deg); }
  }#date{margin-top:15px;font-size:1.2em;color:#fff;text-shadow:0 0 5px rgba(0,0,0,.5)}