:root{
    --outline-color: var(--purple);
}

main, header{
    width: 75svw;
    margin: var(--gap) auto;
}

header p{
    color: var(--white);
    text-shadow: var(--text-shadow-custom);
    filter: var(--drop-shadow-medium);
}

/* headings */

header, h1, h2, h3, h4{
    text-align: center;
}

h1{
    font-size: 2.33em;
}

h2{
    font-size: 2em;
}

/* main layout */

main > section{
    --main-height: 80svh;
    display: grid;
        grid-template-areas: 'title title' 'box gallery';
        gap: 0 var(--gap);
    box-shadow: none;
}

main > section:nth-of-type(even){
    grid-template-areas: 'title title' 'gallery box';
    gap: 0 calc(var(--gap) * 1.75);
}

main > section h2{
    grid-area: title;
}

main > section > div:last-of-type{
    grid-area: box;
    height: var(--main-height);
}

main > section:last-child{
    display: block;
}

main > section:not(:last-child){
    margin-bottom: calc(var(--double-gap) * 1.5);
}

main > section > *{
    filter: var(--drop-shadow-medium);
}

/* tables */

table :is(td, th){
    padding: 0.5em;
}

table td:last-child{
    padding-right: 0;
}

table td:first-child{
    width: 20%;
}

table td:first-child img{
    width: 100%;
}

table td:nth-child(2){
    text-align: center;
}

/* fancyboxy */

main > section .fancybox{
    grid-area: gallery;
    flex-flow: column nowrap;
        justify-content: flex-start;
    padding: 0.5em;
    padding-right: var(--gap);
    padding-bottom: 0;
    width: fit-content;
    height: var(--main-height);
        box-sizing: border-box;
}

.fancybox a img{
    --img-size: 15svw;
    height: var(--img-size);
    width: var(--img-size);
    object-fit: cover;
    border: var(--border-level-2);
        border-radius: var(--border-radius-level-3);
        border-color: var(--white);
        border-style: outset;
}

.fancybox a img:is(:hover, :focus){
    transform: none;
}

.fancybox a:is(:hover, :focus){
    transform: scale(1.05);
    filter: var(--drop-shadow-low);
}

.fancybox a:is(:hover, :focus),
.fancybox a{
   transition: transform .3s ease, box-shadow .2s ease;
}

.fancybox__caption{
    max-width: 66svw;
}

/* scrollbar thumbs */

section:nth-child(4n+1) .hugme::-webkit-scrollbar-thumb{
    background: var(--aqua-texture);
    border: var(--aqua);
}

section:nth-child(4n+2) .hugme::-webkit-scrollbar-thumb{
    background: var(--green-texture);
    border: var(--green);
}

section:nth-child(4n+3) .hugme::-webkit-scrollbar-thumb{
    background: var(--orange-texture);
    border: var(--orange);
}

section:nth-child(4n) .hugme::-webkit-scrollbar-thumb{
    background: var(--yellow-texture);
    border: var(--yellow);
}