* {
  box-sizing: border-box;
}
html {
  scrollbar-gutter: stable;
}
body {
  font-family: sans-serif;
  background-color: #f4f4f4;
  color: #333;
  margin: 0;
  padding: 0;

  --text-color: #000;
  --secondary-text-color: #727272;
  --top-panel-height: 48px;
}
body.no-scroll {
  overflow: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}
p {
  margin: 0;
  padding: 0;
}
a {
  font-size: 12px;
  text-decoration: none;
}
a:hover {
  text-decoration: underline !important;
}
.container {
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
}
.top-panel-margin {
  margin-top: calc(var(--top-panel-height) + 16px);
}
time {
  color: var(--secondary-text-color);
  font-size: 10px;
}

/* DESKTOP */

@media (min-width: 1280px) {
  body {
    --aside-width: 192px;
    --main-width: 672px;
    --gap: 32px;
    --container-width: 1216px;
    --scrollbar-width: 4px;
    --side-space: calc(
      (100vw - var(--container-width) - var(--scrollbar-width)) / 2
    );
  }
  .style-scrollbar {
    scrollbar-gutter: stable;
  }
  .style-scrollbar::-webkit-scrollbar {
    width: var(--scrollbar-width);
  }
  .style-scrollbar::-webkit-scrollbar-track {
    width: var(--scrollbar-width);
    background-color: transparent;
  }
  .style-scrollbar::-webkit-scrollbar-thumb {
    width: var(--scrollbar-width);
    background-color: lightgray;
  }
  .container {
    max-width: var(--container-width);
  }
  .desktop-view > aside {
    position: fixed;
    overflow: auto;
    height: 100vh;
    width: var(--aside-width);
  }
  .desktop-view > aside:first-of-type {
    position: fixed;
    overflow-y: scroll;
    height: 100vh;
    width: var(--aside-width);
  }
  .desktop-view > main {
    max-width: var(--main-width);
    margin-inline: auto;
  }
  .desktop-view > aside:last-of-type {
    left: calc(var(--side-space) + var(--container-width) - var(--aside-width));
    top: calc(var(--top-panel-height) + 16px);
  }
}

/* END DESKTOP */