@font-face {
  font-family: "Raleway";
  src: url("/raleway.ttf");
}
:root {
  --blue: #A288E3;
  --black: #121212;
  --gray: #777777;
  --white: #C1B098;
  --green-tea: #999B85;
  --faded-green-tea: rgba(153, 155, 133, 0.5);
  --black-tea: #4C1208;
  --faded-black-tea: rgba(76, 18, 8, 0.3);
  --milk-tea: #dac395;
  --red-tea: #a13d2d;
  --red: var(--red-tea);
  --green: var(--green-tea);
  --fgc: var(--black-tea);
  --bgc: var(--green-tea);
  --emphasis: var(--milk-tea);
}
.darkmode,
.darkmode * {
  border-color: var(--gray);
  shadow-color: var(--white);
  color: var(--white);
  /* background-color: var(--black); */
  --bgc: var(--black-tea);
  --fgc: var(--green-tea);
  --emphasis: var(--red-tea);
}
.emphasis {
  background-color: var(--emphasis);
}
.superscript {
  font-size: 50%;
  vertical-align: super;
}
html {
  overflow-y: hidden;
}
body * {
  color: var(--fgc);
}
body {
  min-height: 100vh;
  font-size: 150%;
  background-color: var(--bgc);
}
@media (max-width: 400px) {
  body {
    font-size: 100%;
  }
}
.right {
  float: right;
}
.left {
  float: left;
}
.center {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}
.vcenter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.nowrap {
  white-space: nowrap;
}
#thepage > header {
  border-bottom: 1px;
  line-height: 200%;
}
header {
  border-bottom: 1px;
}
#message-container {
  position: absolute;
  top: 1em;
  right: 1em;
}
#message-container .message {
  padding: 1em;
  border: 1px solid var(--fgc);
  border-radius: 5px;
  background-color: var(--green);
  color: var(--black);
  margin-bottom: 1em;
}
#message-container .message * {
  color: var(--black);
  font-weight: bold;
}
div.timer {
  position: relative;
  height: 300px;
  width: 300px;
}
.notransition {
  transition: 0s !important;
}
.timer .darkmode circle {
  stroke: var(--red-tea);
}
.timer circle {
  stroke: var(--milk-tea);
}
.timer circle {
  transition: 1s linear stroke-dasharray, 0.1s linear stroke;
  transform: rotate(-90deg);
  transform-origin: center;
}
.theborder {
  transition: 1s linear all;
}
#settings-dialogue {
  /* border: 1px solid black; */
  padding: 0.5em;
  border-radius: 5px;
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
  width: 50vw;
}
@media (max-width: 930px) {
  #settings-dialogue {
    width: 75vw;
  }
}
@media (max-width: 600px) {
  #settings-dialogue {
    width: 100vw;
  }
}
dialog header {
  padding-bottom: 0.5em;
  display: flex;
  justify-content: space-between;
}
dialog header button {
  border: none;
  padding: 0;
  background-color: transparent;
  stroke: var(--fgc);
}
#quickbar {
  position: absolute;
  top: 0;
  left: 0;
}
#quickbar button {
  /* display: block; */
  border: none;
}
@media (max-width: 660px) {
  #quickbar button:not(#open-settings) {
    display: none;
  }
}
#settings-dialogue,
#preset-editor {
  padding: 0.5em;
  margin: 0.5em;
  /* border: 1px; */
  /* box-shadow: 5px 5px 0px 0px; */
  border-radius: 5px;
  top: 2em;
}
.feather {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.darkmode .feather {
  stroke: white;
}
#preset-editor #textarea-container {
  border: 1px solid var(--gray);
  padding: 1em;
  margin: 1em auto;
  border-radius: 7px;
}
#preset-editor #textarea-container textarea {
  background-color: var(--bgc);
  font-family: monospace;
  margin: 0;
  width: 100%;
  min-height: 10em;
  border: none;
}
#timer {
  margin: auto;
  display: block;
  display: flex;
  flex-direction: column;
}
#timer #remaining-time {
  margin-top: 20px;
  font-size: 3em;
  text-align: center;
}
#timer #remaining-time span {
  font-size: 75%;
}
#timer #remaining-time span:not(:last-child) {
  margin-right: 0.5ch;
}
#timer button {
  position: fixed;
  bottom: 0;
  left: 50vw;
  transform: translateX(-50%);
  border: none;
  text-transform: uppercase;
  font-size: 75%;
}
#timer #steep-counter {
  margin-bottom: 2em;
}
#timer-complete {
  display: block;
  text-align: center;
}
*.flex {
  display: flex;
  justify-content: space-between;
}
.flex.center {
  justify-content: center;
  align-items: center;
}
*.card {
  padding: 0.5em;
  margin: 0.5em;
  /* border-radius: 5px; */
}
button {
  padding: 0.5em;
  margin: 0.5em;
  border: 1px solid gray;
  border-radius: 5px;
  cursor: pointer;
}
*.danger {
  color: var(--white);
  background-color: var(--red);
}
*.success {
  color: var(--white);
  background-color: var(--green);
}
*.yellow {
  color: var(--white);
  background-color: var(--blue);
}
#settings-dialogue span {
  float: left;
}
#settings-presets > button {
  padding: 0;
  position: relative;
}
#settings-presets h2 {
  text-align: center;
  /* border-top: 1px solid; */
  margin-top: 1em;
  padding-bottom: 0.25em;
  padding-top: 0.75em;
}
#set-dialogue {
  width: 80vw;
}
#set-dialogue p {
  text-align: center;
}
#set-dialogue > header > p#current-time {
  font-size: 150%;
}
#set-dialogue > * {
  padding: 0.5em;
}
#set-dialogue .choices {
  width: 100%;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
