Pro for cherryiisyu

/* Profile By AlthIndor */

:root {
    /* Colors */

    --accent-color: hotpink;
    --border-color: #808080;
    --gradient-left: lightblue;
    --gradient-right: lightpink;
    --inset-color: #F4F4F4;
    --outset-color: #FFFFFF;
    --scrollbar-color: #C0C0C0;
    --text-color: #404040;
    --title-color: #FFFFFF;
    --window-color: #F8F8F8;

    /* Effects */

    --border: 1px solid var(--border-color);
    --large-radius: 6px;
    --small-radius: 3px;
    --taskbar-height: 35px;
    --window-left-offset: 5vw;
    --window-top-offset: 5vh;

    /* Images */

    --column-two-bg:
        repeating-linear-gradient(180deg, transparent 0px, transparent 20px, #F0F0F0 20px, #F0F0F0 21px),
        repeating-linear-gradient(090deg, transparent 0px, transparent 20px, #F0F0F0 20px, #F0F0F0 21px) #E0E0E0;

    --custom-picture: url('https://i.imgur.com/SydcDEO.jpg') center / cover;
    --details-picture: url('https://i.imgur.com/SydcDEO.jpg') center / cover;
    --main-gradient: linear-gradient(to right, var(--gradient-left), var(--gradient-right)) border-box;
    --music-picture: url('https://i.imgur.com/ZH28A6x.png') top center / cover;
    --wallpaper: url('https://i.imgur.com/u2Qb2ZB.jpg') center / cover;

    --cursor-out: url('https://i.imgur.com/QhWqHdc.png');
    --cursor-ovr: url('https://i.imgur.com/3daS0uP.png');
}

html, body {
    background: var(--wallpaper) var(--gradient-right);
    overflow: hidden;
}
body a {text-decoration: none !important;}

body {cursor: var(--cursor-out), auto;}
a, button {cursor: var(--cursor-ovr), pointer !important;}

#gaia_header, #columns {box-shadow: 0 2px 5px #00000040;}
.bbcode-swapping-image {mix-blend-mode: multiply;}

::selection {
    background: var(--accent-color);
    color: #FFFFFF;
}

/* Fonts */

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTSGmu1aB.woff2) format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    src: url(https://fonts.gstatic.com/s/opensans/v40/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2) format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/ibmplexmono/v19/-F6qfjptAgt5VM-kVkqdyU8n3pQPwlBFgg.woff2) format('woff2');
}

@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/lora/v35/0QI6MX1D_JOuGQbT0gvTJPa787z5vBJBkq0.woff2) format('woff2');
}

@font-face {
    font-family: 'Font Awesome';
    font-style: normal;
    font-weight: 900;
    src: url(https://ka-f.fontawesome.com/releases/v6.6.0/webfonts/free-fa-solid-900.woff2) format('woff2');
}

@font-face {
    font-family: 'Font Awesome Brands';
    font-style: normal;
    font-weight: 400;
    src: url(https://ka-f.fontawesome.com/releases/v6.6.0/webfonts/free-fa-brands-400.woff2) format('woff2');
}

/* Header */

#viewer #gaia_header, #viewer #gaia_header :is(ul, li, a) {
    display: flex !important;
    height: var(--taskbar-height) !important;
}

#gaia_header {
    backdrop-filter: blur(5px);
    background: #000000C0 !important;
    justify-content: space-between;

    ul {
        background: unset !important;
        font-size: 0 !important;
        position: unset !important;
        width: unset !important;

        a {
            color: #FFFFFF !important;
            font: 500 12px 'Open Sans', sans-serif !important;
            text-transform: capitalize;
            padding: 0 8px;
            place-items: center;
            box-sizing: border-box;
        }

        gap: 3px;
    }

    #header_left {
        img {
            mask: url('https://i.imgur.com/yXkQsjW.png');
            background: #FFFFFF;
            width: 0;
            height: 21px;
            padding: 0 46px 0 0;
        }
        li:nth-of-type(2) a:hover img {background: var(--accent-color);}
    }

    #header_left li:nth-of-type(n+3) a, #header_right a {
        padding-bottom: 2px;
        border-top: 2px solid currentColor;
    }

    #header_left li:nth-of-type(n+3) a:hover, #header_right a:hover {
        background: #FFFFFF20 !important;
        border-color: var(--accent-color) !important;
    }
}

