madness.css

:root {
  --monkey-blue: #07b8f3;
  --monkey-magenta: #ff1173;
  --monkey-teal: #09d79a;
  --monkey-orange: #fbbb14;
  --monkey-background: #f7f6e4;
  --border-width: 4px;
  --border-radius: 12px;
}

* {
  box-sizing: border-box;
}

body {
  display: grid;
  grid-template-columns: min(100%, 60ch);
  gap: 1em;
  margin: 0 1em;
  padding-block: 1em;
  min-height: 100lvh;
  background-color: var(--monkey-background);
  justify-content: center;

  font-family: "Montserrat", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 20px;
  line-height: 1.7;

  @media (forced-colors: none) {
    background-image: url(/bg.png);
  }

  @media screen and (min-width: 1500px) {
    grid-template-columns: minmax(20ch, 333px) 50ch 1fr;

    footer {
      grid-column-start: 1;
      grid-column-end: 4;
    }
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Lemon", sans-serif;
  line-height: 1.3;
}

h1 {
  margin-bottom: 0;
}

hr {
  border: none;
  border-top: 2px solid black;
}

summary {
  display: flex;
  gap: 1rem;
  align-items: center;
  cursor: pointer;

  > * {
    display: inline-block;
    margin-block: 0;
  }
}

.cloud {
  background-color: white;
  border: 0.25rem solid black;
  border-radius: 0.5rem;
  padding: 1.5rem 2rem;

  :first-child {
    margin-block-start: 0;
  }

  :last-child {
    margin-block-end: 0;
  }

  & + & {
    margin-block-start: 3rem;
  }

  &.small {
    border-width: 2px;
    padding: 0.5rem 1rem;
  }

  &:target {
    outline: 10px solid var(--monkey-blue);
  }
}

.subtitle {
  font-size: 0.8em;
  margin-top: 0.5em;
}

.section {
  margin-block: 2em;
}

.field {
  background: white;
  padding: 20px;
  border-radius: calc(var(--border-radius) * 2);
}

label {
  font-size: 0.8em;

  &.field {
    margin-inline: 0;
  }
}

fieldset {
  border: 0;
  padding: 0;
}

.small {
  font-size: 0.66em;
}

.big {
  font-size: 1.333em;
}

input:where([type="text"], [type="email"]) {
  border: var(--border-width) solid black;
  border-radius: var(--border-radius);
  font: inherit;
  padding: 0.5em 1em;
  width: 100%;
}

:is(input, button, a[href], summary):focus-visible {
  outline: calc(var(--border-width) * 1.5) solid var(--monkey-blue);
  outline-offset: var(--border-width);
  position: relative;
  z-index: 1;
}

button,
.button {
  font: inherit;
  border: var(--border-width) solid black;
  padding: 0.5em 1em;
  background-color: var(--monkey-teal);
  border-radius: var(--border-radius);
  color: inherit;
  cursor: pointer;
  font-size: 0.9em;
  text-wrap: nowrap;
  text-decoration: none;

  &:hover {
    color: inherit;
    filter: brightness(85%);
  }

  &[type="reset"] {
    background-color: white;
  }
}

img {
  display: block;
  margin-inline: auto;
  max-width: 100%;
  object-fit: contain;
}

.align-right {
  display: flex;
  justify-content: flex-start;
  flex-direction: row-reverse;
}

.buttons {
  margin-top: -20px;
}

.monkey-img {
  max-height: 66lvh;
  max-width: 333px;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

body > footer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-block-start: 3rem;

  svg {
    width: 80px;
    height: 80px;
  }
}

@media screen and (min-width: 80ch) {
  footer {
    flex-direction: row;
    align-items: flex-end;
  }

  .author {
    margin-left: auto;
  }
}

.puh-the-bear {
  display: none;
}

.centered {
  display: flex;
  align-items: center;
}

.gap-1 {
  gap: 1rem;
}

.color-post-yellow {
  color: #ffcc00;
}

summary::after {
  position: relative;
  top: 0.5em;
  margin-left: auto;
  content: "";
  border: 1em solid transparent;
  border-top-color: inherit;
  transition: transform ease-out 0.35s;
  transform-origin: center 25%;
}

details[open] summary::after {
  transform: scaleY(-1);
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

input[type="checkbox"] {
  position: relative;
  appearance: none;
  border: var(--border-width) solid black;
  width: 3em;
  height: 3em;
  border-radius: 6px;
  background-color: white;

  &:checked {
    &::after {
      content: "";
      position: absolute;
      inset: 0.25em;
      background-color: currentColor;
      background-repeat: no-repeat;
      mask-image: url("data:image/svg+xml,%3Csvg  viewBox='0 0 33 33' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 18.4737L10.6667 29L32 7.94737L28 4L10.6667 21.1053L4 14.5263L0 18.4737Z'/%3E%3C/svg%3E%0A");
      forced-color-adjust: none;
    }
  }
}

[for="i-present"]:has(:not(#i-present:checked)) ~ .wants-to-present {
  display: none;
}

.author {
  display: flex;
  gap: 20px;
}

.agenda {
  margin-block-start: 1.5rem;
  padding-left: 1.5rem;

  li {
    padding-left: 0.5rem;
    margin-block: 1rem;
  }
}

.agenda li::marker {
  content: attr(data-marker);
  display: inline-block;
  font-size: inherit;
  margin-right: 1rem;
}
.agenda h3 {
  margin-top: 2em;
}
.agenda :where(h3, p) {
  margin-block: 0.25em;
}
.agenda .speaker {
  font-size: 0.9em;
  font-style: italic;
}

.pictures {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  figure {
    margin: 0;
    flex: 1 1 9rem;
    position: relative;

    a {
      border: 3px solid black;
      border-radius: 5px;
      overflow: hidden;
      display: block;
    }

    figcaption {
      border: 3px solid black;
      padding: 0.5rem;
      font-size: 0.6em;
      position: absolute;
      inset: 0.5rem;
      top: auto;
      bottom: -1rem;
      border-radius: 5px;
      background: white;
      z-index: 1;
    }

    img {
      display: block;
      aspect-ratio: 7/8;
      object-fit: cover;
    }
  }
}