@import "view.css";
@import "cards.css";
@import "form.css";
@import "write.css";
@import "error.css";
/* @import "debug.css"; */

:root {
  --content-width: min(100% - 2.4rem, 96ch);
  /* 5px auto Highlight */
  --focus-border-color: rgb(0, 122, 255);
  --focus-border-radius: .2rem;
  --focus-outline-color: rgb(192, 227, 252);
  --focus-outline-offset: 2px;
  --focus-outline-style: solid;
  --focus-outline-width: 2px;
  --focus-outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
  --font-small: 1.2rem;
  --gap: 2.4rem;
  --gap-half: 1.2rem;
  --gap-quarter: .6rem;
  --gap-eight: .3rem;
  --profileimg-size: 4rem;
  --profileimg-size-half: 2rem;
  --profileimg-size-quarter: 1rem;
}
@media (orientation: portrait) {
  :root {
    --content-width: 100%;
  }
}

::selection {
  background: #ff79f9;
  color: #fff;
}

:where([hidden]) {
  display: none !important;
}

@media (prefers-color-scheme: light) {
  html {
    --color: rgb(93, 93, 93);
    --color-accent: rgb(130, 130, 130);
    --color-danger: #0e0e0e;
    --bgcolor: #fff;
    --bgcolor-nav: gainsboro;
    --bgcolor-accent: #7badfc;
    --bgcolor-danger: rgb(225, 40, 40);
    --bgcolor-danger-input: rgba(255 255 255 / .85);
    --bgcolor-inactive: #bababa;
    --bgcolor-textinput: #fff;
  }
}

@media (prefers-color-scheme: dark) {
  html {
    --color: #e3e3e3;
    --color-accent: #828282;
    --color-danger: #e3e3e3;
    --bgcolor: #101010;
    --bgcolor-nav: rgb(31, 22, 51);
    --bgcolor-accent: rgb(16, 93, 176);
    --bgcolor-danger: rgb(169, 0, 0);
    --bgcolor-danger-input: rgba(0 0 0 / .5);
    --bgcolor-inactive: #202122;
    --bgcolor-textinput: #0e0e0e;
  }

  img {
    opacity: .75;
    transition: opacity .5s ease-in-out;
  }
  img:hover {
    opacity: 1;
  }
}

html {
  font-size: 62.5%;
  line-height: 1;
}

body {
  background-color: var(--bgcolor);
  color: var(--color);
  font-size: 1.6rem;
  line-height: 1.375;
  word-break: break-word;
}
@media (orientation: portrait) {
  body {
    font-size: 1.4rem;
    line-height: 1.5;
  }
}

html, body {
  min-height: 100%;
  height: 100%;
  margin: 0;
}

h1, h2, h3, h4, h5 { font-weight: normal; }

body,
button,
input,
select,
textarea {
  font-family: sans-serif;
}

small,
time {
  font-size: var(--font-small);
  line-height: 1.25;
}

canvas,
img {
  max-width: 100%;
}

.text {
  padding: 0 var(--gap);
}

.danger {
  background-color: var(--bgcolor-danger);
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:focus {
  border-radius: var(--focus-border-radius);
  outline: var(--focus-outline);
  outline-offset: 0;
}
a:visited {
  color: #8377ce;
}
nav a:visited {
  color: inherit;
}

img[alt] {
  font-size: .9rem;
  text-align: center;
  word-break: break-all;
}

pre {
  margin: 0;
  padding: 0;
}

dl {
  display: grid;
  grid-row-gap: var(--gap-half);
  grid-template-columns: max-content auto;
}

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}