#gaia_header a::before {
    font: 12px 'Font Awesome';
    margin-right: 5px;
}
#gaia_header a[href*='/mygaia/']::before {content: '';}
#gaia_header a[href*='/market/']::before {content: '';}
#gaia_header a[href*='/forum/']::before {content: '';}
#gaia_header a[href*='/world/']::before {content: '';}
#gaia_header a[href*='/games/']::before {content: '';}
#gaia_header a[href*='/profiles/']::before {content: '';}
#gaia_header a[href*='mode=edit']::before {content: '';}
#gaia_header a[href*='auth/logout']::before {content: '';}
#gaia_header a[href*='report.php']::before {content: '';}

/* Special Feature */

#gaia_header #header_right {margin-right: 11px !important;}

#gaia_header li.spacer {
    width: 5px;
    padding: 0;
    position: absolute;
    right: 0;
    border-left: var(--border);
}

#columns, .column {transition: opacity .3s ease-in-out;}
body:has(.spacer:hover) :is(#columns, .column) {transition-delay: .5s;}
body:has(.spacer:hover) #columns {opacity: .25;}
body:has(.spacer:hover) .column {opacity: 0;}

/* Basic Layout */

#columns, #columns .column {box-sizing: border-box;}
#columns, #column_3 {border: var(--border);}

#columns {
    background: var(--window-color);
    border-color: #404040;
    border-radius: var(--small-radius);

    .column {
        font-size: 0;
        margin: 0;
        position: absolute;
    }

    width: calc(100% - (var(--window-left-offset) * 2));
    height: calc(100% - var(--taskbar-height) - (var(--window-top-offset) * 2));
    top: calc(var(--taskbar-height) + var(--window-top-offset));
    left: var(--window-left-offset);
}

#column_1, #column_1 .panel {
    width: 100%;
    height: 100%;
}

#column_2, #column_3 {top: 81px;}

#column_2 {
    width: 220px;
    padding-bottom: 47px;
    left: 15px;
    contain: layout;
}

#column_3 {
    background: linear-gradient(to left, var(--border-color) 1px, transparent 1px) local, var(--column-two-bg);
    border-radius: var(--large-radius) 0 0 var(--large-radius);
    width: calc(100% - 265px);
    height: calc(100% - 133px);
    padding: 20px 0 20px 20px;
    right: 15px;

    /* Scroll Settings */

    overflow: hidden scroll;
    scrollbar-color: var(--scrollbar-color) var(--inset-color);
    scrollbar-width: auto;

    /* Prevents Margin Collapse */

    display: grid;
    grid-template: max-content / 100%;
    place-items: start;
}

/* Panel Reasonable Defaults */

.panel, .panel h2 {
    background: none;
    color: var(--text-color);
    margin: 0;
    padding: 0;
}

.panel {
    font: 11px/1.8 'Open Sans', sans-serif;

    a {color: var(--accent-color);}
    a:hover {color: inherit;}

    overflow: hidden;

    img:not(.avatarImage) {max-width: 100% !important;}
}

#column_1 ul {
    display: flex;
    margin: 0;
    position: absolute;
}

#column_2 .panel, #column_3 .panel {
    background: var(--outset-color);
    border: var(--border);
    border-radius: var(--large-radius);
}

#id_about, #id_wishlist, .custom_panel:nth-child(3), #id_comments, #id_friends, #id_footprints {
    grid-area: 1/1/2/2;
    padding: 10px;
    width: calc(100% - 380px);

    h2 {margin: -10px -10px 10px -10px;}

    content-visibility: hidden;
    visibility: hidden;

    transition-property: content-visibility, visibility;
    transition-delay: 86400s;
    transition-behavior: allow-discrete;
}

#column_3 .panel:nth-child(n+7) {position: absolute;}

/* Panel Inset Sections */

#id_details::after, #id_about h2 + div, #id_comments dl, .custom_panel:nth-child(3) h2 + div {
    background: var(--inset-color);
    border: var(--border);
    border-radius: var(--large-radius);
}
#id_about h2 + div, #id_comments dl, .custom_panel:nth-child(3) h2 + div {padding: 10px;}

