body{font-family:Cambria,Cochin,Georgia,Times,'Times New Roman',serif;background-color:#ccc;font-size:.9em}.wrap{padding:1em}header{display:grid;grid-template-columns:1fr 2fr;margin-bottom:1.5em;margin-top:.5em}header>div{font-weight:bold;font-size:2em}header #waktu{text-align:right}header #jam{font-size:.6em}header #jam wrapWaktu{display:inline-block;font-weight:normal;margin-left:.5em}header #jam wrapWaktu jam,header #jam wrapWaktu hari,header #jam wrapWaktu tanggal{font-weight:bold}.map{display:grid;grid-template-columns:repeat(8, 1fr);grid-auto-rows:1fr;grid-gap:.5em}.map .item{background-color:#eee;padding:.5em .5em;text-align:center;box-shadow:1px 1px 3px 3px rgba(0,0,0,0.1);border-radius:.3em}.map .item.hadir{background-image:linear-gradient(to top, green, darkgreen);color:white}.map .item.tugas{background-image:linear-gradient(to top, orange, orangered);color:white}kelas{display:block;font-weight:bold;font-size:1.1em}mapel,guru{display:block}guru{font-style:italic;font-size:.93em}#namapiket{display:grid;grid-gap:1em;grid-template-columns:1fr 1fr}#namapiket>div{border-radius:.3em;background-color:#2883ae;color:white;padding:1em;margin:1em 0}#namapiket>div::before{font-size:2em;margin:1em 0 .3em 0;display:block;color:yellow}#namapiket>div>span{display:block}#namapiket .piket-guru::before{content:"Piket Guru"}#namapiket .piket-bk::before{content:"Piket BK"}@media (min-width:1200px){#namapiket{position:fixed;bottom:2px;right:5px;font-size:.9em;grid-gap:.5em}#namapiket>div::before{font-size:1.2em;margin:.3em 0}}