:root {
  --bg1: #1e1f1c;
  --bg2: #272822;
  --fg1: #f8f8f2;
  --fg2: #99947c;

  --red: #f92672;
  --orange: #e78c69;
  --yellow: #e2e22e;
  --green: #a6e22e;
  --cyan: #66d9ef;
  --blue: #819aff;
  --purple: #ae81ff;

  --color-1: var(--green);
  --color-2: var(--orange);
  --color-3: var(--cyan);
  --color-4: var(--red);
  --color-5: var(--purple);
  --color-6: var(--yellow);
  --color-7: var(--blue);

  --block-color: var(--fg1);

  --font-size: small;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Victor Mono", monospace;
  font-size: var(--font-size);
  font-weight: 200;

  background: var(--bg1);
  color: var(--fg1);

  display: flex;
  flex-wrap: wrap;
  padding: 0 0 calc(3ch - 1px) 0;

  cursor: default;
}

.block {
  background-color: var(--bg2);
  border: 1px solid var(--fg2);
  outline: 1ch solid var(--bg1);

  padding: 1ch 1ch 1cap 1ch;
  margin: calc(3ch - 1px) 0 0 calc(3ch - 1px);
  max-width: min(var(--block-width), calc(100vw - 8ch));
  width: fit-content;
  height: min-content;

  transition: border 0.2s;

  &:hover {
    border: 1px solid var(--block-color);
  }

  &:last-of-type {
    margin: calc(3ch - 1px) 0 calc(3ch - 1px) calc(3ch - 1px);
  }
}

h1 {
  font-weight: 700;
  font-style: italic;
  font-size: var(--font-size);

  color: var(--block-color);
}

.separator {
  width: 100%;
  height: 1px;

  margin: calc(1cap - 1px) 0 calc(1cap - 1px) 0;

  background-color: var(--fg2);
  transition: background-color 0.2s;

  .block:hover & {
    background-color: var(--block-color);
  }
}

p:not(:last-child) {
  margin-bottom: 1cap;
}

.quiet {
  color: var(--fg2);
}

a {
  font-style: italic;
  text-decoration: underline wavy transparent 1px;

  color: var(--block-color);

  transition: text-decoration 0.2s;

  &:hover {
    text-decoration: underline wavy var(--block-color) 1px;
  }

  #badges & {
    font-size: 0;
  }
}

#sticker {
  width: 100%;
}

.circle {
  position: fixed;

  border-radius: 50%;
  border: 1px solid var(--fg2);

  z-index: -1;

  transition: border 0.2s;
}

.doHueRotate {
  animation: hueRotate 0.5s ease-out;
}

@keyframes hueRotate {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

#icon, .prideflag, #sticker, #badges img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}