:root {

  --max-width: 580px;
  --body-margin: 0 auto;
  --body-padding: 0 10px;
  --header-margin: 0 auto;
  --header-padding: 10px 10px 0;
}

*,
:before,
:after {
  box-sizing: border-box
}

body {
  margin: 0;
  padding: 0;
  font-family: system-ui, sans-serif;
  font-size: 17px
}

/***** COSMETIC *****/

/* links */

a:not(.button) {
  text-decoration: none;
  border-bottom: 1px solid;
  color: #0070f3;
}

a:not(.button):is(:hover, :active, :focus) {
  color: inherit;
}

a:not(.button).normal {
  color: inherit
}

a.plain {
  color: inherit;
  border-bottom: 1px dashed;
}

a.plain:hover {
  border-bottom: 1px solid;
}

a.external::after {
  content: '↗';
  font-family: monospace;
  margin-inline-start: 3px;
}

/* hr */

hr {
  border: 0;
  border-top: 1px solid;
  margin-bottom: 20px
}

/***** LAYOUT *****/

/* main is a container */

main {
  max-width: var(--max-width);
  margin: var(--body-margin);
  padding: var(--body-padding);
  margin-bottom: 100px
}

/***** COMPONENTS *****/

/** container */

div.container {
  max-width: var(--max-width);
  margin: var(--body-margin);
  padding: var(--body-padding)
}

/** badge */

.badge {
  padding: 0 5px;
  border-radius: 5px;
  font-weight: 500;
  font-size: .8em;
  color: #ab570a;
  background-color: #ffefcf;
  border: 1px solid #f5a623
}

/** button */

button,
.button {
  color: inherit;
  text-decoration: none;
  font-size: 14px;
  background-color: transparent;
  border: 1px solid #999;
  padding: 5px 10px;
  border-radius: 3px;
  font-family: inherit;
  cursor: pointer
}

button:hover,
.button:hover,
button:active,
.button:active,
button:focus,
.button:focus {
  border-color: currentColor
}

button[disabled],
.button[disabled] {
  background-color: #eee !important;
  border-color: #eee !important;
  color: inherit !important;
  cursor: not-allowed
}

button.delete,
.button.delete {
  border-color: #f7d4d6;
  color: #c50000
}

button.delete:not(.outline),
.button.delete:not(.outline) {
  background-color: #f7d4d6
}

button.delete:hover,
.button.delete:hover,
button.delete:active,
.button.delete:active,
button.delete:focus,
.button.delete:focus {
  border-color: #c50000
}

/** input */

.input {
  margin-bottom: 30px
}

.input .label {
  margin-bottom: 5px
}

.input input,
.input textarea,
.input select {
  border-radius: 3px;
  background-color: #e9e9e9;
  border: 0;
  padding: 5px;
  width: 100%;
  border: 2px solid transparent;
  font-family: inherit;
  outline: 0
}

.input input:active,
.input textarea:active,
.input select:active,
.input input:focus,
.input textarea:focus,
.input select:focus {
  border-color: #000
}

.input .error,
.input .info {
  font-size: small
}

.input .error {
  color: #c50000
}

.input textarea {
  resize: vertical
}

/** link list */

ul.link-list {
  padding: 0;
  display: flex;
  gap: 1em;
  list-style: none;
}

/** flash */

.flash {
  padding: 5px 10px;
  border: 2px solid;
  border-radius: 5px;
}

.flash.error {
  background-color: blanchedalmond;
  border-color: burlywood;
}

.flash.success {
  border-color: #008b64;
  background-color: #008b64;
  color: white;
}

/** header */

.title {
  display: flex;
  align-items: center;
  gap: .4em;
}

.title .badge {
  font-size: .6em;
}

/** countdown */

.countdown {
  font-feature-settings: "tnum";
}