html, body {
    margin: 0;
    font:15px/26px 'Open Sans', Verdana, sans-serif;
    color:#333333;
    font-weight:400;
  }
  
  * {
    box-sizing: border-box;
  }
  
  .timetable {
    display: grid;
    grid-template-areas: ". week" "time content";
    grid-template-columns: 120px;
    grid-template-rows: 60px;
    width:1000px;
    margin:0 auto;
  }
  .timetable .accent-pink {
    display: flex;
    align-items: center;
    justify-content: left;
    padding-left: 5%;
    width: 100%;
    height: 100%;
    background: #f0bdd0;
    transition: 0.2s ease box-shadow, 0.2s ease transform;
  }
  .timetable .accent-pink:hover {
    box-shadow: 0 20px 30px 0 rgba(238, 142, 188, 0.3);
    transform: scale(1.05);
  }
  .timetable .accent-oldlace {
    display: flex;
    align-items: center;
    justify-content: left;
    padding-left: 5%;
    width: 100%;
    height: 100%;
    background: #fcf4e3;
    transition: 0.2s ease box-shadow, 0.2s ease transform;
  }
  .timetable .accent-oldlace:hover {
    box-shadow: 0 20px 30px 0 rgba(238, 192, 142, 0.3);
    transform: scale(1.05);
  }
  .timetable .accent-amsilver {
    display: flex;
    align-items: center;
    justify-content: left;
    padding-left: 5%;
    width: 100%;
    height: 100%;
    background: #d1d1d1;
    transition: 0.2s ease box-shadow, 0.2s ease transform;
  }
  .timetable .accent-amsilver:hover {
    box-shadow: 0 20px 30px 0 rgba(188, 238, 142, 0.3);
    transform: scale(1.05);
  }
  .timetable .accent-darksilver {
    display: flex;
    align-items: center;
    justify-content: left;
    padding-left: 5%;
    width: 100%;
    height: 100%;
    background: #696b78;
    transition: 0.2s ease box-shadow, 0.2s ease transform;
  }
  .timetable .accent-darksilver:hover {
    box-shadow: 0 20px 30px 0 rgba(142, 238, 192, 0.3);
    transform: scale(1.05);
  }
  .timetable .accent-silverlakeblue {
    display: flex;
    align-items: center;
    justify-content: left;
    padding-left: 5%;
    width: 100%;
    height: 100%;
    background: #a5c6e4;
    transition: 0.2s ease box-shadow, 0.2s ease transform;
  }
  .timetable .accent-silverlakeblue:hover {
    box-shadow: 0 20px 30px 0 rgba(142, 188, 238, 0.3);
    transform: scale(1.05);
  }
  .timetable .accent-purple {
    display: flex;
    align-items: center;
    justify-content: left;
    padding-left: 5%;
    width: 100%;
    height: 100%;
    background: #c08eee;
    transition: 0.2s ease box-shadow, 0.2s ease transform;
  }
  .timetable .accent-purple:hover {
    box-shadow: 0 20px 30px 0 rgba(192, 142, 238, 0.3);
    transform: scale(1.05);
  }
  .timetable .weekend {
    background: #fbfbfc;
    color: #87a1ad;
  }
  .timetable .week-names {
    grid-area: week;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-transform: uppercase;
    font-size: 12px;
  }
  .timetable .week-names > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-shadow: inset 1px 0 0 #ECEFF1;
  }
  .timetable .time-interval {
    grid-area: time;
    display: grid;
    grid-template-rows: repeat(16, 1fr);
    font-size: 14px;
  }
  .timetable .time-interval > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 1px 0 0 #ECEFF1;
  }
  .timetable .content {
    grid-area: content;
    display: grid;
    grid-template-rows: repeat(16, 1fr);
    grid-template-columns: repeat(3, 1fr);
  }
  .timetable .content > div {
    align-items: center;
    justify-content: left;
    box-shadow: inset 1px 0 0 #ECEFF1, inset 0 1px 0 0 #ECEFF1;
  }