/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: black;
  font-size: 20px;
  height: 100dvh;
  padding: 1.25rem;
  box-sizing: border-box;
  color: white;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
  margin: 0;
  display: flex;
  flex-direction: column;
}

header h2 {
  text-align: center;
}

nav {
  top: 0;
  width: 70%;
  padding: 4px 6px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-evenly;
}

nav a {
  color: darkgray;
}

.layout {
  display: grid;
  flex: 1;
  width: 100%;
  z-index: 1;
  min-height: 0;
  grid-template-columns: 30% 40% 30%;
  grid-template-rows: 2fr 1fr 2fr;
  grid-template-areas:
    "left header right"
    "left main right"
    "left footer right";
}

.header {
  grid-area: header;
  border: 0px solid red;
  box-sizing: border-box;
  justify-content: flex-end;
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.main {
  border: 0px solid blue;
  box-sizing: border-box;
  grid-area: main;
  justify-self: center;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.footer {
  border: 0px solid green;
  box-sizing: border-box;
  grid-area: footer;
  justify-self: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.footer p {
  margin: 0;
}

.sidebar {
  width: 80%;
  min-height: 60%;
  box-sizing: border-box;
  justify-self: center;
  align-items: center;
  align-self: center;
  display: flex;
  justify-content: center;
  border: 0px solid maroon;
}

.sidebar-left {
  grid-area: left;
}

.sidebar-right {
  grid-area: right;
}

#canvas {
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  align-self: flex-start;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}