* { box-sizing: border-box }

html, body { height: 100vh; width: 100vw; }
body { display: flex; flex-direction: column; overflow-x: hidden; margin: 0; padding: 0; background: #222; color: black; font-family: "Lato"; }
body > header, body > footer { display: flex; flex-wrap: wrap; font-size: 20pt; text-align: center; background: #000; color: #fff; }
body > content { flex: 1; overflow-y: auto; }
date, clock, message { flex: 1 }

date::before {
  content: "DATE";
  padding-right: 5px;
  color: yellow;
}

clock::before {
  content: attr(short) "";
  padding-right: 5px;
  color: yellow;
}

page {
  height: 100%;
  width: 100%;
  display: grid;
  background-image: url(background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 25px;
  grid-row-gap: 25px;
}

page > div { border: 3px solid white; }

page > .div1 { grid-area: 2 / 2 / 4 / 6; }
page > .div2 { grid-area: 1 / 1 / 2 / 2; }
page > .div3 { grid-area: 1 / 2 / 2 / 3; }
page > .div4 { grid-area: 1 / 3 / 2 / 4; }
page > .div5 { grid-area: 1 / 4 / 2 / 5; }
page > .div6 { grid-area: 1 / 5 / 2 / 6; }
page > .div7 { grid-area: 1 / 6 / 2 / 7; }
page > .div8 { grid-area: 2 / 1 / 3 / 2; }
page > .div9 { grid-area: 2 / 6 / 3 / 7; }
page > .div10 { grid-area: 3 / 1 / 4 / 2; }
page > .div11 { grid-area: 3 / 6 / 4 / 7; border: 3px solid silver; }

calendar {
  background-image: url(copper.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: ;
  grid-template-rows: auto auto repeat(5, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  height: 100%;
}

page div:last-of-type calendar {
  background-image: url(copper2.jpg);
}

a, a:visited { text-decoration: none; color: white; }
a:hover { color: yellow }

calendar > .div1 { grid-area: 1 / 1 / 2 / 8; text-align: center; font-size: 16pt; font-weight: bold; padding: 8px }
calendar > .div2 { grid-area: 2 / 1 / 3 / 2; padding: 8px; border: 0; background: none; color: white; text-align: center; font-weight: bold; }
calendar > .div3 { grid-area: 2 / 2 / 3 / 3; padding: 8px; border: 0; background: none; color: white; text-align: center; font-weight: bold; }
calendar > .div4 { grid-area: 2 / 3 / 3 / 4; padding: 8px; border: 0; background: none; color: white; text-align: center; font-weight: bold; }
calendar > .div5 { grid-area: 2 / 4 / 3 / 5; padding: 8px; border: 0; background: none; color: white; text-align: center; font-weight: bold; }
calendar > .div6 { grid-area: 2 / 5 / 3 / 6; padding: 8px; border: 0; background: none; color: white; text-align: center; font-weight: bold; }
calendar > .div7 { grid-area: 2 / 6 / 3 / 7; padding: 8px; border: 0; background: none; color: white; text-align: center; font-weight: bold; }
calendar > .div8 { grid-area: 2 / 7 / 3 / 8; padding: 8px; border: 0; background: none; color: white; text-align: center; font-weight: bold; }
calendar > .div9 { grid-area: 3 / 1 / 4 / 2; }
calendar > .div10 { grid-area: 3 / 2 / 4 / 3; }
calendar > .div11 { grid-area: 3 / 3 / 4 / 4; }
calendar > .div12 { grid-area: 3 / 4 / 4 / 5; }
calendar > .div13 { grid-area: 3 / 5 / 4 / 6; }
calendar > .div14 { grid-area: 3 / 6 / 4 / 7; }
calendar > .div15 { grid-area: 3 / 7 / 4 / 8; }
calendar > .div16 { grid-area: 4 / 1 / 5 / 2; }
calendar > .div17 { grid-area: 4 / 2 / 5 / 3; }
calendar > .div18 { grid-area: 4 / 3 / 5 / 4; }
calendar > .div19 { grid-area: 4 / 4 / 5 / 5; }
calendar > .div20 { grid-area: 4 / 5 / 5 / 6; }
calendar > .div21 { grid-area: 4 / 6 / 5 / 7; }
calendar > .div22 { grid-area: 4 / 7 / 5 / 8; }
calendar > .div23 { grid-area: 5 / 1 / 6 / 2; }
calendar > .div24 { grid-area: 5 / 2 / 6 / 3; }
calendar > .div25 { grid-area: 5 / 3 / 6 / 4; }
calendar > .div26 { grid-area: 5 / 4 / 6 / 5; }
calendar > .div27 { grid-area: 5 / 5 / 6 / 6; }
calendar > .div28 { grid-area: 5 / 6 / 6 / 7; }
calendar > .div29 { grid-area: 5 / 7 / 6 / 8; }
calendar > .div30 { grid-area: 6 / 1 / 7 / 2; }
calendar > .div31 { grid-area: 6 / 2 / 7 / 3; }
calendar > .div32 { grid-area: 6 / 3 / 7 / 4; }
calendar > .div33 { grid-area: 6 / 4 / 7 / 5; }
calendar > .div34 { grid-area: 6 / 5 / 7 / 6; }
calendar > .div35 { grid-area: 6 / 6 / 7 / 7; }
calendar > .div36 { grid-area: 6 / 7 / 7 / 8; }
calendar > .div37 { grid-area: 7 / 1 / 8 / 2; }
calendar > .div38 { grid-area: 7 / 2 / 8 / 3; }
calendar > .div39 { grid-area: 7 / 3 / 8 / 4; }
calendar > .div40 { grid-area: 7 / 4 / 8 / 5; }
calendar > .div41 { grid-area: 7 / 5 / 8 / 6; }
calendar > .div42 { grid-area: 7 / 6 / 8 / 7; }
calendar > .div43 { grid-area: 7 / 7 / 8 / 8; }

day, today, dow { display: block }

day:not(:empty), today { font-weight: bold; background: white; border: 1px solid #aaa }

today dow { background: orange; color: black }

dow { font-size: 9pt; }

/* This will color weekends */
day:nth-child(7n+1):not(:empty), day:nth-child(7n+2):not(:empty),
today:nth-child(7n+1):not(:empty), today:nth-child(7n+2):not(:empty) {
  background: silver;
}

events {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

events > :nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
events > :nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
events > :nth-child(3) { grid-area: 3 / 1 / 4 / 2; }
events > :nth-child(4) { grid-area: 4 / 1 / 5 / 2; }

day events, day.events, today events, today.events {
  background: #affaaa !important;
}

event {
  display: block;
  border-top: 1px solid silver;
  text-align: center;
  font-size: 10pt;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

event.special { background: lightpink }
event:first-of-type { border-top: 0 }