@import url(
    'https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=IM+Fell+English:ital@0;1&display=swap'
);


* {
    box-sizing: border-box;
}


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


body {
    min-height: 100vh;

    background:
        linear-gradient(
            rgba(8, 7, 6, 0.52),
            rgba(8, 7, 6, 0.62)
        ),
        url("/images/great-hall.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    color: #e8d8b5;

    font-family:
        "IM Fell English",
        Georgia,
        serif;
}


.page {
    width: 100%;
    min-height: 100vh;

    padding:
        60px
        40px
        40px;

    display: flex;
    flex-direction: column;
    align-items: center;
}


.header {
    text-align: center;
    margin-bottom: 55px;
}


.eyebrow {
    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size: 0.8rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;

    color: #b89a62;

    margin-bottom: 14px;
}


h1 {
    margin: 0;

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size: clamp(
        3rem,
        7vw,
        6rem
    );

    font-weight: 500;

    letter-spacing: 0.06em;

    color: #ead9b2;

    text-shadow:
        0 3px 12px
        rgba(0, 0, 0, 0.8);
}


.school-year {
    margin-top: 12px;

    font-size: 1.25rem;

    font-style: italic;

    color: #a99573;
}


#leaderboard {
    width: 100%;
    max-width: 1300px;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 22px;

    justify-content: center;

    margin: 0 auto;
}

.house {
    position: relative;

    min-height: 350px;

    padding: 35px 25px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    background:
        linear-gradient(
            to bottom,
            rgba(20, 18, 15, 0.42),
            color-mix(
                in srgb,
                var(--house-color),
                rgba(15, 12, 10, 0.55)
            )
        );

    border: 1px solid
        color-mix(
            in srgb,
            var(--house-color),
            rgba(220, 200, 160, 0.55)
        );

    border-radius: 6px;

    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, 0.45),

        inset 0 0 35px
        rgba(255, 255, 255, 0.025);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.house:hover {
    transform:
        translateY(-5px);

    box-shadow:
        0 18px 40px
        rgba(0, 0, 0, 0.55);
}


.house::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 4px;

    background:
        var(--house-color);

    box-shadow:
        0 0 14px
        var(--house-color);

    opacity: 0.85;
}

.house::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 45%;

    background:
        linear-gradient(
            to top,
            color-mix(
                in srgb,
                var(--house-color),
                transparent 72%
            ),
            transparent
        );

    pointer-events: none;
}


.house.gryffindor {
    --house-color: #8f1d22;
}


.house.slytherin {
    --house-color: #2f684c;
}


.house.hufflepuff {
    --house-color: #c49b32;
}


.house.ravenclaw {
    --house-color: #315d83;
}


.house-crest {
    width: 120px;
    height: 140px;

    margin-bottom: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    z-index: 1;
}

.crest-image {
    max-width: 100%;
    max-height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 5px 10px
            rgba(0, 0, 0, 0.55)
        );
}

.house-name {
    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size: 1.5rem;

    position: relative;
    z-index: 1;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: #e4d3ac;

    margin-bottom: 15px;
}


.house-points {
    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size: 4rem;

    position: relative;
    z-index: 1;

    font-weight: 600;

    line-height: 1;

    color: var(--house-color);
}


.points-label {
    margin-top: 8px;

    font-family:
        "Cinzel",
        Georgia,
        serif;

    font-size: 0.7rem;

    position: relative;
    z-index: 1;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    color: #8e806a;
}


.footer {
    width: 100%;
    max-width: 1300px;

    margin-top: 55px;

    text-align: center;
}


.footer-line {
    width: 180px;
    height: 1px;

    margin:
        0 auto
        18px;

    background:
        linear-gradient(
            to right,
            transparent,
            #8f7548,
            transparent
        );
}


.footer p {
    margin: 0;

    color: #84765f;

    font-style: italic;

    font-size: 1rem;
}


.loading {
    grid-column: 1 / -1;

    text-align: center;

    padding: 80px;

    font-size: 1.3rem;

    color: #a99573;
}


@media (max-width: 900px) {
    #leaderboard {
        grid-template-columns:
            repeat(2, 1fr);
    }
}


@media (max-width: 550px) {
    .page {
        padding:
            40px
            20px;
    }

    #leaderboard {
        grid-template-columns: 1fr;
    }

    .header {
        margin-bottom: 35px;
    }

    .house {
        min-height: 300px;
    }
}