body {
    height: 100dvh;
    width: 100dvw;
    background: linear-gradient(0deg, var(--background-dark) 0%, var(--background-light) 100%);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--spacing);
    padding-top: calc(var(--spacing) * 2);

    touch-action: none;
}

@media screen and (max-width: 425px) {
    body {
        justify-content: start;
    }
}

/* ----------------------------------------------------------------------------- */

header {
    border-radius: var(--roundness);
    background: linear-gradient(0deg, var(--background-dark) -100%, var(--background-light) 100%);
    box-shadow: var(--thickness) var(--thickness) 0rem var(--shadow);

    padding: 2rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

main {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing);
    padding: var(--spacing);

    touch-action: manipulation;
    overflow-y: auto;
    scrollbar-color: var(--general-default) #00000000;
}

header {
    opacity: 0%;
    animation-name: appear-downward;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
}

header p, header h1 {
    text-align: center;
    opacity: 0%;
    animation-name: appear;
    animation-fill-mode: forwards;
    animation-delay: 0.25s;
    animation-duration: 0.5s;
}

header hr {
    animation-name: widen;
    animation-fill-mode: forwards;
    animation-delay: 0.5s;
    animation-duration: 1s;
}

body * {
    z-index: 2;
}

body canvas {
    z-index: 1;
    position: absolute;
    top: 0rem;
    left: 0rem;
    width: 100%;
    height: 100%;
    padding: var(--spacing);
}


/* ----------------------------------------------------------------------------- */

figure {
    opacity: 0%;
    transition: 0.5s;
    position: relative;

    border-radius: var(--roundness);
    border-bottom: var(--thickness) solid var(--general-highlight);
    background: linear-gradient(180deg, var(--background-dark) 50%, var(--background-light) 100%);

    box-shadow: var(--thickness) var(--thickness) 0rem var(--shadow);
    
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    gap: 1rem;
}

figure:hover {
    transition: 0.2s;
    transform: translate(0rem, -2rem);
    border-color: var(--accent-default);
}

figcaption {
    transition: 0.5s;
    text-align: center;
    padding: 0.5rem 1rem 0.5rem 1rem;
    
    border-radius: var(--roundness);
    background-color: var(--general-default);
}

figure:hover>figcaption {
    transition: 0.2s;
    border-width: 0rem;
    background-color: var(--general-highlight);
    box-shadow: var(--thickness) var(--thickness) 0rem var(--general-dark);
}

figure>div {
    transition: 0.25s ease;
    width: 18.5rem;
    aspect-ratio: 1;

    border-radius: var(--roundness);
    background-image: url(../assets/images/icons/placeholder.png);
    background-size: 100%;
    background-position: center;
}

figure:hover>div {
    transition: 0.25s ease;
    background-size: 200%;
}

/* ----------------------------------------------------------------------------- */

#a {
    background: linear-gradient(180deg, #321e16 50%, var(--background-light) 100%);
}
#a:hover {
    border-color: #c9411f;
}
#a>div {
    background-image: url(../assets/images/icons/fractals.jpg);
}

#b {
    background: linear-gradient(180deg, #130620 50%, var(--background-light) 100%);
}
#b:hover {
    border-color: #702b9e;
}
#b>div {
    background-image: url(../assets/images/icons/lensing.jpg);
}

#c {
    background: linear-gradient(180deg, #142620 50%, var(--background-light) 100%);
}
#c:hover {
    border-color: #1e7d5d;
}
#c>div {
    background-image: url(../assets/images/icons/voxels.jpg);
}

/* ----------------------------------------------------------------------------- */