#id_details::after {
    content: '';
    width: calc(100% - 22px);
    position: absolute;
    bottom: 10px;
    left: 10px;
}

#id_details h2 ~ * {z-index: 1;}

/* Panel Headers */

#column_1 h2, #column_3 h2 {
    background: var(--main-gradient);
    color: var(--title-color);
    font: 500 13px/35px 'IBM Plex Mono', sans-serif;
    letter-spacing: 1px;
    text-indent: 10px;
    border-bottom: var(--border);
}
#column_1 h2 {height: 65px;}
#column_3 h2 {height: 35px;}

#column_1 h2::before {
    content: '';
    font: 400 15px 'Font Awesome Brands';
    margin: 0 7px 0 0;
    position: relative;
    top: 1px;
}

:is(#column_1, #column_3) h2::after,
:is(#column_1, #column_3) .panel:not(.media_panel)::before,
:is(#column_1, #column_3) .panel:not(.media_panel)::after {
    content: '';
    width: 9px;
    height: 9px;
    position: absolute;
    top: 12px;
    border: var(--border);
    border-radius: 50%;
}

:is(#column_1, #column_3) h2::after {
    background: #FFA0A0 padding-box;
    right: 42px;
}

:is(#column_1, #column_3) .panel::before {
    background: #FFFF80 padding-box;
    right: 26px;
}

:is(#column_1, #column_3) .panel::after {
    background: #80FF80 padding-box;
    right: 10px;
}

/* Tabs */

#column_1 ul:nth-of-type(1) {
    gap: 3px;
    top: 39px;
    left: 15px;
}

#column_1 {
    .spoiler-control-hide, span {display: none !important;}

    .spoiler-wrapper {
        height: 26px;
        padding: 0;
        border: var(--border);
        border-bottom: none;
        border-radius: var(--large-radius) var(--large-radius) 0 0;
        box-shadow: 0 -1px var(--border-color) inset;
        overflow: hidden;
    }
    .spoiler-wrapper:hover {background: var(--window-color);}

    .spoiler-control-show {
        display: block !important;
        background: rgb(from var(--window-color) r g b / 50%);
        width: 150px;
        height: 25px;
        color: var(--text-color);
        font: inherit;
        line-height: 25px;
        text-align: center;
        border: none;
        transition: all 0s steps(1) 86400s;
    }

    .spoiler-control-show:focus {
        background: var(--window-color);
        box-shadow: 0 1px var(--window-color);
        font-weight: 700;
    }

    .spoiler-wrapper:nth-of-type(1) button::before {content: 'About The User';}
    .spoiler-wrapper:nth-of-type(2) button::before {content: 'Item Wish List';}
    .spoiler-wrapper:nth-of-type(3) button::before {content: 'My Art Gallery';}
    .spoiler-wrapper:nth-of-type(4) button::before {content: 'Guest Comments';}
    .spoiler-wrapper:nth-of-type(5) button::before {content: 'My Friend List';}
    .spoiler-wrapper:nth-of-type(6) button::before {content: 'Recent Visitors';}
}

/* Tab Functionality */

#columns:has(#column_1 button:focus) #column_1 button,
#columns:has(#column_1 button:focus) #column_3 .panel {
    transition: none;
}

#columns:has(#column_1 .spoiler-wrapper:nth-child(1) button:focus) #id_about,
#columns:has(#column_1 .spoiler-wrapper:nth-child(2) button:focus) #id_wishlist,
#columns:has(#column_1 .spoiler-wrapper:nth-child(3) button:focus) .custom_panel:nth-child(3),
#columns:has(#column_1 .spoiler-wrapper:nth-child(4) button:focus) #id_comments,
#columns:has(#column_1 .spoiler-wrapper:nth-child(5) button:focus) #id_friends,
#columns:has(#column_1 .spoiler-wrapper:nth-child(6) button:focus) #id_footprints {
    content-visibility: visible;
    visibility: visible;
}

/* Details */

