body {
  font-family: "Nunito", sans-serif;
  margin: 0 auto;
  background-color: #08031a;
}

@font-face {
  font-family: Milku;
  src: url('https://files.catbox.moe/0d7x29.otf');
}

@font-face {
  font-family: Nunito;
  src: url('https://files.catbox.moe/vgeptc.ttf')
}


h1 {
  font-family: Milku
}

.container {
  display: grid;
  grid-template-columns: 0.5fr 1.8fr 0.3fr;
  grid-template-rows: 0.5fr 2.3fr 0.2fr;
  gap: 3px 3px;
  max-width: 1300px;
  grid-auto-flow: row;
  margin: 0 auto;
  grid-template-areas:
    "header header header"
    "leftside main rightside"
    "footer footer footer";
}

.header {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  width: auto;
  background-color: #f7679a;
  height: 125px;
  padding: 20px;
  border-radius: 10px;
  border: 2px solid #fc92b9;
  box-shadow: inset 2px 3px 5px #fc92b9;
  grid-template-areas: ".";
  grid-area: header;
}

.leftside {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1.5fr 0.5fr;
  gap: 3px 0px;
  grid-auto-flow: row;
  background-color: #f7679a;
  width: auto;
  padding: 5px;
  font-size: smaller;
  border-radius: 10px;
  border: 2px solid #fc92b9;
  box-shadow: inset 2px 3px 5px #fc92b9;
  height: 500px;
  overflow: auto;
  grid-template-areas:
    "nav"
    "extraleft";
  grid-area: leftside;
}

.nav {
  grid-area: nav;
}

.extraleft {
  grid-area: extraleft;
}

.leftside h1 {
    text-align: center;
}

.main {
  grid-area: main;
  background-color: #ff94bb;
  border-radius: 10px;
  border: 2px solid #ffc3d9;
  box-shadow: inset 2px 3px 5px #ffc3d9;
  padding: 10px;
}

.rightside {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1.4fr 0.8fr 0.8fr;
  gap: 3px 0px;
  grid-auto-flow: row;
  background-color: #f7679a;
  width: auto;
  padding: 20px;
  font-size: smaller;
  border-radius: 10px;
  border: 2px solid #fc92b9;
  box-shadow: inset 2px 3px 5px #fc92b9;
  height: 500px;
  overflow: auto;
  grid-template-areas:
    "update"
    "todo"
    "extraright";
  grid-area: rightside;
}

.update {
  grid-area: update;
}

.todo {
  grid-area: todo;
}

.extraright {
  grid-area: extraright;
}

.footer {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  background-color: #f7679a;
  padding: 5px;
  border-radius: 10px;
  border: 2px solid #fc92b9;
  box-shadow: inset 2px 3px 5px #fc92b9;
  grid-template-areas: ".";
  grid-area: footer;
  text-align: center;
}

*{
  cursor: url(https://cur.cursors-4u.net/cursors/cur-9/cur265.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2011/12/01/light-pink-pointer.html" target="_blank" title="Light Pink Pointer"><img src="https://cur.cursors-4u.net/cursor.png" alt="Light Pink Pointer" style="position:absolute; top: 0px; right: 0px;"/></a>
}