:root {
    --black: #000000;
    --almost-black: #071019;

    --blue: #32bfff;
    --blue-bright: #70d7ff;
    --blue-dark: #167bb7;

    --ice: #d8f3ff;
    --steel: #7290a5;

    --white: #ffffff;

    --max-width: 1050px;
}


* {
    box-sizing: border-box;
}


html {
    background: var(--black);
}


body {
    margin: 0;

    background:
        radial-gradient(
            circle at 70% 10%,
            #0a2738 0%,
            var(--black) 35%
        );

    color: var(--white);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    min-height: 100vh;
}


a {
    color: inherit;
}


.home {
    width: min(
        calc(100% - 40px),
        var(--max-width)
    );

    margin: auto;

    padding:
        70px
        0
        30px;
}


.hero {
    border-left:
        5px
        solid
        var(--blue);

    padding-left: 28px;

    margin-bottom: 60px;
}


.eyebrow {
    margin: 0 0 12px;

    color: var(--blue);

    font-size: 14px;

    font-weight: 800;

    letter-spacing: 0.25em;
}


.hero h1 {
    margin: 0;

    max-width: 850px;

    font-size:
        clamp(
            52px,
            10vw,
            115px
        );

    line-height: 0.82;

    letter-spacing: -0.06em;
}


.hero h2 {
    margin:
        30px
        0
        0;

    color: var(--blue-bright);

    font-size:
        clamp(
            25px,
            5vw,
            45px
        );

    letter-spacing: 0.06em;
}


.intro {
    max-width: 500px;

    color: var(--steel);

    font-size: 18px;

    line-height: 1.5;
}


.menu {
    display: grid;

    gap: 12px;
}


.menu-card {
    display: grid;

    grid-template-columns:
        60px
        1fr
        auto;

    align-items: center;

    min-height: 92px;

    padding:
        20px
        25px;

    border:
        1px
        solid
        #193445;

    background:
        linear-gradient(
            90deg,
            #050b10,
            #081824
        );

    text-decoration: none;

    font-size:
        clamp(
            20px,
            4vw,
            33px
        );

    font-weight: 900;

    letter-spacing: 0.04em;

    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease;
}


.menu-card:hover {
    transform: translateX(8px);

    border-color: var(--blue);

    background:
        linear-gradient(
            90deg,
            #07141d,
            #0b2a3e
        );
}


.number {
    color: var(--blue);

    font-size: 14px;

    letter-spacing: 0.1em;
}


.arrow {
    color: var(--blue);

    font-size: 35px;
}


footer {
    margin-top: 50px;

    color: #496170;

    font-size: 11px;

    letter-spacing: 0.2em;
}


/* ---------------------------------------------------------
   UNDER CONSTRUCTION
--------------------------------------------------------- */

.construction {
    width: min(
        calc(100% - 40px),
        800px
    );

    margin: auto;

    padding-top: 15vh;

    text-align: center;
}


.construction-symbol {
    color: var(--blue);

    font-size: 80px;
}


.construction h1 {
    margin-bottom: 5px;

    font-size:
        clamp(
            45px,
            9vw,
            85px
        );
}


.construction h2 {
    color: var(--blue);

    letter-spacing: 0.15em;
}


.construction p {
    color: var(--steel);

    font-size: 18px;
}


.button {
    display: inline-block;

    margin-top: 30px;

    padding:
        15px
        22px;

    border:
        1px
        solid
        var(--blue);

    color: var(--blue);

    font-weight: bold;

    text-decoration: none;
}


.button:hover {
    color: var(--black);

    background: var(--blue);
}


/* ---------------------------------------------------------
   COMIC READER
--------------------------------------------------------- */

.reader-page {
    height: 100vh;

    overflow: hidden;

    background: var(--black);
}


.reader-header {
    height: 60px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0
        20px;

    border-bottom:
        1px
        solid
        #173244;

    background: #03070a;
}


.reader-header div {
    display: flex;

    gap: 12px;

    align-items: baseline;
}


.reader-header strong {
    color: var(--blue);

    letter-spacing: 0.15em;
}


