:root {
    --px: 4px;
    --px-font: 'DotGothic16', 'MS Gothic', monospace;
    --px-ink: color-mix(in srgb, var(--text-main) 30%, #ece8ea);
    --px-dark: #07040a;
    --px-frame: color-mix(in srgb, var(--neon-primary) 38%, #140c16);
    --px-frame-on: color-mix(in srgb, var(--neon-primary) 78%, #000);
}

/* 12 rectangles for some stairs. i hate css */
:root #desktop > #win-info.bedazzled-border {
    --u: var(--px);
    border: 0; border-radius: 0; padding: var(--u);
    background: transparent !important;
    box-shadow: 0 22px 40px rgba(0, 0, 0, 0.55), 0 6px 12px rgba(0, 0, 0, 0.45);
}
:root #desktop > #win-info.bedazzled-border.is-active { box-shadow: 0 26px 48px rgba(0, 0, 0, 0.6), 0 6px 14px rgba(0, 0, 0, 0.5); }
#desktop > #win-info.bedazzled-border::before {
    inset: 0; padding: 0; border-radius: 0; opacity: 1;
    background: var(--px-frame);
    -webkit-mask: none; mask: none;
    -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0),
        linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0),
        linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0),
        linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0),
        linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: left calc(var(--u) * 3) top 0, left calc(var(--u) * 3) bottom 0, left 0 top calc(var(--u) * 3), right 0 top calc(var(--u) * 3),
        left var(--u) top var(--u), left var(--u) top calc(var(--u) * 2), right var(--u) top var(--u), right var(--u) top calc(var(--u) * 2),
        left var(--u) bottom var(--u), left var(--u) bottom calc(var(--u) * 2), right var(--u) bottom var(--u), right var(--u) bottom calc(var(--u) * 2);
    mask-position: left calc(var(--u) * 3) top 0, left calc(var(--u) * 3) bottom 0, left 0 top calc(var(--u) * 3), right 0 top calc(var(--u) * 3),
        left var(--u) top var(--u), left var(--u) top calc(var(--u) * 2), right var(--u) top var(--u), right var(--u) top calc(var(--u) * 2),
        left var(--u) bottom var(--u), left var(--u) bottom calc(var(--u) * 2), right var(--u) bottom var(--u), right var(--u) bottom calc(var(--u) * 2);
    -webkit-mask-size: calc(100% - var(--u) * 6) var(--u), calc(100% - var(--u) * 6) var(--u), var(--u) calc(100% - var(--u) * 6), var(--u) calc(100% - var(--u) * 6),
        calc(var(--u) * 2) var(--u), var(--u) var(--u), calc(var(--u) * 2) var(--u), var(--u) var(--u),
        calc(var(--u) * 2) var(--u), var(--u) var(--u), calc(var(--u) * 2) var(--u), var(--u) var(--u);
    mask-size: calc(100% - var(--u) * 6) var(--u), calc(100% - var(--u) * 6) var(--u), var(--u) calc(100% - var(--u) * 6), var(--u) calc(100% - var(--u) * 6),
        calc(var(--u) * 2) var(--u), var(--u) var(--u), calc(var(--u) * 2) var(--u), var(--u) var(--u),
        calc(var(--u) * 2) var(--u), var(--u) var(--u), calc(var(--u) * 2) var(--u), var(--u) var(--u);
}
#desktop > #win-info.bedazzled-border.is-active::before {
    background: conic-gradient(from var(--wa), transparent 0 8%, var(--neon-secondary) 28%, #fff 33%, transparent 40% 58%, var(--neon-secondary) 78%, #fff 83%, transparent 90%), var(--px-frame-on);
}
#desktop > #win-info.bedazzled-border::after {
    border-radius: 0;
    clip-path: polygon(calc(var(--u) * 3) 0, calc(100% - var(--u) * 3) 0, calc(100% - var(--u) * 3) var(--u), calc(100% - var(--u)) var(--u), calc(100% - var(--u)) calc(var(--u) * 3), 100% calc(var(--u) * 3),
        100% calc(100% - var(--u) * 3), calc(100% - var(--u)) calc(100% - var(--u) * 3), calc(100% - var(--u)) calc(100% - var(--u)), calc(100% - var(--u) * 3) calc(100% - var(--u)), calc(100% - var(--u) * 3) 100%,
        calc(var(--u) * 3) 100%, calc(var(--u) * 3) calc(100% - var(--u)), var(--u) calc(100% - var(--u)), var(--u) calc(100% - var(--u) * 3), 0 calc(100% - var(--u) * 3),
        0 calc(var(--u) * 3), var(--u) calc(var(--u) * 3), var(--u) var(--u), calc(var(--u) * 3) var(--u));
}

