/* Main styles */

* {
  box-sizing: border-box;

  --color-primary: light-dark(black, white);
  --color-secondary: gray;
  --color-background: light-dark(#f9f9f9, darkgray);
  --color-accent: #ff4f00;

  --fonts-monospace: "Inconsolata", -ui-monospace, "Cascadia Mono",
    "Segoe UI Mono";

  --padding-main: clamp(2rem, 14%, 6rem);
}

html,
body {
  background-color: var(--color-background);
  min-height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--padding-main);
  padding-bottom: 0;
  font-family: var(--fonts-monospace), sans-serif;
  color: #000;

  animation: fadeIn 500ms;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


button {
  font-family: var(--fonts-monospace);
  background-color: var(--color-background);
  color: var(--color-secondary);
  border: solid 1pt var(--color-secondary);
  border-radius: 2pt;

  padding: 0.8ch;
}

/* Editor */

.editor {
  width: clamp(100%, 100%, 80ch);
  max-width: 80ch;
  height: 100%;
  resize: none;
  padding-bottom: 5lh;
  margin: 0;

  font-family: var(--fonts-monospace), monospace;
  font-size: 1.2rem;
  line-height: 1.6;
  font-weight: 400;

  --wght: "wght" 400;
  --wdth: "wdth" 100;
  font-variation-settings: var(--wght), var(--wdth);

  word-wrap: break-word;
  border: 0;
  outline: 0;
  transition: all 400ms;
  background: transparent;
  color: var(--color-primary);
  caret-color: var(--color-accent);
}

.editor:focus,
.editor:focus-visible {
  transition: all 400ms;
  color: var(--color-primary);
  --wdth: "wdth" 100;
  font-variation-settings: var(--wght), var(--wdth);
}

.editor::spelling-error {
  text-decoration-color: var(--color-primary);
  text-decoration-style: underline dotted;
}

.editor::grammar-error {
  text-decoration-color: var(--color-primary);
  text-decoration-style: underline double;
}

*.hidden {
  display: none;
}

*::selection {
  background-color: var(--color-secondary);
  color: var(--color-background);
}