body {
  display: grid;
  grid-template-areas: 
    "logo counter info"
    "screen screen secondary"
    "progressbar progressbar progressbar"
    "now now now"
    "next next next";
  grid-template-rows: 32px 1fr 3px 90px 90px;  
  grid-template-columns: 360px 1fr 360px;
  grid-row-gap: 0px;
  grid-column-gap: 0px;
  height: 100vh;
  max-width: 100vw;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  background: #000000;
  color: #bbb;
}

#logo {
  grid-area: logo;
  padding: 0;
  font-size: 0.95em;
  font-weight: 600;
  opacity: .5;
}
#logo img {
  height: 100%;
  vertical-align: middle;
  float: left;
}

#counter {
  grid-area: counter;
  align-self: center;
  justify-self: center;
  font-size: 3.2em;
  font-weight: 600;
}

#secondary {
  grid-area: secondary;
  align-self: start;
  justify-self: end;
  font-size: 1em;
  font-weight: 600;
  padding-right: 10px;
}

#info { 
  grid-area: info;
  align-self: start;
  //justify-self: right;
  padding-right: 10px;
  font-size: 1.5em;
  font-weight: 80;
}

#clock {
  float: right;
}

#project_description {
  font-size: .9em;
  font-weight: 200;
  white-space: nowrap;
}

#screen { 
  grid-area: screen; 
}

#progress { 
  grid-area: progressbar;
  align-self: start;
  width: 100%;
}

#timer_progress {
  height: 3px;
  background-color: white;
  margin-left: 0;
  border: 0;
}

#now { 
  grid-area: now;
  justify-self: left;
}
#event_now_end {
  display: none;
}

#next { 
  grid-area: next;
  justify-self: left;
}
#event_next_end {
  display: none;
}

group {
  display: none;
}
groupname {
  display: none;
}
customdata {
  display: none;
}

.time {
  float: left;
  color: lightcyan;
  background-color: darkslategray;
  padding: 3px 4px;
  margin: 12px 4px;
  font-size: 2em;
  font-style: italic;
  line-height: 1;
  opacity: .7;
}

.title {
  font-weight: 600;
  font-size: 3em;
  display: inline;
  margin-left: 10px;
}

.note {
  font-weight: 100;
  font-size: 2em;
  font-style: italic;
  line-height: .7;
  padding-left: 8px;
}

.duration {
  display: inline;
  font-size: 1.5em;
  vertical-align: baseline;
  font-style: italic;
  margin-left: 5px;
}
.duration::after {
  content: 'p';
}