.reader-header span {
    color: var(--steel);

    font-size: 12px;
}


.back-button {
    color: var(--ice);

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 0.1em;

    text-decoration: none;
}


.pdf-reader {
    display: block;

    width: 100%;

    height: calc(100vh - 60px);

    border: 0;
}


/* ---------------------------------------------------------
   SMALL SCREENS
--------------------------------------------------------- */

@media (max-width: 600px) {

    .home {
        padding-top: 40px;
    }


    .hero {
        padding-left: 18px;
    }


    .menu-card {
        grid-template-columns:
            42px
            1fr
            auto;

        min-height: 75px;

        padding:
            15px
            15px;
    }

}


/* ---------------------------------------------------------
   MESSAGE HUDSON
--------------------------------------------------------- */

.message-page {
    width: min(
        calc(100% - 40px),
        850px
    );

    margin: auto;

    padding:
        60px
        0;
}


.message-page h1 {
    margin:
        10px
        0;

    font-size:
        clamp(
            45px,
            9vw,
            85px
        );

    line-height: 0.9;

    letter-spacing: -0.04em;
}


.message-intro {
    color: var(--steel);

    font-size: 18px;

    margin-bottom: 40px;
}


.message-form {
    display: grid;

    gap: 12px;

    padding:
        25px;

    border:
        1px
        solid
        #193445;

    background: #050b10;
}


.message-form label {
    margin-top: 8px;

    color: var(--blue);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 0.18em;
}


.message-form input,
.message-form textarea {
    width: 100%;

    padding:
        15px;

    border:
        1px
        solid
        #294656;

    background:
        var(--almost-black);

    color:
        var(--white);

    font: inherit;
}


.message-form textarea {
    min-height: 130px;

    resize: vertical;
}


.message-form input:focus,
.message-form textarea:focus {
    outline:
        2px
        solid
        var(--blue);

    border-color:
        transparent;
}


.message-form button {
    margin-top: 10px;

    padding:
        16px;

    border: 0;

    background:
        var(--blue);

    color:
        var(--black);

    font-size: 16px;

    font-weight: 900;

    letter-spacing: 0.08em;

    cursor: pointer;
}


.message-form button:hover {
    background:
        var(--blue-bright);
}


.form-error {
    color: #ff8b8b;

    font-weight: bold;
}


.message-wall {
    margin-top: 60px;
}


.message-wall h2 {
    color:
        var(--blue);

    letter-spacing:
        0.12em;
}


.message-card {
    margin:
        12px
        0;

    padding:
        20px;

    border-left:
        4px
        solid
        var(--blue);

    background:
        linear-gradient(
            90deg,
            #07131c,
            #05090d
        );
}


.message-name {
    color:
        var(--blue-bright);

    font-weight:
        900;

    letter-spacing:
        0.08em;
}


.message-card p {
    line-height:
        1.5;

    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;
}


.message-date {
    color:
        #496170;

    font-size:
        11px;
}


.no-messages {
    color:
        var(--steel);
}


/* ---------------------------------------------------------
   ADMIN
--------------------------------------------------------- */

.delete-button {
    margin-top: 12px;

    padding:
        9px
        12px;

    border:
        1px solid #ff7676;

    background:
        transparent;

    color:
        #ff9c9c;

    font-weight:
        800;

    cursor:
        pointer;
}


.delete-button:hover {
    background:
        #ff7676;

    color:
        #000;
}


/* ---------------------------------------------------------
   VIDEO GAMES
--------------------------------------------------------- */

.games-page {
    width: min(
        calc(100% - 40px),
        var(--max-width)
    );

    margin: auto;

    padding:
        60px
        0;
}


.games-header {
    margin:
        35px
        0
        55px;

    border-left:
        5px
        solid
        var(--blue);

    padding-left:
        28px;
}


.games-header h1 {
    margin:
        0
        0
        25px;

    font-size:
        clamp(
            60px,
            11vw,
            120px
        );

    line-height:
        0.8;

    letter-spacing:
        -0.06em;
}


.games-header p:last-child {
    color:
        var(--steel);

    font-size:
        18px;
}


