:root {
  --color: #ffc0cb;
  --window-bg: #ffc0cb;
  --wallpaper: #ff8d4d;
  --side-window-border: 5px black solid;
  font-size: 20px;
  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
  line-height: 1.45;
}

html {
  background: linear-gradient(-60deg, #7f4b16, #422c15);
  min-height: 100%;
}

.box-inset {
  display: grid;
  margin: 50px;
  background: url("../assets/images/background-q.png") var(--wallpaper);
  /* TODO: global or just for index? but also background hmm */
  /* necessary for missing texture lol */
  image-rendering: pixelated;

  border-radius: 10px;
  padding-top: 50px;

  @media screen and (width < 800px) {
    margin: 20px;
    padding-top: 30px;
  }
}

.index-layout {
  --horizontal-gutter: 20px;
  grid-template-areas:
    ". center . ."
    ". center right-top ."
    ". center right-middle ."
    ". center right-bottom ."
    ". center . ."
    "footer footer footer footer";
  grid-template-columns: var(--horizontal-gutter) 1.5fr minmax(0, 1fr) var(--horizontal-gutter);
  grid-template-rows: minmax(0, 0.3fr) fit-content(200px) repeat(2, minmax(0, 1fr)) minmax(0, 0.3fr) fit-content(100px);

  @media screen and (width < 800px) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(4, auto) fit-content(100px);

    grid-template-areas:
      "center"
      "right-top"
      "right-middle"
      "right-bottom"
      "footer";
  }

  @media screen and (width < 800px) {
    margin: 0;
  }
}

.window-decor {
  border-left: var(--side-window-border);
  border-right: var(--side-window-border);
  border-bottom: var(--side-window-border);

  @media screen and (width < 800px) {
    border: 0;
  }
}

.left {
  grid-area: left-aside;
}

.center-narrow {
  grid-area: center;
  background-color: #ffdddd;
}

.portrait {
  float: right;
  width: 250px;
  height: auto;
  margin: 20px;

  @media screen and (width < 800px) {
    float: none;
    display: block;
    width: 100%;
    margin: auto;
  }
}


.bottom-spread {
  /* TODO: placement of nix store text */
  grid-area: footer;
  background-color: gray;
  text-align: right;
}

.window {
  background: var(--window-bg);
  filter: drop-shadow(5px 5px 5px black);
  margin: 20px;
  padding: 20px;
}

.now-listening {
  --winamp-border: 3px #545364 solid;
  grid-area: right-middle;
  background: radial-gradient(#363555, #10101A);
  color: white;
  text-align: center;
  border: var(--winamp-border);

  h2 {
    font-size: 0.9rem;
    margin: 0;
    text-transform: uppercase;
  }

  ol {
    text-align: left;
    background: black;
    border: var(--winamp-border);
    color: #0ad60b;
    margin: 8px 0px;
    padding-left: 20px;
  }

  li {
    overflow: hidden;
    text-overflow: ellipsis;
    list-style: decimal inside;
    white-space: nowrap;

    &:last-of-type {
      color: white;
    }
  }
}

.badges {
  grid-area: right-bottom;
}

.badge-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  a {
    padding: 5px;
  }
}

.weblog {
  grid-area: right-top;
}