body {
    background-image:url("/images/BG.jpg");
    background-size: cover;
}
.box {
    max-width: 1000px;
    margin: 50px auto;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 2fr 1fr;
}

nav {
    grid-row: 1/2;
    grid-column: 1/4;
}

.navtabs {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

header {
    grid-row: 2/3;
    grid-column: 1/4;
}

.header-gif {
    width: 100%;
    height: auto;
    display:block;
}

.left-bar {
    background: rgba(255, 255, 255, 0.3);
    grid-row: 3/4;
    grid-column: 1/2;
    height: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border: white 2px solid;
}

main {
    grid-row: 3/4;
    grid-column: 2/3;
    height: max-content;
}

.right-bar {
    grid-row: 3/4;
    grid-column: 3/4;
    height: max-content;
}

footer {
    grid-row: 4/5;
    grid-column: 1/4
}

.smallheading {
  display: inline-block;
  background: #f5d0e4;
  padding: 0.25em 1em;
  border-radius: 0.5em;
}
  .pixel-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      justify-items: center;
      align-items: center;
      margin-top: 15px;
  }
  .pixel-grid img {
    image-rendering:pixelated;
    max-width: 100%;
    height: auto;
  }