.game-library {
    display:
        grid;

    gap:
        20px;
}


.game-card {
    padding:
        clamp(
            25px,
            5vw,
            45px
        );

    border:
        1px
        solid
        #193445;

    background:
        linear-gradient(
            135deg,
            #081722,
            #030609
        );
}


.game-number {
    color:
        var(--blue);

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        0.2em;
}


.game-card h2 {
    margin:
        10px
        0;

    font-size:
        clamp(
            38px,
            8vw,
            75px
        );

    letter-spacing:
        -0.04em;
}


.game-card p {
    max-width:
        550px;

    color:
        var(--steel);

    font-size:
        18px;

    line-height:
        1.5;
}


.game-tags {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin:
        25px
        0;
}


.game-tags span {
    padding:
        6px
        9px;

    border:
        1px
        solid
        #294656;

    color:
        var(--blue-bright);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        0.1em;
}


.play-button {
    display:
        inline-block;

    margin-top:
        10px;

    padding:
        16px
        22px;

    background:
        var(--blue);

    color:
        var(--black);

    font-weight:
        900;

    letter-spacing:
        0.08em;

    text-decoration:
        none;
}


.play-button:hover {
    background:
        var(--blue-bright);
}


/* ---------------------------------------------------------
   VANTAGE COMIC READER V1
--------------------------------------------------------- */

.comic-reader-page {
    margin: 0;

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% 10%,
            #0a2534,
            #000 45%
        );

    color:
        var(--white);
}


.comic-reader-header {
    position:
        sticky;

    top:
        0;

    z-index:
        20;

    min-height:
        62px;

    display:
        grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items:
        center;

    gap:
        15px;

    padding:
        10px
        18px;

    border-bottom:
        1px
        solid
        #183244;

    background:
        rgba(
            2,
            7,
            11,
            0.94
        );

    backdrop-filter:
        blur(10px);
}


.reader-title {
    display:
        flex;

    align-items:
        baseline;

    gap:
        10px;
}


.reader-title strong {
    color:
        var(--blue);

    letter-spacing:
        0.15em;
}


.reader-title span {
    color:
        var(--steel);

    font-size:
        11px;
}


.page-counter {
    justify-self:
        end;

    color:
        var(--blue-bright);

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        0.12em;
}


.comic-stage {
    display:
        grid;

    grid-template-columns:
        70px
        minmax(0, 1fr)
        70px;

    align-items:
        center;

    gap:
        16px;

    width:
        min(
            calc(100% - 20px),
            1200px
        );

    margin:
        0
        auto;

    padding:
        24px
        0;
}


.comic-page-shell {
    display:
        flex;

    justify-content:
        center;

    min-width:
        0;
}


.comic-page-image {
    display:
        block;

    width:
        auto;

    max-width:
        100%;

    max-height:
        calc(100vh - 160px);

    object-fit:
        contain;

    box-shadow:
        0 15px 55px
        rgba(
            0,
            0,
            0,
            0.65
        );

    user-select:
        none;

    -webkit-user-drag:
        none;
}


.reader-nav {
    width:
        58px;

    height:
        90px;

    border:
        1px
        solid
        #244c62;

    border-radius:
        12px;

    background:
        rgba(
            5,
            16,
            24,
            0.85
        );

    color:
        var(--blue);

    font-size:
        32px;

    font-weight:
        900;

    cursor:
        pointer;
}


.reader-nav:hover {
    border-color:
        var(--blue);

    background:
        #092434;
}


.reader-nav:disabled {
    opacity:
        0.18;

    cursor:
        default;
}


.comic-reader-controls {
    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        20px;

    padding:
        12px
        18px
        24px;
}


.reader-button {
    min-width:
        130px;

    padding:
        13px
        16px;

    border:
        1px
        solid
        var(--blue);

    background:
        transparent;

    color:
        var(--blue);

    font-weight:
        900;

    letter-spacing:
        0.08em;

    cursor:
        pointer;
}


.reader-button:hover {
    background:
        var(--blue);

    color:
        #000;
}