#id_details {
    display: grid;
    grid-template: 90px max-content 56px / 100%;
    justify-items: center;
    padding-bottom: 21px;

    h2 {
        font: 700 21px/45px 'Lora', sans-serif;
        letter-spacing: 1px;
        grid-row: 3;
    }

    p {margin: 0;}
    p:nth-of-type(n+2) {height: 20px;}

    p:first-of-type, img {
        border: var(--border);
        border-radius: var(--large-radius);
    }

    p:first-of-type {
        background: var(--main-gradient);
        padding: 3px;
        margin-top: -35px;

        img {
            background: var(--inset-color);
            padding: 5px;
        }
    }
}

#id_details::before {
    content: '';
    background: var(--details-picture);
    width: 100%;
    height: 100%;
    border-bottom: var(--border);
}

#id_details::after {height: calc(100% - 282px);}

/* Online Status */

#id_details .forum_userstatus, #id_details .forum_userstatus .statuslinks span {
    height: 30px;
    text-align: center;
    padding: 0;
}

#id_details .forum_userstatus {
    display: grid;
    grid-template: 100% / 30px 1fr;
    width: calc(100% - 2px);

    .pushBox {display: none;}
    .statuslinks {display: contents;}

    background: var(--main-gradient) 0 0 / 31px no-repeat var(--outset-color);
    border: var(--border);
    border-radius: 15px;
    margin: 0;
    overflow: hidden;

    .statuslinks span {
        background: none !important;
        width: unset;
        color: var(--text-color);
        line-height: 29px;
        text-transform: uppercase;
        border-left: var(--border);
    }
    .statuslinks span::before {content: 'IS ';}

    position: fixed !important;
    top: unset;
    bottom: 0;
    left: 0;
}

.forum_userstatus::before {
    grid-area: 1/1/2/2;
    color: var(--title-color);
    font: 16px/30px 'Font Awesome';
    text-indent: 2px;

    /* Hopefully Well-Supported Now! */

    -webkit-text-stroke: 2px var(--border-color);
    paint-order: stroke fill;
}
.forum_userstatus:has(.online)::before {content: '';}
.forum_userstatus:has(.offline)::before {content: '';}

/* Buttons */

#column_1 ul:nth-of-type(2) {
    gap: 10px;
    bottom: 15px;
    right: 15px;
}

#column_1 a, #id_comments :is(h2 + div, h2 ~ p) a, #column_3 .spoiler-control {
    background: var(--outset-color);
    height: 20px;
    color: inherit;
    font: 500 11px/19px 'Open Sans', sans-serif;
    text-transform: uppercase;
    border: var(--border);
    border-radius: 10px;
}
#column_1 a, #column_3 .spoiler-control {padding: 0 15px;}

#column_1 a:hover, #id_comments :is(h2 + div, h2 ~ p) a:hover, #column_3 .spoiler-control:hover {
    background: var(--accent-color);
    color: #FFFFFF;
}

/* Wish List */

#id_wishlist {
    display: grid;
    gap: 10px;
    grid-auto-rows: max-content;
    grid-template-columns: repeat(2, calc(50% - 5px));

    h2 {
        grid-column: 1/-1;
        margin-bottom: 0 !important;
    }

    .item {position: relative;}
    .premium_sparkle {display: none;}

    a, a::after, img {border: var(--border);}
    a, a::after, img[src*='thumb'] {border-radius: var(--large-radius);}
    a::after, img[src*='thumb'] {background: var(--outset-color);}
    img[src*='thumb'] {padding: 5px;}

    a {
        display: flex;
        gap: 3px;
        background: var(--main-gradient);
        color: inherit;
        font-weight: 400;
        padding: 3px;
    }
    a:hover {background: var(--accent-color);}

    a::after {
        content: attr(title);
        flex-grow: 1;
        line-height: 40px;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 10px;
        overflow: hidden;
    }

    .owner_checkmark {
        background: var(--inset-color);
        margin: 0;
        padding: 2px;
        bottom: 4px;
        left: 30px;
        pointer-events: none;
    }
}

/* Comments */

