@media (max-width: 768px) {
  h1 {
    --pico-font-size: 1.5rem;
  }

  h2 {
    --pico-font-size: 1.25rem;
  }

  h3, h4, h5, h6 {
    --pico-font-size: 1rem;
  }
}

@view-transition {
  navigation: auto;
}

html, body {
  -webkit-overflow-scrolling: touch; /* Add momentum scrolling to iOS devices. */
}

body {
  padding-bottom: 4rem; /* Make space for the menu/footer. */
  min-height: 100vh; /* Maybe not only, but required for the safe-area stuff in ios.css. */
}
  
article {
  border: 0.1px solid var(--pico-primary);
}

textarea {
  field-sizing: content; /* auto grow with more content */
  min-height: 5em;
}

/* Styling the form errors */
.errorlist {
  color: red;
  padding: 0;
  margin: 0;
}

.errorlist li {
  list-style: none;
}

body > main {
  margin: 0 auto;
  padding: 0;
  overflow: scroll;
  position: relative;
}

main > header {
  padding-top: var(--pico-spacing);
}
main > header h1 {
  margin-bottom: 0; /* So the headline is vertically centered with e.g. the button on the right */
}

@media screen and (min-width: 600px) {
  html {
    font-size: 100%;
  }
  body > main {
    max-width: 60em;
  }
}

a.disabled {
  pointer-events: none;
  color: var(--color-text-on-primary-dimmed);
  text-decoration-color: var(--color-text-on-primary-dimmed);
}

/**
  * Some form stuff
  */
form span.helptext {
  display: block;
  margin-bottom: 0;
  color: var(--pico-muted-color);
  font-size: small;
  opacity: 0.2;
}

span.helptext:hover,
form input:focus ~ span.helptext {
  opacity: 1;
  color: var(--pico-primary);
  transition: opacity 1s;
}

label:has(+ input[required])::after {
  content: " *";
}

form label {
  margin-bottom: 0;
  font-size: small;
}

form fieldset section {
  vertical-align: top;
}

input:not([type=checkbox],[type=radio]), select, textarea {
  margin-bottom: 0;
}

table thead {
  white-space: nowrap;
}

table td.date {
  white-space: nowrap;
}

table td {
  vertical-align: top;
}

th a.sort {
  text-decoration: none;
  color: black;
}

th a.sort::after {
  content: ' ↕';
  color: var(--pico-secondary);
}

fieldset {
  position: relative;

  margin-bottom: var(--pico-block-spacing-vertical);
  padding: var(--pico-block-spacing-vertical) var(--pico-block-spacing-horizontal);
  padding-top: 4rem;
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
  box-shadow: var(--pico-card-box-shadow);
}

fieldset legend {
  position: absolute;
  top: 1rem;
  font-weight: bold;
}

fieldset :is(input[type=text], select, textarea) {
  background-color: var(--pico-background-color);
}

fieldset :last-child {
  margin-bottom: 0;
}



form [aria-invalid=true] {
  border-color: red;
}

input::placeholder {
  color: var(--pico-muted-color);
  opacity: 0.5;
}

input[readonly] {
  background-color: transparent;
}

.danger {
  color: white;
}

.danger:hover {
  background-color: red;
  color: white;
  text-decoration: none;
  opacity: 1;
}

body > header {
  /* picocss does not auto-set the bgcolor when data-theme=dark is applied to the header, see https://picocss.com/docs/color-schemes for more info */
  background-color: var(--pico-background-color);
  padding: var(--pico-spacing);
  margin-bottom: var(--pico-spacing);
  box-shadow: black 0 0 20px;
  border-bottom-left-radius: var(--pico-border-radius);
  border-bottom-right-radius: var(--pico-border-radius);
}

body > header :last-child,
article > :last-child {
  margin-bottom: 0;
}

article > header {
  background: none;
  margin: 0;
  padding: 0;
  border: none;
}

small {
  opacity: 0.5;
}

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: var(--pico-border-radius);
}


.live-event {
  border: 1px solid red;
  box-shadow: 0 0 0 red;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 1px red; }
  50%   { box-shadow: 0 0 10px orange; }
  100%   { box-shadow: 0 0 1px orange; }
}