.reader-button:disabled {
    opacity:
        0.25;

    cursor:
        default;
}


.reader-hint {
    color:
        var(--steel);

    font-size:
        11px;

    letter-spacing:
        0.08em;
}


@media (max-width: 700px) {

    .comic-reader-header {
        grid-template-columns:
            auto
            1fr
            auto;
    }


    .reader-title {
        justify-content:
            center;
    }


    .comic-stage {
        grid-template-columns:
            1fr;

        width:
            100%;

        padding:
            12px
            8px;
    }


    .comic-page-image {
        max-height:
            none;

        width:
            100%;

        height:
            auto;
    }


    .reader-nav {
        display:
            none;
    }


    .comic-reader-controls {
        position:
            sticky;

        bottom:
            0;

        z-index:
            20;

        justify-content:
            space-between;

        gap:
            8px;

        padding:
            10px;

        border-top:
            1px
            solid
            #183244;

        background:
            rgba(
                2,
                7,
                11,
                0.95
            );

        backdrop-filter:
            blur(10px);
    }


    .reader-button {
        min-width:
            0;

        flex:
            1;
    }


    .reader-hint {
        display:
            none;
    }

}


/* ---------------------------------------------------------
   HUDSON MUSIC
--------------------------------------------------------- */

.music-page {
    width: min(
        calc(100% - 40px),
        var(--max-width)
    );

    margin: auto;

    padding:
        60px
        0;
}


.music-header {
    margin:
        35px
        0
        55px;

    padding-left:
        28px;

    border-left:
        5px
        solid
        var(--blue);
}


.music-header h1 {
    margin:
        0
        0
        25px;

    font-size:
        clamp(
            65px,
            12vw,
            125px
        );

    line-height:
        0.8;

    letter-spacing:
        -0.06em;
}


.music-header p:last-child {
    color:
        var(--steel);

    font-size:
        18px;
}


.track-list {
    display:
        grid;

    gap:
        20px;
}


.track-card {
    padding:
        clamp(
            25px,
            5vw,
            45px
        );

    border:
        1px
        solid
        #193445;

    background:
        linear-gradient(
            135deg,
            #081722,
            #030609
        );
}


.track-number {
    color:
        var(--blue);

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        0.2em;
}


.track-card h2 {
    margin:
        10px
        0;

    font-size:
        clamp(
            38px,
            8vw,
            72px
        );

    letter-spacing:
        -0.04em;
}


.track-description {
    color:
        var(--steel);

    font-size:
        17px;
}


.audio-player {
    width:
        100%;

    margin-top:
        25px;
}


/* ---------------------------------------------------------
   HUDSON CUSTOM MUSIC PLAYER V1
--------------------------------------------------------- */

.hudson-player {
    position:
        relative;

    overflow:
        hidden;

    padding:
        clamp(
            24px,
            5vw,
            45px
        );

    border:
        1px
        solid
        #1c4258;

    background:
        linear-gradient(
            135deg,
            #071722,
            #020608 70%
        );

    box-shadow:
        0 20px 70px
        rgba(
            0,
            0,
            0,
            0.35
        );
}


.player-heading {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        25px;
}


.player-heading h2 {
    margin:
        8px
        0;

    font-size:
        clamp(
            38px,
            8vw,
            72px
        );

    line-height:
        0.95;

    letter-spacing:
        -0.05em;
}


.big-play-button {
    flex:
        0
        0
        auto;

    width:
        76px;

    height:
        76px;

    display:
        grid;

    place-items:
        center;

    padding:
        0;

    border:
        2px
        solid
        var(--blue);

    border-radius:
        50%;

    background:
        var(--blue);

    color:
        #000;

    font-size:
        26px;

    font-weight:
        900;

    cursor:
        pointer;
}


.big-play-button:hover {
    background:
        var(--blue-bright);

    transform:
        scale(1.04);
}


.waveform-wrap {
    position:
        relative;

    height:
        150px;

    margin-top:
        35px;

    overflow:
        hidden;

    border-top:
        1px
        solid
        #173446;

    border-bottom:
        1px
        solid
        #173446;
}


