@font-face {
  font-family: "PixelOperator";
  src: url(/static/PixelOperator-Bold.ttf);
}

html {
  --bg: #000;
  --bg-content: #0008;
  --border: #333;
  --text: #fff;
  --text-light: #999;
  --theme-1: #a0a;
  --theme-2: #f0f;
  --theme-3: #faf;
  color-scheme: dark;
  font-family: PixelOperator;
}

body {
  box-sizing: border-box;
  margin: 0;
  padding: .5rem;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-size: 22px; /* Some characters break with 20px */

  background: var(--bg);
  color: var(--text);
}

#title {
  position: relative;
  margin: 0;
  font-size: 3rem;
  color: var(--theme-1);
  transform: rotate(-3deg) skew(-9deg);
  width: max-content;

  &::before {
    position: absolute;
    top: -2px;
    left: -2px;
    content: "stackxpage";
    background: linear-gradient(to bottom, var(--theme-3), var(--theme-1));
    background-clip: text;
    color: transparent;
  }
}

#sbs {
  flex: 1;
  display: flex;
  gap: 1rem;
}

#navbar {
  display: flex;
  flex-direction: column;
  width: 10rem;
  gap: .5rem;

  a {
    position: relative;
    margin: 0 .5rem;
    padding: .6rem 1rem;
    color: var(--text);
    text-decoration: none;
    transition: padding-left .2s;
    text-shadow: 0 0 5px #000a;

   &::before, &::after {
     position: absolute;
     top: 0;
     left: 0;
     content: " ";
     height: 100%;
     transform: skew(15deg);
     z-index: -1;
   }

   &::before {
     background: var(--theme-1);
     width: 3px;
     transition: left .3s;
   }

   &::after {
     width: 0%;
     background: linear-gradient(to right, var(--theme-1), var(--theme-2));
     transition: width .3s .02s, background .3s;
   }

   &.sel {
     padding-left: 1.3rem;
     &::after {width: 100%}
     &::before {left: calc(100% + 3px); background: var(--theme-2)}
   }
  }

  .sep {
    width: 100%;
    height: 2px;
    background: var(--border);
  }

  .stat {
    display: flex;
    flex-direction: column;

    .hd {color: var(--text-light)}
  }

  .bottom {
    margin-top: auto;
  }
}

#content {
  flex: 1;
  border: 2px solid var(--border);
  padding: 1rem;
  background: var(--bg-content);

  h2:first-child {
    font-size: 2rem;
    &:first-child {margin: 0}
  }

  .post {
    display: inline-block;
    border-left: 2px solid var(--border);
    padding-left: .5rem;
    text-decoration: none;
    transition: border-color .2s;
    color: var(--color);

    h3 {
      margin: 0;
      font-size: 1.6rem;
    }
    .desc {
      margin: .5rem 0;
      font-style: italic;
    }
    &:hover {border-color: var(--theme-3)};
  }

  .sub {
    margin: .2rem 0;
    font-size: .8em;
    color: var(--text-light);
  }

  label {
    display: block;
    margin: .5rem 0;
  }

  .buttons img {
    width: 88px;
    height: 31px;
  }
}

#bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background: linear-gradient(to bottom, #88a, #058, #003);
}

a {
  color: var(--theme-3);
}

.gray {
  color: var(--text-light);
}

/* Themes */

html[data-theme=blue] {
  --theme-1: #028;
  --theme-2: #08a;
  --theme-3: #0af;
}

html[data-theme=orange] {
  --theme-1: #930;
  --theme-2: #c80;
  --theme-3: #ee0;

  a {color: var(--theme-2)}
}

html.mono {
  font-family: monospace;
  font-size: 1rem;
  font-weight: bold;

  body {
    font-size: inherit;
  }

  #title {
    font-size: 2.5rem;
  }
}