html,body{margin:0;padding:0;width:100%;}
*,*::before,*::after{box-sizing:border-box}

body{
    --xs:.25rem;
    --sm:1rem;
    --md:2rem;
    --lg:3rem;
    --xl:4rem;
    --xxl:6rem;

    --max-width:1200px;
    
    --primary:#222;
    --secondary:#000;
    --tertiary:lime;
    
    --text-primary:#fff;
    --text-secondary:lime;
    --text-tertiary:#000;
}

.constrained-width{
    width:100%;
    max-width:var(--max-width);
    margin:0 auto;
}

.prevent-y-space > *:first-child{margin-top:0;padding-top:0;}
.prevent-y-space > *:last-child{margin-bottom:0;padding-bottom:0;}

.flex-row,.flex-col{display:flex;}
.flex-col{flex-direction:column;}
.grid{
    --desktop-cols:repeat(auto-fit, 1fr);
    --mobile-cols:1fr;
    display:grid;
    grid-template-columns:var(--desktop-cols);
}
@media(max-width:768px){
    .grid{grid-template-columns:var(--mobile-cols);}
}

/* gap */
.gap-xs{gap:var(--xs)}
.gap-sm{gap:var(--sm)}
.gap-md{gap:var(--md)}
.gap-lg{gap:var(--lg)}
.gap-xl{gap:var(--xl)}
.gap-xxl{gap:var(--xxl)}

/* padding */
.p-xs{padding:var(--xs)}
.pl-xs,.px-xs{padding-left:var(--xs)}
.pr-xs,.px-xs{padding-right:var(--xs)}
.pt-xs,.py-xs{padding-top:var(--xs)}
.pb-xs,.py-xs{padding-bottom:var(--xs)}

.p-sm{padding:var(--sm)}
.pl-sm,.px-sm{padding-left:var(--sm)}
.pr-sm,.px-sm{padding-right:var(--sm)}
.pt-sm,.py-sm{padding-top:var(--sm)}
.pb-sm,.py-sm{padding-bottom:var(--sm)}

.p-md{padding:var(--md)}
.pl-md,.px-md{padding-left:var(--md)}
.pr-md,.px-md{padding-right:var(--md)}
.pt-md,.py-md{padding-top:var(--md)}
.pb-md,.py-md{padding-bottom:var(--md)}

.p-lg{padding:var(--lg)}
.pl-lg,.px-lg{padding-left:var(--lg)}
.pr-lg,.px-lg{padding-right:var(--lg)}
.pt-lg,.py-lg{padding-top:var(--lg)}
.pb-lg,.py-lg{padding-bottom:var(--lg)}

.p-xl{padding:var(--xl)}
.pl-xl,.px-xl{padding-left:var(--xl)}
.pr-xl,.px-xl{padding-right:var(--xl)}
.pt-xl,.py-xl{padding-top:var(--xl)}
.pb-xl,.py-xl{padding-bottom:var(--xl)}

.p-xxl{padding:var(--xxl)}
.pl-xxl,.px-xxl{padding-left:var(--xxl)}
.pr-xxl,.px-xxl{padding-right:var(--xxl)}
.pt-xxl,.py-xxl{padding-top:var(--xxl)}
.pb-xxl,.py-xxl{padding-bottom:var(--xxl)}

/* margin */
.m-xs{margin:var(--xs)}
.ml-xs,.mx-xs{margin-left:var(--xs)}
.mr-xs,.mx-xs{margin-right:var(--xs)}
.mt-xs,.my-xs{margin-top:var(--xs)}
.mb-xs,.my-xs{margin-bottom:var(--xs)}

.m-sm{margin:var(--sm)}
.ml-sm,.mx-sm{margin-left:var(--sm)}
.mr-sm,.mx-sm{margin-right:var(--sm)}
.mt-sm,.my-sm{margin-top:var(--sm)}
.mb-sm,.my-sm{margin-bottom:var(--sm)}

.m-md{margin:var(--md)}
.ml-md,.mx-md{margin-left:var(--md)}
.mr-md,.mx-md{margin-right:var(--md)}
.mt-md,.my-md{margin-top:var(--md)}
.mb-md,.my-md{margin-bottom:var(--md)}

.m-lg{margin:var(--lg)}
.ml-lg,.mx-lg{margin-left:var(--lg)}
.mr-lg,.mx-lg{margin-right:var(--lg)}
.mt-lg,.my-lg{margin-top:var(--lg)}
.mb-lg,.my-lg{margin-bottom:var(--lg)}

.m-xl{margin:var(--xl)}
.ml-xl,.mx-xl{margin-left:var(--xl)}
.mr-xl,.mx-xl{margin-right:var(--xl)}
.mt-xl,.my-xl{margin-top:var(--xl)}
.mb-xl,.my-xl{margin-bottom:var(--xl)}

.m-xxl{margin:var(--xxl)}
.ml-xxl,.mx-xxl{margin-left:var(--xxl)}
.mr-xxl,.mx-xxl{margin-right:var(--xxl)}
.mt-xxl,.my-xxl{margin-top:var(--xxl)}
.mb-xxl,.my-xxl{margin-bottom:var(--xxl)}

pre.code{
  background-color:var(--secondary);
  color:var(--text-secondary);
}