.waveform {
    --progress:
        0%;

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        3px;

    padding:
        12px
        0;

    pointer-events:
        none;
}


.wave-bar {
    flex:
        1;

    min-width:
        2px;

    max-width:
        10px;

    background:
        linear-gradient(
            to right,
            var(--blue) 0,
            var(--blue) var(--progress),
            #24404f var(--progress),
            #24404f 100%
        );

    opacity:
        0.95;
}


/*
 * The range control sits invisibly over the waveform.

 * That means clicking or dragging anywhere across the
 * waveform seeks through the song.
 */

.seek-bar {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    margin:
        0;

    opacity:
        0;

    cursor:
        pointer;
}


.player-info {
    display:
        grid;

    grid-template-columns:
        70px
        1fr
        70px;

    align-items:
        center;

    margin-top:
        12px;

    color:
        var(--steel);

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size:
        12px;
}


.now-playing {
    justify-self:
        center;

    color:
        var(--blue);

    font-weight:
        900;

    letter-spacing:
        0.14em;
}


#duration {
    justify-self:
        end;
}


@media (max-width: 600px) {

    .big-play-button {
        width:
            62px;

        height:
            62px;
    }


    .waveform-wrap {
        height:
            110px;
    }


    .waveform {
        gap:
            2px;
    }


    .player-info {
        grid-template-columns:
            55px
            1fr
            55px;
    }

}


/* ---------------------------------------------------------
   REAL AUDIO WAVEFORM
--------------------------------------------------------- */

.real-waveform-wrap {
    position: relative;

    width: 100%;
    height: 180px;

    margin-top: 35px;

    overflow: hidden;

    border-top:
        1px
        solid
        #173446;

    border-bottom:
        1px
        solid
        #173446;

    background:
        #020608;
}


.real-waveform {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: fill;

    user-select: none;
    pointer-events: none;
}


.waveform-unplayed {
    opacity: 0.22;

    filter:
        grayscale(1)
        brightness(1.3);
}


.waveform-played {
    position: absolute;

    top: 0;
    left: 0;
    bottom: 0;

    width: 0%;

    overflow: hidden;

    pointer-events: none;
}


.waveform-played .real-waveform {
    width: 100vw;
    max-width: none;
}


/*
 * Invisible seek control across the waveform.
 */

.real-waveform-wrap .seek-bar {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    margin: 0;

    opacity: 0;

    cursor: pointer;

    z-index: 5;
}


@media (max-width: 600px) {

    .real-waveform-wrap {
        height: 125px;
    }

}


/* ---------------------------------------------------------
   HUDSON REAL WAVEFORM — PROGRESS FIX
--------------------------------------------------------- */

.real-waveform-wrap {
    --wave-width: 100%;
}


.waveform-played {
    position: absolute;

    top: 0;
    left: 0;
    bottom: 0;

    width: 0%;

    overflow: hidden;

    pointer-events: none;

    z-index: 2;
}


.waveform-played .real-waveform {
    position: absolute;

    top: 0;
    left: 0;

    /*
     * JS will set this to the actual width of the waveform
     * container so the image NEVER squishes while being clipped.
     */

    width: var(--wave-pixel-width, 100vw);

    max-width: none;

    height: 100%;

    object-fit: fill;
}


.waveform-unplayed {
    z-index: 1;
}


.real-waveform-wrap .seek-bar {
    z-index: 5;
}


/* ---------------------------------------------------------
   HUDSON MUSIC COMMENTS
--------------------------------------------------------- */

.track-comments {
    margin-top: 35px;
    padding-top: 25px;

    border-top:
        1px solid
        #173446;
}


.track-comments h3 {
    margin:
        0 0 18px;

    color:
        var(--blue);

    font-size:
        14px;

    letter-spacing:
        0.18em;
}


.comment-form {
    display:
        grid;

    gap:
        15px;
}


.comment-form label {
    display:
        grid;

    gap:
        7px;

    color:
        var(--steel);

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        0.12em;
}