#id_comments {
    h2 + div .clear, #alerts_banner, dt, .deletecomment {display: none;}
    #alert_container {display: contents;}

    dl {
        clear: both;
        margin-top: 42px;
    }

    dd {
        display: grid;
        gap: 10px;
        grid-auto-flow: column;
        grid-auto-rows: max-content;
        margin: 0 0 10px 0;
    }
    dd:last-of-type {margin: 0;}

    dd:nth-of-type(odd) {
        grid-template-columns: 52px calc(100% - 62px);

        .dropBox {grid-column: 1;}

        .postcontent {
            background: hsl(from var(--gradient-left) h s l / 20%);
            border-radius: var(--large-radius) var(--large-radius) var(--large-radius) 0;
        }
    }

    dd:nth-of-type(even) {
        grid-template-columns: calc(100% - 62px) 52px;

        .dropBox {grid-column: 2;}

        .postcontent {
            background: hsl(from var(--gradient-right) h s l / 20%);
            border-radius: var(--large-radius) var(--large-radius) 0 var(--large-radius);
        }
    }

    .dropBox, .postcontent {
        background: var(--outset-color);
        border: var(--border);
    }
    .postcontent {padding: 10px;}

    .dropBox {
        width: 48px;
        height: 48px;
        border-width: 2px;
        border-radius: 25px;
        outline: 1px solid var(--outset-color);
        outline-offset: -2px;
        overflow: hidden;

        img {
            width: 120px;
            height: 150px;
            margin: -30px 0 0 -47px;
        }

        place-self: end;
    }
}

/* Comments Buttons */

#id_comments :is(h2 + div, h2 ~ p) {
    width: calc(50% - 5px);
    margin: 0;

    a {
        display: block;
        font-size: 0;
        text-align: center;
    }
    a::before {font: 400 11px/19px 'Open Sans', sans-serif;}
}
#id_comments h2 + div {float: left;}
#id_comments h2 ~ p {float: right;}

#id_comments h2 + div a::before {content: 'POST NEW COMMENT';}
#id_comments h2 ~ p a::before {content: 'VIEW ALL COMMENTS';}

/* Friends */

#id_friends {
    h2 ~ :is(div, p) {display: none;}
    ul, li {display: grid;}
    p, span {display: contents;}

    ul {
        gap: 10px;
        grid-auto-rows: max-content;
        grid-template-columns: repeat(2, calc(50% - 5px));
    }

    li {
        grid-template: max-content / max-content 1fr;
        width: unset;
        height: unset;
    }

    li::before, a, .dropBox {
        background: var(--outset-color);
        border: var(--border);
        border-radius: var(--large-radius);
    }
    li::before, .dropBox {pointer-events: none;}
    a, .dropBox {overflow: hidden;}

    li::before {
        content: '';
        grid-area: 1/2/2/3;
        margin: 4px 4px 4px 0;
        z-index: 1;
    }

    a {
        grid-area: 1/1/2/3;
        display: flex;
        flex-flow: column nowrap;
        background: var(--main-gradient);
        color: inherit;
        font: 400 0/1.45 'Open Sans', sans-serif;
        text-align: left;
        padding: 13px 14px 0 69px;
    }
    a:hover {background: var(--accent-color);}

    a::before, a::after {
        font-size: 11px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        z-index: 2;
    }
    a::before {content: attr(title);}
    a::after {content: attr(href);}

    .dropBox {
        grid-area: 1/1/2/2;
        width: 48px;
        height: 48px;
        margin: 4px 3px 4px 4px;
        border-width: 2px;
        outline: 1px solid var(--outset-color);
        outline-offset: -2px;
    }
}

/* Visitors */

#id_footprints .item {
    display: flex;
    background: var(--inset-color);
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    border: var(--border);
    border-radius: 30px;
}
#id_footprints .item:nth-of-type(n+2) {margin-top: 10px;}
#id_footprints .item:nth-of-type(even) {justify-content: end;}

#id_footprints .item::before {
    content: ' visited ';
    white-space: pre;
}

#id_footprints .item a {order: -1;}
#id_footprints .item::after {content: '.';}

/* Media */

.custom_panel:nth-of-type(7) {
    width: 250px;
    height: 160px;

    div {
        background: var(--custom-picture);
        height: calc(100% - 36px);
    }
    .clear {display: none;}

    top: 219px;
    right: 21px;
}

