body, html
{
    height: 100%;
    margin: 0;
}

body
{
    color: white;
    background-color: #0A1630;
    background-image: linear-gradient(
        hsl(221, 66%, 5%),
        hsl(221, 66%, 11%)
    );
    font-family: "Roboto Slab", serif;
	overflow: hidden;
    user-select: none;
}

.center
{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#list
{
    --card-width: clamp(11rem, 28vh, 19rem);
    --card-height: calc(var(--card-width) * 1.433);
    display: flex;
    align-items: center;
    width: 100vw;
    height: 100vh;
    padding: 8vh max(5vw, 1.5rem);
    box-sizing: border-box;
    filter: drop-shadow(0 0 10vh #0A1630);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding: max(5vw, 1.5rem);
    scroll-snap-type: x proximity;
    scrollbar-color: rgba(255, 255, 255, 0.28) rgba(255, 255, 255, 0.04);
}

#list::-webkit-scrollbar-track
{
    background: rgba(255, 255, 255, 0.04);
}

#list::-webkit-scrollbar-thumb
{
    background: rgba(255, 255, 255, 0.28);
    border: 0.18rem solid rgba(10, 22, 48, 0.85);
    border-radius: 999rem;
}

#list::-webkit-scrollbar-thumb:hover
{
    background: rgba(255, 255, 255, 0.45);
}

#intro
{
    position: absolute;
    left: 50%;
    top: 10vh;
    z-index: 1;
    width: min(34rem, calc(100vw - 3rem));
    margin: 0;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.86);
    font-size: clamp(1rem, 2.4vh, 1.45rem);
    line-height: 1.35;
    text-align: center;
    text-shadow: 0 0 1rem rgba(10, 22, 48, 0.95);
}

#intro a
{
    color: inherit;
    text-decoration-color: rgba(255, 255, 255, 0.45);
    text-underline-offset: 0.16em;
}

#intro a:hover,
#intro a:focus-visible
{
    text-decoration-color: currentColor;
}

@media screen and (orientation: landscape)
{
    #list {
        flex-direction: row;
        justify-content: safe center;
    }
}

@media screen and (orientation: portrait)
{
    #list {
        --card-width: min(72vw, 30vh);
        flex-direction: column;
        align-items: center;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 6vh 0;
        scroll-padding: 6vh;
        scroll-snap-type: y proximity;
    }

    #intro {
        position: static;
        flex: 0 0 auto;
        width: min(34rem, calc(100vw - 3rem));
        margin: 0 auto 4vh;
        transform: none;
        scroll-snap-align: start;
    }

    #list .entry {
        transform: none;
    }

    #list .entry:hover,
    #list .entry:focus-visible {
        transform: scale(1.08);
    }
}

.entry
{
    display: block;
    position: relative;
    flex: 0 0 auto;
    width: var(--card-width);
    height: var(--card-height);
    margin: 1vh;
    text-align: center;
    cursor: pointer;
    transform: perspective(100vh) rotateY(14deg);
    transform-origin: center;
    transition: transform 0.2s;
    scroll-snap-align: center;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.entry:hover,
.entry:focus-visible
{
    transform: perspective(100vh) rotateY(0) scale(1.08);
    z-index: 1;
    outline: none;
}

.entry:active .entry-title,
.entry:hover .entry-title,
.entry:focus-visible .entry-title
{
    opacity: 1;
    transform: translateY(0);
}

.entry:focus-visible img
{
    box-shadow: 0 0 0 0.35rem rgba(255, 255, 255, 0.8), 0 0 8vh 1vh rgba(99, 116, 168, 0.4);
}

.entry img
{
    display: block;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8vh 1vh rgba(99, 116, 168, 0.4);
    pointer-events: none;
}

.entry-title
{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    padding: 0.8rem;
    box-sizing: border-box;
    color: white;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0.48));
    font-size: clamp(1rem, 2.2vh, 1.4rem);
    line-height: 1.2;
    text-align: center;
    text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.8);
    opacity: 0;
    transform: translateY(0.5rem);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
}

@media (hover: none)
{
    .entry-title {
        opacity: 1;
        transform: translateY(0);
    }
}