:root {
    background-color: #000;
    color: #FFF;
}



summary
{
    cursor: pointer;
}
/* details {
    border: 1px solid #aaaaaa;
    border-radius: 4px;
    padding: 0.5em 0.5em 0;
  }
  
  summary {
    font-weight: bold;
    margin: -0.5em -0.5em 0;
    padding: 0.5em;
  }
  
  details[open] {
    padding: 0.5em;
  }
  
  details[open] summary {
    border-bottom: 1px solid #aaaaaa;
    margin-bottom: 0.5em;
  } */


.stack
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.stack > *
{
    margin-block: 0;
} 
.stack > * + *
{
    margin-block-start: var(--space, 1rem);
}



.box
{
    padding: 1rem;
    background-color: inherit;
}
.box *
{
    color: inherit;
}



.center
{
    box-sizing: content-box;
    margin-inline: auto;
    max-inline-size: 80ch;
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
}
.center-size\:960px {max-inline-size: 960px;}



.cluster
{
    display: flex;
    flex-wrap: wrap;
    gap: var(--space, 1rem);
    justify-content: flex-start;
}
.cluster-justify\:start {justify-content: flex-start;}
.cluster-align\:center {align-items: center;}



.switcher
{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.switcher > *
{
    flex-grow: 1;
    flex-basis: calc((600px - 100%) * 999);
}
.switcher > :nth-last-child(n+4),
.switcher > :nth-last-child(n+4) ~ *
{
    flex-basis: 100%;
}



.cover {
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
    padding: 1rem;
}
.cover > * {
    margin-block: 1rem;
}
.cover > .cover-focus { /* target the element that need to stay on center */
    margin-block: auto;
}
.cover > :first-child:not(.cover-focus) { /* target the element that need to stay on center */
    margin-block-start: 0;
}
.cover > :last-child:not(.cover-focus) { /* target the element that need to stay on center */
    margin-block-end: 0;
}



/* HELPER CLASSES */
.text-align\:center {text-align: center;}
.bg-purple {background-color: purple;}