.custom_panel:nth-of-type(8) :is(li:nth-of-type(1), .clear), .media_panel {
    display: flex;
    font: 16px 'Font Awesome';
    place-items: center;
    outline: var(--border);
    outline-color: hsl(from var(--border-color) h s l / 35%);
    outline-offset: -5px;
}

.custom_panel:nth-of-type(8) {
    background: linear-gradient(to bottom, transparent 35px, var(--outset-color) 35px), var(--main-gradient) !important;

    h2 {border-radius: var(--large-radius) var(--large-radius) 0 0;}
    br {display: none;}

    width: 300px;
    height: 187px;

    ul, li, li:nth-of-type(2) span {display: flex;}
    ul, li:nth-of-type(2) {padding: 10px;}
    ul, li:nth-of-type(2) span {gap: 10px;}

    ul {
        flex-flow: row wrap;
        margin: 0;

        li:nth-of-type(1), li:nth-of-type(2), li:nth-of-type(3) span {
            border: var(--border);
            border-radius: var(--large-radius);
        }

        li:nth-of-type(1) {
            background: var(--music-picture);
            width: 80px;
            height: 80px;
            box-shadow: 0 0 0 3px var(--outset-color) inset;
        }

        li:nth-of-type(2), li:nth-of-type(3) span {
            background: var(--inset-color);
            flex-grow: 1;
        }
        li:nth-of-type(2) span, li:nth-of-type(3) {align-items: center;}

        li:nth-of-type(2) {
            flex-flow: column nowrap;
            gap: 5px;
            justify-content: center;

            span::before {font: 16px 'Font Awesome';}
            span:nth-of-type(1)::before {content: '';}
            span:nth-of-type(2)::before {content: '';}
        }

        li:nth-of-type(3) {
            flex: 0 0 100%;
            height: 18px;

            span {
                height: 6px;
                margin: 1px 10px 0 10px;
            }
        }
    }

    top: 60px;
    right: 36px;

    .clear {
        justify-content: space-between;
        background: var(--outset-color);
        width: 90px;
        height: 40px;
        padding: 0 15px;
        position: absolute;
        bottom: -21px;
        left: calc(50% - 61px);
        border: var(--border);
        border-radius: 15px;
    }
    .clear::before {content: '';}
    .clear::after {content: '';}

    overflow: visible;
}

.media_panel {
    width: 50px;
    height: 50px !important;

    h2 {display: none;}

    top: 222px;
    right: 161px;

    iframe {
        width: 300px;
        height: 200px;
        position: absolute;
        bottom: -15px;
        left: -42px;
        transform-origin: bottom left;
        scale: 2;
        opacity: .001;
    }

    place-content: center;
    border-radius: 50% !important;
    box-shadow: 0 0 0 3px inset var(--outset-color);

    /* Chrome Fix */

    clip-path: circle(27px);
}

.media_panel:hover {
    background: var(--accent-color) !important;
    color: #FFFFFF;
}

.media_panel::before {
    content: '';
    background: none !important;
    text-indent: 2px;
}

/* Misc */

#pictures_container, #texts_container {
    position: absolute;
    top: 50%;
    left: 50%;
}

#column_3 {
    .spoiler-wrapper {padding: 0;}
    .spoiler-control {box-sizing: unset;}
    .spoiler-control-show {display: block !important;}
    .spoiler-control-hide {display: none !important;}

    .spoiler-revealed {
        background: var(--outset-color);
        padding: 10px;
        border: var(--border);
        border-radius: var(--large-radius);

        .spoiler-control-show {
            background: var(--accent-color);
            color: #FFFFFF;
            margin-bottom: 10px;
        }
    }
}

/* Semi-Responsive Sizing */

@media (min-width: 1440px) {
    :root {--window-left-offset: 7.5vw;}
    #column_3 {padding: 30px 20px 20px 50px;}
    #column_3 .panel:nth-last-child(n+4) {width: calc(100% - 420px);}
    #column_3 .panel:nth-child(n+7) {margin-right: 30px;}
}

@media (min-width: 1680px) {
    :root {--window-left-offset: 10vw;}
}