:root {
  --bgc: #FFCFEF;
  --borderc: #0dbad9;
  --headerbackgroundc: #0ecff1;
}

@font-face {
  font-family: kiwisoda;
  src: url(../fonts/KiwiSoda.ttf); 
}

@font-face {
  font-family: pixelarg;
  src: url(../fonts/PIXEARG_.TTF); 
}


body {
  background: var(--bgc);
}

.parent {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: minmax(150px, 180px) 1fr 1fr minmax(150px, 180px);
  grid-template-areas: 
  "header header header header"
  "sidebar content content content"
  "sidebar content content content"
  "footer footer footer footer";
}

.header { grid-area: header;}
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

/*individual element*/
#update, #status {
  overflow-y: scroll;
  overflow-x: scroll;
}

.header span {font-size: 8px}
h1, h2, h3, h4 {font-family: "kiwisoda"}
p, li, a, span {font-family: "pixelarg"}
h3 {font-size: 10px;} /*sidebars header size font*/

/*group element*/
.header {
  line-height: 0.3;
  text-align: center;
  font-size: 15px;
}

.content {
  font-size: 10px;
  background: white;
  border: var(--borderc) groove 10px;
  padding: 10px
}

.imageboard {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sidebar {
  font-size: 8px;
  background: white;
  border: var(--borderc) groove 10px;
  padding: 10px;
}

.footer {
  text-align: center;
  font-size: 10px;
}

h2, h3 {
  background: var(--headerbackgroundc);
}

ul {
  overflow-x: auto;
  list-style-type: none;
  padding: 0;
  margin: 0;
}