:root #desktop > #win-info.bedazzled-border .window-header {
    border-radius: 0; border-bottom: var(--px) solid var(--px-frame) !important;
    box-shadow: inset 0 var(--px) 0 rgba(255, 255, 255, 0.06);
    padding: 7px 8px 7px 12px !important;
}
:root #desktop > #win-info.bedazzled-border.is-active .window-header { border-bottom-color: var(--px-frame-on) !important; }
:root #desktop > #win-info.bedazzled-border .window-header > span:first-child {
    font-family: var(--px-font); font-weight: normal; font-size: 16px; letter-spacing: 1px !important; color: var(--px-ink);
}
:root #desktop > #win-info.bedazzled-border.is-active .window-header > span:first-child { color: #fff; text-shadow: 2px 2px 0 #000 !important; }
:root #desktop > #win-info.bedazzled-border .window-header > span:first-child::before { width: 6px; height: 6px; border-radius: 0; margin-bottom: 3px; box-shadow: none; }
:root #desktop > #win-info.bedazzled-border .win-btn,
:root #desktop > #win-info.bedazzled-border .kill-btn {
    width: 22px; height: 18px; margin: 0 3px; border-radius: 0; border: 0 !important;
    background: #231c27 !important;
    box-shadow: 0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000, 2px 0 0 #000, inset 2px 2px 0 rgba(255, 255, 255, 0.14), inset -2px -2px 0 rgba(0, 0, 0, 0.5);
}
:root #desktop > #win-info.bedazzled-border .win-btn::before,
:root #desktop > #win-info.bedazzled-border .kill-btn::before { --gw: 10px; }
:root #desktop > #win-info.bedazzled-border .min-btn { --gl: var(--gl-px-min); }
:root #desktop > #win-info.bedazzled-border .max-btn { --gl: var(--gl-px-max); }
:root #desktop > #win-info.bedazzled-border .kill-btn { --gl: var(--gl-px-x); }
:root #desktop > #win-info.bedazzled-border .win-btn:hover { background: var(--neon-primary) !important; box-shadow: 0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000, 2px 0 0 #000, inset 2px 2px 0 rgba(255, 255, 255, 0.35), inset -2px -2px 0 rgba(0, 0, 0, 0.35); }
:root #desktop > #win-info.bedazzled-border .kill-btn:hover { background: #d0193a !important; box-shadow: 0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000, 2px 0 0 #000, inset 2px 2px 0 rgba(255, 255, 255, 0.3), inset -2px -2px 0 rgba(0, 0, 0, 0.4); }
:root #desktop > #win-info.bedazzled-border .win-btn:active,
:root #desktop > #win-info.bedazzled-border .kill-btn:active { transform: translateY(2px); }

:root #desktop > #win-info.bedazzled-border .window-body {
    border-radius: 0; color: var(--px-ink) !important;
    background: var(--grain, none), linear-gradient(180deg, #0b070d, #070409) !important;
    background-size: 180px 180px, auto !important;
}
:root #desktop > #win-info.bedazzled-border.is-active .window-body { box-shadow: inset 0 8px 16px -8px rgba(0, 0, 0, 0.8); }

/* me */
#win-info .pf-av { width: 104px; height: 104px; background: #050307; box-shadow: 0 -3px 0 #000, 0 3px 0 #000, -3px 0 0 #000, 3px 0 0 #000, inset 3px 3px 0 rgba(255, 255, 255, 0.06); }
#win-info .pf-av canvas { filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.7)); }

#desktop #win-info .window-body .banner-box {
    border-radius: 0; border: 0; margin: 0 var(--px) 26px; padding: 10px 14px;
    font-family: var(--px-font); font-size: 16px; color: var(--neon-secondary); text-shadow: none;
    background: #050307;
    box-shadow: 0 calc(var(--px) * -1) 0 #000, 0 var(--px) 0 #000, calc(var(--px) * -1) 0 0 #000, var(--px) 0 0 #000, inset var(--px) 0 0 var(--px-frame);
}

#desktop #win-info .window-body .section-title {
    font-family: var(--px-font); font-weight: normal; font-size: 24px; letter-spacing: 2px;
    color: var(--neon-secondary); text-shadow: 2px 2px 0 #000; padding-bottom: 12px;
}
#desktop #win-info .window-body .section-title::after {
    height: var(--px); border-radius: 0; box-shadow: none;
    background: repeating-linear-gradient(90deg, var(--px-frame-on) 0 9px, transparent 9px 12px);
}
#desktop #win-info .window-body .window-text { color: var(--px-ink); text-shadow: none; }


@media (max-width: 620px) {
    #win-info .pf-av { margin: 0 auto; }
    #desktop #win-info .window-body .section-title { font-size: 20px; letter-spacing: 1px; }
    /* phones. ugh */
}
/* the card already says who I am. the :: PROFILE :: line can go */
#win-info .section-title { display: none; }