.wrapper {
      height: 100vh;
      overflow: hidden;
      display: grid;
      grid-gap: 0;
      grid-template-areas:
          "header header"
          "sidebar content"
          "footer footer"
  }

  .sidebar {
      grid-area: sidebar;
  }

  .content {
      grid-area: content;
  }

  .header {
      grid-area: header;
  }

  .footer {
      grid-area: footer;
  }

  /* Set editor dimensions */
  #editor {
      height: 90%;
      max-width: 100%;
      overflow: hidden;
  }

  /* Stretch editor to fit inside its containing div */
  .cm-editor {
      height: 100%;
      width: 100%;
      overflow: auto;

  }

  .container {
      display: grid;
      grid-template-rows: auto 1fr auto;
      min-height: 100vh;
  }


  /* Tablet view */
  @media (min-width: 768px) {
      .main-layout {
          grid-template-columns: 1fr 1fr;
          /* Two columns for sidebars */
      }
  }

  /* Desktop view */
  @media (min-width: 1024px) {
      .main-layout {
          grid-template-columns: 200px 1fr 200px;
          /* Fixed sidebars, fluid main */
      }
  }

  body {
      margin: 0;
      font-family: 'Roboto', sans-serif;
  }

  .left-sidebar,
  .right-sidebar {
      background-color: var(--surface);
      /* Use BeerCSS surface color */
  }

  main {
      background-color: var(--background);
      /* Main content background */
  }