html, body {
    background-color: #000;
    color: white;
}

* {
    font-family: sans-serif;
}

hr {
    border-width: 0.2px;
    border-color: gray;
}

body {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 1rem;
}

.heading {
    color: white;
    text-shadow: #5797f7 0px 0px 15px;
}

main {
    display: grid;
    grid-template-columns: 8fr 4fr;
    column-gap: 16px;
}

header {
    background-color: #10141B;
    padding: 8px;
    border-radius: 1rem;
    a {
        color: white;
    }
}

section {
    background-color: #10141B;
    padding: 8px;
    border-radius: 1rem;
}

.portrait {
    width: 90%;
    height: auto;
}

.portrait-section {
    display: flex;
    justify-content: center;
}

table {
    width: 100%;
    text-align: center;
    background-color: hsl(0, 0%, 10%);
    border-radius: 8px;
    padding: 8px;
}

.gold {
    position: relative;
    overflow: hidden;

    /* Bright yellow-gold base gradient */
    background: linear-gradient(
        135deg,
        hsl(48, 100%, 38%) 0%,
        hsl(51, 100%, 40%) 30%,
        hsl(48, 100%, 60%) 50%,
        hsl(51, 100%, 40%) 70%,
        hsl(44, 100%, 35%) 100%
    );
}

.silver {
    background: linear-gradient(
        135deg,
        hsl(0, 0%, 46%) 0%,
        hsl(0, 0%, 64%) 30%,
        hsl(0, 0%, 74%) 50%,
        hsl(0, 0%, 64%) 70%,
        hsl(0, 0%, 42%) 100%
    );
}

.bronze {
    background: linear-gradient(
        135deg,
        hsl(28, 58%, 20%) 0%,
        hsl(30, 61%, 30%) 30%,
        hsl(29, 73%, 47%) 50%,
        hsl(30, 61%, 30%) 70%,
        hsl(28, 68%, 12%) 100%
    );
}

.grandmaster {
    background: linear-gradient(
        135deg,
        #1a2a5e 0%,
        #2e5faa 15%,
        #a8d4f5 40%,
        #c9e8ff 45%,
        #7ab8e8 60%,
        #3a6fc4 75%,
        #1e3a7a 90%
    );
}

@media (max-width: 1200px) {
    main {
        grid-template-columns: 1fr;
    }
    .portrait {
        width: 50%;
    }
    table {
        width: 100%;
    }
}