body {
    padding: 1em 0.5em 50vh 0.5em;
}

.hidden {
    display: none;
}

.inline {
    display: inline;
}

ul.naked>li {
    list-style-type: none;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    font-size: 1.5rem;
}

.flex {
  display: flex;
  gap: var(--pico-block-spacing-horizontal);
}

.shrink-1 > * {
  flex-shrink: 1;
  min-width: 0;
}

.space-between {
    justify-content: space-between;
}

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

.align-start {
  align-items: start;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
  margin-bottom: var(--pico-block-spacing-vertical);
}

.pb-0 {
    padding-bottom: 0;
}

.pt-0 {
    padding-top: 0;
}

.pb-2 {
    padding-bottom: 2em;
}

.height-fit-content {
    height: fit-content;
}

.back-to-top {
    position: fixed;
    z-index: 1000;
    bottom: 1em;
    opacity: 0.75;
}

/* Theme Selector Styles */

#themeForm {
  margin: 0;
  margin-right: var(--pico-spacing);
}

#themeForm > label {
  margin: 0;
  font-size: 2em;
  transition: transform 0.2s ease;
}

#themeForm > label:hover {
  transform: scale(1.1);
}

/* Hide all labels by default */
#themeForm > label {
  display: none;
}

#themeForm input[type="radio"] {
  display: none;
}

/* Show only the next theme option based on current selection */
/* When light is checked, show dark */
#themeForm:has([value="light"]:checked) label:has([value="dark"]) {
  display: inline-block;
}

/* When when dark is checked show light */
#themeForm:has([value="dark"]:checked) label:has([value="light"]) {
  display: inline-block;
}

summary.ellipsis {
  display: block;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 1.8em;

  &::after {
    position: absolute;
    right: 0.4em;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    pointer-events: none;
    white-space: nowrap;
    transition: transform 0.18s ease;
    display: inline-block;
  }

  /* rotate the caret when the details element is open */
  details[open] > &::after,
  details[open] &::after {
    transform: translateY(-50%) rotate(0deg);
  }
}

.m-0 {
    margin: 0;
}