@font-face {
  font-family: 'Epoch';
  src: url('https://befonts.com/downfile/8f81af6c82c278bd73b30aff30e50bb8.956031') format('truetype');
  font-display: swap;
}

body, html {
  font-family: 'Epoch', sans-serif;
}

details {
  margin-bottom: 1rem;
}

details p {
  margin-left: 2rem;
}

summary.title {
  cursor: pointer;
  padding: .5rem;
  margin-bottom: 0.5rem !important;
}

summary:hover {
  background-color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l));
}

.hero.is-fullheight {
  min-height: 100svh;
}

@media screen and (max-width: 768px) {
  .hero.is-medium {
    min-height: 100svh;
  }

  .hero.is-medium .hero-body{
    align-items: center;
    display: flex;
  }
}

.is-size-display {
  font-size: clamp(3.2rem, 8vw, 9rem);
  font-weight: bold;
}

.code-label {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
  background: rgba(128, 128, 128, 0.1);
  color: #666;
  font-family: monospace;
    font-size: clamp(0.1rem, 2vw, .8rem);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}

.code-labeled-element {
  outline: 1px dashed rgba(128, 128, 128, 0.3);
}

.trigger-container {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  top: 50vh;
  left: 0;
  width: 100vw;
  z-index: 999;
  pointer-events: none;
}

.trigger-line {
  height: 1px;
  background: transparent;
  width: 100%;
}

.trigger-label {
  display: none;
}

.title-target {
  margin-bottom: 1rem;
}

.title-target:last-child {
  margin: 0;
}