html {
  scroll-behavior: smooth; }


body {
  min-height: 100dvh;
  margin: 0;
  display: flex;
  flex-direction: column; }
@media (max-width: 999px){
  body {
    background: light-dark(#f5f5f5, #121212); } }
@media (min-width: 1000px){
    body {
      background: light-dark(#e0e0e0, #2c2c2c); }
    body:has(> div > main){
      background-image: url("/ui/pattern.png");
      background-size: 120px 120px; }
    body > div > main > center {
      box-shadow: 0px 0px 5px 1px black;
      border-radius: 5px;
      margin: 3em auto;
      width: min(100% - 1em, 900px); } }


body > div > main {
  min-height: 100dvh;
  position: relative; }
body > div > main > center {
  overflow: auto;
  min-height: min(50vh, 800px);
  /*position: relative;*/
  background: var(--body);
  
  min-width: 0;
  box-sizing: border-box;
  text-align: start !important;
  margin-inline: auto; }