:root {
  --base-size: 1.125rem;
  --border-radius: calc(5em / 16);
  --border-width: calc(var(--base-size) / 16);
  --brand-gradient-angle: 114deg;
  --color-background: #fbfbfb;
  --color-border: #ccc;
  --color-danger: var(--color-primary);
  --color-primary: #f35;
  --color-secondary: #0ca;
  --color-success: var(--color-secondary);
  --color-text: Black;
  --color-white: White;
  --duration-300: 300ms;
  --small: calc(2em / 3);
  --page-font-size: var(--base-size);
  --page-padding: var(--base-size);
  --page-max-width: calc(48 * var(--base-size));
  --stroke-width: 1.75;
}

@media (min-width: 48rem) {
  :root {
    --base-size: 1.5rem;
    --page-padding: calc(2 * var(--base-size));
  }
}

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

html {
  scroll-behavior: smooth;
}

body {
  align-items: center;
  background-color: var(--color-white);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  font: var(--page-font-size) "Merriweather", ui-serif, Georgia, Cambria,
    "Times New Roman", Times, serif;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration-color: var(--color-primary);
  text-decoration-line: underline;
  text-decoration-thickness: calc(1em / 16);
}

@media (hover: hover) {
  a:hover {
    color: var(--color-primary);
    text-decoration-color: var(--color-secondary);
  }
}

a:focus {
  color: var(--color-secondary);
}

address {
  font-style: italic;
  margin: 1em 0;
}

h3 {
  font-weight: normal;
}

.button {
  background-color: var(--color-secondary);
  border: var(--border-width) solid transparent;
  border-radius: var(--border-radius);
  border-top-right-radius: 0;
  color: var(--color-white);
  cursor: pointer;
  letter-spacing: calc(1rem / 32);
  line-height: 1.15;
  padding: calc(0.5em - var(--border-width));
  text-decoration: none;
  white-space: nowrap;
}

@media (hover: hover) {
  .button:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
  }
}

.button:active {
  background-color: var(--color-text);
}

.button.danger {
  background-color: var(--color-danger);
}

@media (hover: hover) {
  .button.danger:hover {
    background-color: var(--color-text);
  }
}

.button.danger:hover {
  background-color: var(--color-primary);
}

.center-text {
  text-align: center;
}

.color-secondary {
  color: var(--color-secondary);
}

.columns {
  display: flex;
  flex-direction: column;
}

@media (min-width: 64rem) {
  .columns {
    flex-direction: row;
  }
}

.form {
  display: flex;
  row-gap: 1em;
  flex-direction: column;
  margin: 1em 0;
}

.form input[type="date"],
.form input[type="number"],
.form input[type="password"],
.form input[type="text"],
.form input[type="time"],
.form input[type="url"],
.form textarea {
  background-color: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius);
  border-top-right-radius: 0;
  color: inherit;
  outline: none;
  overflow: hidden;
  padding: 0.375em;
  resize: none;
}

.form input[type="number"] {
  appearance: textfield;
  text-align: right;
  width: 4em;
}

.form input[type="number"]::-webkit-inner-spin-button,
.form input[type="number"]::-webkit-outer-spin-button {
  appearance: none;
}

.form input[type="password"],
.form input[type="text"],
.form input[type="url"],
.form textarea {
  width: 100%;
}

@media (min-width: 32rem) {
  .form input[type="password"],
  .form input[type="text"],
  .form input[type="url"],
  .form textarea {
    width: 20em;
  }
}

.form input[type="date"]:focus,
.form input[type="number"]:focus,
.form input[type="password"]:focus,
.form input[type="text"]:focus,
.form input[type="time"]:focus,
.form input[type="url"]:focus,
.form textarea:focus {
  border-color: var(--color-secondary);
}

.form .field {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
}

.form .buttons {
  gap: 1em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.form .field.buttons {
  margin-top: 0.5em;
}

.form .field label {
  margin-bottom: 0.375em;
}

.image {
  display: flex;
  justify-content: center;
  margin: 2em 0;
}

.image img {
  border-radius: calc(2 * var(--border-radius));
  border-top-right-radius: 0;
  max-width: calc(64rem - 2 * var(--page-padding));
  width: 100%;
}

.message {
  background-color: var(--color-white);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius);
  border-top-right-radius: 0;
  display: inline-block;
  margin: 1em 0;
  padding: 0.5em 1em;
}

.message.error {
  background-color: var(--color-white);
  border-color: var(--color-danger);
}

.message.success {
  background-color: var(--color-white);
  border-color: var(--color-success);
}

.small {
  font-size: var(--small);
}