.comment-form input,
.comment-form textarea {
    box-sizing:
        border-box;

    width:
        100%;

    padding:
        13px;

    border:
        1px solid
        #23495e;

    background:
        #02070a;

    color:
        white;

    font:
        inherit;

    font-size:
        16px;

    letter-spacing:
        normal;
}


.comment-form textarea {
    resize:
        vertical;
}


.comment-form input:focus,
.comment-form textarea:focus {
    outline:
        2px solid
        var(--blue);

    outline-offset:
        2px;
}


.comment-button {
    justify-self:
        start;

    padding:
        12px 18px;

    border:
        1px solid
        var(--blue);

    background:
        var(--blue);

    color:
        #001018;

    font-weight:
        900;

    cursor:
        pointer;
}


.comment-list {
    display:
        grid;

    gap:
        10px;

    margin-top:
        25px;
}


.music-comment {
    padding:
        15px;

    border-left:
        3px solid
        var(--blue);

    background:
        rgba(255,255,255,0.035);
}


.music-comment strong {
    color:
        var(--blue);
}


.music-comment p {
    margin:
        7px 0 0;

    white-space:
        pre-wrap;

    overflow-wrap:
        anywhere;
}


.no-comments {
    color:
        var(--steel);

    font-style:
        italic;
}


/* ---------------------------------------------------------
   HUDSON SKATE CLIPS
--------------------------------------------------------- */

.skate-page {
    width: min(
        calc(100% - 40px),
        var(--max-width)
    );

    margin: auto;

    padding:
        60px
        0;
}


.skate-header {
    margin:
        35px
        0
        55px;

    padding-left:
        28px;

    border-left:
        5px
        solid
        var(--blue);
}


.skate-header h1 {
    margin:
        0
        0
        25px;

    font-size:
        clamp(
            65px,
            12vw,
            125px
        );

    line-height:
        0.8;

    letter-spacing:
        -0.06em;
}


.skate-header p:last-child {
    color:
        var(--steel);

    font-size:
        18px;
}


.skate-list {
    display:
        grid;

    gap:
        20px;
}


.skate-card {
    padding:
        clamp(
            22px,
            4vw,
            40px
        );

    border:
        1px solid
        #193445;

    background:
        linear-gradient(
            135deg,
            #081722,
            #030609
        );
}


.skate-card h2 {
    margin:
        10px
        0
        22px;

    font-size:
        clamp(
            38px,
            8vw,
            72px
        );

    letter-spacing:
        -0.04em;
}


.skate-video {
    display:
        block;

    width:
        100%;

    max-width:
        100%;

    border:
        1px solid
        #244c62;

    background:
        #000;
}


/* ---------------------------------------------------------
   SKATE COMMENTS
--------------------------------------------------------- */

.skate-comments {
    margin-top: 32px;
    padding-top: 28px;

    border-top:
        1px solid
        #193445;
}


.skate-comments h3 {
    margin:
        0
        0
        20px;

    font-size:
        clamp(
            28px,
            5vw,
            42px
        );
}


.skate-comment-form {
    display:
        grid;

    gap:
        10px;

    margin-bottom:
        32px;
}


.skate-comment-form label {
    margin-top:
        8px;

    font-weight:
        800;

    letter-spacing:
        0.08em;
}


.skate-comment-form input,
.skate-comment-form textarea {
    box-sizing:
        border-box;

    width:
        100%;

    padding:
        14px;

    border:
        1px solid
        #244c62;

    background:
        #050b0f;

    color:
        inherit;

    font:
        inherit;
}


.skate-comment-form textarea {
    min-height:
        110px;

    resize:
        vertical;
}


.skate-comment-form button {
    justify-self:
        start;

    margin-top:
        8px;

    padding:
        12px 18px;

    border:
        1px solid
        #244c62;

    background:
        #0b1c27;

    color:
        inherit;

    font:
        inherit;

    font-weight:
        800;

    cursor:
        pointer;
}


.skate-comment-wall {
    display:
        grid;

    gap:
        12px;
}


.skate-comment {
    padding:
        18px;

    border-left:
        3px solid
        var(--blue);

    background:
        #050b0f;
}


.skate-comment p {
    margin:
        8px
        0;
}