#set-dialogue .choices button {
  padding: 0;
  font-size: 85%;
}
#set-dialogue .choices button * {
  padding: 0.5em;
}
#set-dialogue button span {
  float: left;
}
/* #set-dialogue #manual-timer-set  p { */
/*     display: inline; */
/* } */
span.hint {
  background-color: var(--green);
  color: var(--black);
  border-right: 2px solid black;
  float: left;
  top: 0;
  left: 0;
}
.blink {
  animation: blinker 1.5s infinite;
}
@keyframes blinker {
  from {
    opacity: 1;
  }
  10% {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}
* {
  outline: none;
  font-family: "Raleway", sans;
  font-weight: light;
}
h1 {
  /* font-weight: bold; */
  text-align: center;
  font-size: 2em;
}
h2 {
  text-align: center;
}
#pagetitle {
  margin-top: 0.5em;
}
#pagetitle button {
  padding: 0;
  border: none;
}
#welcome {
  align-items: center;
  justify-content: center;
  text-align: center;
  width: fit-content;
  overflow-wrap: break-word;
  max-width: 100vh;
  padding: 1ch;
}
#welcome p {
  margin-bottom: 1em;
}
#welcome .number-input span {
  font-size: 2em;
}
#welcome .number-input button {
  display: block;
  width: 100%;
  margin-top: 1em;
  background-color: var(--emphasis);
}
.number-input {
  vertical-align: middle;
}
.number-input * {
  display: inline-block;
}
@media (max-width: 700px) {
  .number-input span {
    white-space: normal;
  }
}
.number-input button {
  margin: 0;
}
.number-input input {
  vertical-align: baseline;
  box-sizing: content-box;
  padding: 0 0.5ch;
  border: 0;
  background-color: var(--bgc);
}
#reset-dialogue {
  width: fit-content;
  text-align: center;
}
#reset-dialogue .number-input {
  font-size: 2em;
}
#reset-dialogue .number-input button {
  padding: 0.3em;
}
#reset-dialogue .number-input span:first-child {
  padding-top: 1em;
  margin-right: 0.5ch;
}
#reset-dialogue p#steeps {
  margin-top: 2em;
  font-size: 75%;
}
.number-input-old {
  display: inline-block;
  position: relative;
  vertical-align: text-bottom;
  padding-right: calc(1ch + 10px);
}
.number-input-old input {
  text-align: right;
  border: 0;
  max-width: 2em;
  background-color: var(--bgc);
}
.number-input-old label {
  display: inline-block;
  vertical-align: bottom;
  /* line-height: 2em; */
  padding-bottom: 0.5em;
  background-color: var(--bgc);
}
.number-input-old::after {
  content: 's';
  position: absolute;
  right: -5px;
  bottom: 0;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.darkmode ::placeholder {
  color: var(--faded-green-tea);
}
::placeholder {
  color: var(--faded-black-tea);
}