@media (prefers-color-scheme: light) {
  :root {
    --extreme: white;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --extreme: black;
  }
}

:root {
  --border-color: #6e6e6f;
  --font-size-card: calc(var(--font-size) * 0.8);
}

main {
  max-width: 840px; /* breakpoint */
}

/* List */
main ul:not(ul ul) {
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

/* breakpoint */
@media only screen and (max-width: 740px) {
  main ul {
    grid-template-columns: none;
  }
}

/* Card */
main li:not(ul ul > li) {
  display: flex;

  border-radius: 8px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

  background: color-mix(in srgb, var(--background) 90%, var(--extreme));
  border: 1px solid
    color-mix(in srgb, var(--background) 50%, var(--border-color));
  transition: all 0.3s;

  padding: 10px;
  margin-block: 10px;
  margin-inline: 5px;
}

main li:hover:not(ul ul > li) {
  background: color-mix(in srgb, var(--background) 40%, var(--extreme));
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
}

main li[role="button"]:hover:not(ul ul > li) {
  cursor: pointer;
}

/* Element */
div {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Element title */
div h3 {
  margin-block: 0;
}

/* Redirection arrow on clickable element */
li[role="button"] div h3::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' width='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' %3E%3Cpath d='M21 3h-6m6 0l-9 9m9-9v6' %3E%3C/path%3E%3Cpath d='M21 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h6' %3E%3C/path%3E%3C/svg%3E");
  float: right;
}

@media (prefers-color-scheme: dark) {
  li[role="button"] div h3::after {
    filter: invert(80%);
  }
}

/* Element description */
span {
  margin: auto;
  margin-left: 0;
}

/* Element text */
div p,
div a,
ul ul li {
  font-size: var(--font-size-card);
}

/* Element list */
ul ul {
  list-style: initial;
  padding: 1em;
}

/* Element language */
p[data-lang] {
  margin: 0;
}