body { background-color: #333; color: #fff;} th { color: #FFF; font-size: 28px; } table { border-collapse: collapse; } table, th, td { border: 0px solid #999; padding: 0px; padding-top: 0px; padding-bottom: 0px; } .grid-container { display: grid; grid-template-areas: 'clock main main main main main' 'events main main main main main' 'events main main main main main'; grid-gap: 3px; padding: 4px; } .grid-main { grid-area: main; } .grid-clock { grid-area: clock; border: 1px solid #AAA; } .grid-events { grid-area: events; } .main { background-color: #222; position: center; /* margin: auto; */ } .mainClock { text-align: center; font-size: 20px; border: 1px solid #999; padding: 15px; padding-top: 5px; padding-bottom: 5px; } .events { /* border: 1px solid #DDD; */ padding: 2px; padding-right: 10px; } .events-current { background-color: #666; /* border: 1px solid #DDD; */ padding: 2px; padding-right: 10px; } th.events { text-align: left; } table.events { width: 100%; } .countdown { text-align: right; font-size: 60px; } .warn { color: yellow; } .over { color: red; } .green { color: lime; } #now { color: #FFF; font-size: 20px; } #utc_now { color: #FFF; font-size: 20px; } .debug { background-color: #000; color: lime; border: 2px; border-color: lime; } .notes { background-color: #000; color: #AAA; width: 100%; min-height: 400px;} .notesTitle { background-color: #000; color: #AAA; width: 100%; font-size: 20px;} .right { text-align: right; border: 0px;} .left { text-align: left; border: 0px; } .nav { border: 0px; width: 100%; padding:0px; } .upNext { color: #fff; font-size: 45px; }