muntineer.css

/*
  This file is part of muntineer, which visualizes window-pane algebra.

  Copyright (c) 2021 Eliah Kagan

  Permission to use, copy, modify, and/or distribute this software for any
  purpose with or without fee is hereby granted.

  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
  PERFORMANCE OF THIS SOFTWARE.
*/

html {
  font-size: 1.4em;
  text-rendering: optimizeLegibility;
}

body {
  background-color: #fefefe;
  font-family: 'Selawik', 'Segoe UI', 'Roboto', '-apple-system', 'BlinkMacSystemFont', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 300;
  margin: 0 auto;
  max-width: 40rem;
  padding: 0 10px;
}

h1 {
  font-weight: 400;
  letter-spacing: .05em;
  margin-bottom: 0;
}

main {
  margin-top: 1.5rem;
}

form {
  margin-left: .25rem;
}

fieldset {
  border: 3px dotted transparent;
  margin: .65rem;
  padding: .1rem;
  width: max-content;
}

fieldset.bad {
  border-color: red;
}

@media (max-width: 400px) {
  body {
    padding: 0 5px;
  }

  form, fieldset {
    margin-left: 0;
  }
}

label {
  float: left;
  width: 11rem;
}

input, .result {
  font-family: 'IBM Plex Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 400;
}

input {
  font-size: 1rem;
  text-align: right;
  width: 3.5rem;
}

fieldset.bad>input {
  color: red;
}

svg {
  border: 4px dotted #00d000;
  padding: 1px;
}

svg.bad {
  border-color: red;
}

b {
  font-weight: 400;
}

.github-fork-ribbon::after {
  font-family: 'Selawik', 'IBM Plex Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  letter-spacing: .03em;
}

.katex {
  color: #444444;
  font-size: 1.1em;
}

.status {
  color: green;
  font-size: .9rem;
  font-weight: 400;
  margin-top: 0;
}

.status.bad, .status.bad .katex {
  color: darkred;
}

.status.bad .katex {
  font-size: 1.16em;
  vertical-align: 2%;
}

.result {
  background-color: white;
  border: 1px dotted gray;
  border-radius: 2px;
  color: green;
  font-size: 1.05rem;
  vertical-align: -5%;
}

.result.bad {
  color: red;
}