body {
    margin: 0;
    background: var(--white);
}

#event {
    padding: 2vw 2vw 6vw 4vw;
    display: flex;
    flex-wrap: wrap;
    font-family: "DM Sans", sans-serif;

    > div {
        padding: 3vw;
    }

    #date {
        max-width: fit-content;
    }

    #event-left h1 {
        font-size: clamp(24pt, 3.5vw, 3.5vw);
    }

    #event-left {
        @media only screen and (max-width: 600px) {
            max-width: 80vw;
        }
        @media only screen and (min-width: 600px) {
            max-width: 50vw;
        }

        #leaderboard {
            width: 100%;
            text-align: center;
            border: 0;
            border-spacing: 0;
        }

        #table-wrap {
            overflow-x: scroll;
            position: relative;

            ::-webkit-scrollbar {
                display: inline-block;
            }
        }

        #leaderboard td {
            padding: clamp(5px, 0.5vw, 30px) clamp(10px, 1vw, 60px);
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
        }

        #leaderboard #header th {
            border-bottom: 2px solid;
            background-color: var(--white);
        }

        #leaderboard tr:nth-child(even) {
            background: var(--light-light-grey);
        }

        #leaderboard tr:nth-child(odd) {
            background-color: var(--white);
        }

        #leaderboard .rank {
            font-weight: bold;
        }

        #leaderboard tr th:nth-child(1), #leaderboard tr th:nth-child(2), #leaderboard tr td:nth-child(1), #leaderboard tr td:nth-child(2), #rank, #usernameColumn {
            width: 5vw;
            background: inherit;
            position: sticky;
            z-index: 500;
        }

        #leaderboard tr th:nth-child(1), #leaderboard tr td:nth-child(1) {
            left: 0;
        }

        #leaderboard tr th:nth-child(2), #leaderboard tr td:nth-child(2) {
            left: calc(5vw + clamp(10px, 1vw, 60px));
            border-right: 1px dashed;
        }

        .blue {
            color: #274472;
            font-weight: bold;
        }

        .green {
            color: #2d590c;
            font-weight: bold;
        }

        .red {
            color: #722410;
            font-weight: bold;
        }

        .purple {
            color: #69418b;
            font-weight: bold;
        }

        .yellow {
            color: #866225;
            font-weight: bold;
        }

        #leaderboard .blue {
            background-color: #d7e7ed;
        }

        #leaderboard .green {
            background-color: #c7e4b1;
        }

        #leaderboard .red {
            background-color: #f4b6b0;
        }

        #leaderboard .yellow {
            background-color: #faf7c6;
        }

        #leaderboard .purple {
            background-color: #f0d1ff;
        }
    }

    #event-right {
        width: 60vw;
    }

    #event-right img {
        width: 100%;
    }

    p {
        margin-top: 30px;
        line-height: 1.6;
    }

    a {
        color: inherit;
        text-decoration: none;
        border-bottom: 1px solid var(--black);
        opacity: 1;
        transition: opacity 300ms;
    }

    a:hover {
        opacity: 0.6;
    }
}

.pre-hero {
    font-family: "DM Sans", sans-serif;
    font-weight: 600;
    padding: 40px 20px 40px 20px;
    display: inline-block;

    a {
        transition: font-weight 300ms;
        margin-left: 25px;
        color: inherit;
        text-decoration: none;
        border-bottom: 1px solid var(--black);
    }

    img {
        transform: rotate(180deg) translateX(-20%);
        transition: transform 300ms;
    }
}

.pre-hero:hover {
    cursor: pointer;
}

.pre-hero:hover a {
    font-weight: 200;
}

.pre-hero:hover img {
    transform: rotate(180deg);
}

#date {
    font-family: "DM Sans", sans-serif;
}