/* reset */
*:where(:not(iframe, canvas, img, svg, video):not(svg *)) {
  all: unset;
  display: revert;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
ol,
ul {
  list-style: none;
}
img {
  max-width: 100%;
}
table {
  border-collapse: collapse;
}
textarea {
  white-space: revert;
}
/* /reset */

body {
  font-family: "Share Tech Mono", Times, serif;
  font-size: 20px;
  line-height: 1.5rem;
}

:root {
  --main-width: 590px;
  --main-padding: 30px 20px;
  --main-margin: 40px;
}

main {
  width: var(--main-width);
  padding: var(--main-padding);
  margin: var(--main-margin);
  border: 2px solid black;
  box-shadow: 6px 6px 0px black;
  background-color: #d4cfff;
}

section {
  margin-bottom: 40px;
}

section:last-child {
  margin-bottom: 0px;
}

p {
  margin-bottom: 10px;
}

p:last-child {
  margin-bottom: 0px;
}

input {
  background-color: white;
  padding: 5px 7px;
  border: 1px solid black;
}

a.button,
button {
  background-color: white;
  padding: 5px 7px;
  cursor: pointer;
  border: 1px solid black;
}

a:not(.button) {
  /* color: rgb(255, 0, 187); */
  text-decoration: underline;
  cursor: pointer;
}

.title {
  font-weight: bold;
}

#flash:not(.visible) {
  display: none;
}

#flash {
  border: 1px solid black;
  background: rgb(210, 255, 210);
  width: var(--main-width);
  padding: var(--main-padding);
  margin: var(--main-margin);
  border: 2px solid black;
}

#flash.failure {
  background: rgb(255, 210, 210);
}