@font-face {
  font-family: 'CyberpunkWaifus';
  src: url('CyberpunkWaifus.ttf') format('truetype');
}

:root {
  --rosewater:  #f5e0dc;
  --flamingo:   #f2cdcd;
  --pink:       #f5c2e7;
  --mauve:      #cba6f7;
  --red:        #f38ba8;
  --maroon:     #eba0ac;
  --peach:      #fab387;
  --yellow:     #f9e2af;
  --green:      #a6e3a1;
  --teal:       #94e2d5;
  --sky:        #89dceb;
  --sapphire:   #74c7ec;
  --blue:       #87b0f9;
  --lavender:   #b4befe;
  --text:       #c6d0f5;
  --subtext1:   #b3bcdf;
  --subtext0:   #a1a8c9;
  --overlay2:   #8e95b3;
  --overlay1:   #7b819d;
  --overlay0:   #696d86;
  --surface2:   #565970;
  --surface1:   #43465a;
  --surface0:   #313244;
  --base:       #1e1e2e;
  --mantle:     #181825;
  --crust:      #11111b;

  font-family: 'CyberpunkWaifus', Inconsolata, monospace, sans-serif, 'Noto Color Emoji';
  font-size: 18px;
}

@media all and (min-width:2560px) and (min-height: 1440px) {
  :root {
    font-size: 28px;
  }
}

@media all and (min-width:3840px) and (min-height: 2160px) {
  :root {
    font-size: 38px;
  }
}

html {
  color: var(--text);
  background: var(--base);
  background-image: url('/img/bg.png');
  background-size: 5.5555555rem;
  overflow-x: hidden;
}

body {
  background-color: var(--surface1);
  padding: 20px;
  margin: auto;
}

a,
a:visited {
  color: var(--overlay1);
  font-weight: bold;
  text-decoration: none;
  border-bottom: solid 1px var(--overlay1);
}

a:hover,
a:visited:hover {
  color: var(--rosewater);
  border-bottom: solid 1px var(--rosewater);
}

summary:hover {
  border-radius: 0.4rem;
  background-color: var(--surface2);
}


input[class=button],
input[type="file" i],
input[type="submit" i],
input#file-upload-button {
  background-color: var(--overlay0);
  color: var(--crust);
  border: 1px solid var(--surface0);
  border-radius: 8px;
  font-family: 'CyberpunkWaifus', Inconsolata, monospace, sans-serif;
}

.snac-avatar {
  border-radius: 0.4rem;
}

.snac-post {
  background-color: var(--surface0);
  border: 0 !important;
  border-radius: 0.4rem;
  padding: 0.2rem;
  margin-bottom: 0.5rem;
}

.snac-origin {
  font-style: italic;
}

.snac-children {
  border-left: 2px solid var(--surface1) !important;
  padding-left: 2px;
}

.snac-textarea, input[type=text] {
  background-color: var(--surface1);
  border: 0.1rem solid var(--overlay0);
  color: var(--text);
  border-radius: 2px;
  font-size: 1.1em;
}

.snac-content-attachments {
  width: 40%;
  height: auto;
}

textarea:focus, input:focus {
  outline: none;
  border: 1px solid var(--rosewater);
}

::selection {
  color: var(--crust);
  background-color: var(--rosewater);
}

blockquote:before {
  content: "> "
}