/*colour notes: 
  bluegrey: 1B2F33 (pale B2D1D7)
  lavender: 989FCE (pale E3E5F2)
  green: 47682C (pale CCE2BA)
  brown: 8C7051 (pale E2D8CD)
  yellow: FFC145 (pale FFEECD)*/

.layout {
    background-color: #E3E5F2;
    opacity: 0.8;
    background-image:  radial-gradient(#989FCE 0.5px, transparent 0.5px), radial-gradient(#989FCE 0.5px, #E3E5F2 0.5px);
    background-size: 20px 20px;
    background-position: 0 0,10px 10px;
  width: 100%;

  display: grid;
  grid:
    "lefttop title righttop" 1fr
    "leftbar body rightbar" 8fr
    / 1fr 7fr 2fr;;
  gap: 8px;
}

.topleft { grid-area: topleft; 
      background-color: transparent}
.title { grid-area: title; 
      background-color: transparent;
      color: #1B2F33;
      text-align: center;
      }
.topright { grid-area: topright; 
      background-color:transparent}
.leftbar { grid-area: leftbar; 
      background-color: transparent}
.body { grid-area: body;
      border-radius: 10% 10% 10% 10% / 10% 10% 10% 10%;
      background-color: #989FCE;
      text-align: center;
      color: #1B2F33;
      }
.rightbar { grid-area: rightbar; 
      background-color: transparent}