@import url("./fonts/Nunito.css");
@import url("./fonts/Noto.css");
@import url("./fonts/JetBrainsMono.css");

:root {
    /* fonts */
    --branded: Nunito;
    --emoji: Noto Color Emoji, Noto Sans Symbols;
    --body: Noto Sans, var(--emoji);
    --heading: Noto Sans, var(--emoji);
    --mono: JetBrains Mono, var(--emoji);

    /* defaults */
    color: var(--text);
    background-color: var(--base);
    font-family: var(--body);
    font-size: 10pt;
}

body {
    margin: 0;
    padding: 0;
}

* {
    transition: border-color .2s, box-shadow .2s;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block-start: 1em;
  margin-block-end: .2em;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
  margin-block-start: .2em;
}

h1 {
  font-size: 2.55rem;
}

h2 {
  font-size: 1.75rem;
}

h3 {
  font-size: 1.35rem;
}

h4 {
  font-size: 1.15rem;
}

h5 {
  font-size: 1.05rem;
}

h6 {
  font-size: 1rem;
}

p {
  margin-block-start: .2em;
  margin-block-end: 1em;
}

select,
option,
input,
textarea {
    font-family: var(--body);
    border: 1px solid var(--overlay);
    outline: none;
    padding: .25rem 1rem;
    padding-right: 1rem;
    background-color: var(--base);
    border-radius: .25rem;
}

select:disabled,
option:disabled,
input:disabled,
textarea:disabled {
    opacity: 50%;
}

input:enabled:active,
input:enabled:focus {
    border-color: var(--blue);
}

input:hover,
input:active,
input:focus {
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.05);
}

select {
    transition: border-color .2s, box-shadow .2s;
}

select:enabled:active,
select:enabled:focus {
    border-color: var(--blue);
}

select:hover,
select:active,
select:focus {
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.05);
}

option img {
    display: inline;
    height: 1rem;
    padding: 0 .5rem;
}

button {
    outline: none;
    border: none;
    color: var(--text);
    font-family: var(--body);
    cursor: pointer;
}

svg {
    aspect-ratio: 1/1;
}

pre,
code {
    font-family: var(--mono);
}

code.preview {
    text-wrap: nowrap;
    overflow-x: auto;
    padding: 1rem;
    box-sizing: border-box;
    background: var(--base);
    border: 1px solid var(--overlay);
    border-radius: .5rem;
}

ul {
    margin-block-start: .5em;
    margin-block-end: .5em;
    padding-left: .5em;
}

ul li {
    margin: .5rem 0;
}

ul.procon {
  list-style: none;
}

ul.procon li:before {
    font-weight: bold;
    font-family: var(--emoji);
    padding-right: .5em;
}

ul.procon li.pro:before {
  content: '✓';
  color: var(--green);
}

ul.procon li.con:before {
  content: '✗';
  color: var(--red);
}