/* Windows XP Luna Style CSS */

:root {
    --bg-color: #004e98;
    /* XP Default Blue Desktop */
    --surface: #ece9d8;
    --window-border: #0033cc;
    --title-blue-top: #0058e6;
    --title-blue-bottom: #0043c4;
    --title-text: #ffffff;
    --font-main: Tahoma, "Segoe UI", Arial, sans-serif;
    --taskbar-blue: #245edb;
    --tray-blue: #0f8ee9;
}

* {
    box-sizing: border-box;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" style="filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.4));"><polygon points="1,1 1,20 7,14 11,24 15,22 10,13 18,13" fill="white" stroke="black" stroke-width="1.2"/></svg>') 1 1, default;
}

a,
.btn,
.tab,
.menu-item,
button,
.title-bar-controls button {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" style="filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.4));"><path d="M9,2 L9,10 L6,10 L4,12 L4,18 L9,23 L15,23 L18,18 L18,12 L16,12 L16,10 L14,10 L14,8 L12,8 L12,2 Z" fill="white" stroke="black" stroke-width="1.2" stroke-linejoin="round"/></svg>') 9 2, pointer !important;
}

input,
textarea {
    cursor: text !important;
}



body {
    background-color: var(--bg-color);
    background-image:
        radial-gradient(ellipse at bottom, #2b7af0 0%, #004e98 100%);
    font-family: var(--font-main);
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    border: 2px solid #111;
    color: #000;
    font-size: 30px;

    /* Simulate early 2000s CRT/LCD softness */
    filter: contrast(0.96) saturate(0.95) blur(0.35px);
}

/* Global Retro Scanlines Overlay */
body::after {
    content: " ";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.08) 50%);
    background-size: 100% 3px;
    z-index: 9999;
    pointer-events: none;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.4);
}

/* Window Component */
.window {
    background-color: var(--surface);
    height: calc(100vh - 75px);
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.title-bar {
    background: linear-gradient(180deg, #0058e6 0%, #3a93ff 9%, #288eff 18%, #127dff 27%, #036bde 64%, #0262c9 100%);
    padding: 3px 5px;
    border-radius: 0;
    height: 68px;
}

.title-bar-text {
    color: var(--title-text);
    font-weight: bold;
    font-size: 30px;
    text-shadow: 1px 1px 2px #000;
}

.title-bar-controls button {
    width: 49px;
    height: 49px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: inherit;
    font-size: 26px;
    font-weight: bold;
    border: 1px solid #fff;
    border-radius: 3px;
    background: linear-gradient(180deg, #5398fb 0%, #2067de 100%);
    color: white;
    cursor: default;
    box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.3);
}

.title-bar-controls button:last-child {
    background: linear-gradient(180deg, #e47565 0%, #d1301c 100%);
}

.title-bar-controls button:active {
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* Menu Bar */
.menu-bar {
    padding: 8px 15px;
    background-color: var(--surface);
    border-bottom: 1px solid #ffffff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    margin-bottom: 10px;
    font-size: 26px;
}

.menu-item {
    display: inline-block;
    padding: 10px 23px;
    cursor: pointer;
}

.menu-item:first-letter {
    text-decoration: underline;
}

.menu-item:hover {
    background-color: #316ac5;
    color: white;
}

/* Window Body */
.window-body {
    padding: 19px 19px 0 19px;
    background-color: var(--surface);
}

/* Tab Icons */
.icon-profile,
.icon-socials,
.icon-computer,
.icon-calendar {
    display: inline-block;
    width: 38px;
    height: 38px;
    vertical-align: text-bottom;
    margin-right: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

.icon-profile {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" shape-rendering="crispEdges"><g transform="translate(0.5, 0.5)"><polygon points="2,1 8,1 8,4 11,4 11,13 2,13" fill="%23fff" stroke="%23000" stroke-width="1"/><polygon points="8,1 11,4 8,4" fill="%23ccc" stroke="%23000" stroke-width="1"/><line x1="4" y1="6" x2="9" y2="6" stroke="%23000"/><line x1="4" y1="8" x2="9" y2="8" stroke="%23000"/><line x1="4" y1="10" x2="7" y2="10" stroke="%23000"/></g></svg>');
}

.icon-socials {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect x="3" y="1" width="4" height="4" fill="%230f8ee9"/><rect x="4" y="5" width="2" height="1" fill="%230f8ee9"/><rect x="2" y="6" width="6" height="1" fill="%230f8ee9"/><rect x="1" y="7" width="8" height="5" fill="%230f8ee9"/><rect x="0" y="12" width="10" height="2" fill="%230f8ee9"/><rect x="9" y="5" width="4" height="4" fill="%23328c11"/><rect x="10" y="9" width="2" height="1" fill="%23328c11"/><rect x="8" y="10" width="6" height="1" fill="%23328c11"/><rect x="7" y="11" width="8" height="3" fill="%23328c11"/><rect x="6" y="14" width="10" height="2" fill="%23328c11"/></svg>');
}

/* About me icons */
.icon-computer {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect x="2" y="2" width="12" height="9" fill="%23fff" stroke="%23000"/><rect x="3" y="3" width="10" height="7" fill="%231e90ff"/><rect x="6" y="11" width="4" height="2" fill="%23fff" stroke="%23000"/><rect x="4" y="13" width="8" height="2" fill="%23ccc" stroke="%23000"/></svg>');
}

.icon-calendar {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect x="2" y="3" width="12" height="11" fill="%23fff" stroke="%23000"/><rect x="2" y="3" width="12" height="3" fill="%23ff3333" stroke="%23000"/><rect x="4" y="1" width="2" height="3" fill="%23ccc" stroke="%23000"/><rect x="10" y="1" width="2" height="3" fill="%23ccc" stroke="%23000"/><rect x="4" y="8" width="2" height="2" fill="%23333"/><rect x="7" y="8" width="2" height="2" fill="%23333"/><rect x="10" y="8" width="2" height="2" fill="%23333"/><rect x="4" y="11" width="2" height="2" fill="%23333"/><rect x="7" y="11" width="2" height="2" fill="%23333"/></svg>');
}

.icon-cat {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" shape-rendering="crispEdges"><path d="M2,5 L4,1 L6,4 C8,3 10,3 12,4 L14,1 L15,5 C16,7 15,10 13,12 C10,15 7,15 4,12 C2,10 1,7 2,5 Z" fill="%23ff9900" stroke="%23000" stroke-width="1"/><circle cx="5" cy="7" r="1.5" fill="%23000"/><circle cx="11" cy="7" r="1.5" fill="%23000"/><path d="M7,9 L8,11 L9,9 Z" fill="%23ff66b2"/><path d="M2,9 Q5,10 8,11 Q11,10 14,9" fill="none" stroke="%23000" stroke-width="0.5"/><path d="M1,7 Q4,8 7,9 Q10,8 15,7" fill="none" stroke="%23000" stroke-width="0.5"/></svg>');
    display: inline-block;
    width: 38px;
    height: 38px;
    vertical-align: text-bottom;
    margin-right: 10px;
    background-size: contain;
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

/* Button Icons */
.icon-btn {
    display: inline-block;
    width: 34px;
    height: 34px;
    vertical-align: text-bottom;
    margin-right: 11px;
    background-size: contain;
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

.icon-linkedin {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect x="1" y="1" width="14" height="14" rx="3" fill="%230077b5"/><rect x="4" y="4" width="2" height="2" fill="%23fff"/><rect x="4" y="7" width="2" height="6" fill="%23fff"/><rect x="7" y="7" width="2" height="6" fill="%23fff"/><rect x="9" y="7" width="2" height="2" fill="%23fff"/><rect x="11" y="8" width="2" height="5" fill="%23fff"/></svg>');
}

.icon-wantedly {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect x="1" y="1" width="14" height="14" rx="3" fill="%2326D1D5"/><rect x="3" y="4" width="2" height="5" fill="%23fff"/><rect x="6" y="7" width="4" height="2" fill="%23fff"/><rect x="11" y="4" width="2" height="5" fill="%23fff"/><rect x="4" y="9" width="3" height="3" fill="%23fff"/><rect x="9" y="9" width="3" height="3" fill="%23fff"/></svg>');
}

.icon-github {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect x="1" y="1" width="14" height="14" rx="3" fill="%2324292e"/><rect x="4" y="8" width="8" height="4" fill="%23fff"/><rect x="5" y="5" width="6" height="3" fill="%23fff"/><rect x="4" y="4" width="2" height="2" fill="%23fff"/><rect x="10" y="4" width="2" height="2" fill="%23fff"/><rect x="6" y="7" width="1" height="1" fill="%2324292e"/><rect x="9" y="7" width="1" height="1" fill="%2324292e"/></svg>');
}

.icon-x {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect x="1" y="1" width="14" height="14" rx="3" fill="%23000"/><path d="M4,4 L7,8 L4,12 L5.5,12 L7.8,9.2 L10,12 L12,12 L9,8 L12,4 L10.5,4 L8.2,6.8 L6,4 Z" fill="%23fff"/></svg>');
}

/* Tabs Styling */
.tabs {
    margin-bottom: -1px;
    /* Overlap the border of the content area slightly */
    padding-left: 4px;
    z-index: 1;
    position: relative;
}

.tab {
    background: #ece9d8;
    border: 1px solid #919b9c;
    border-bottom: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 15px 34px;
    font-family: inherit;
    font-size: 28px;
    cursor: pointer;
    margin-top: 4px;
    /* Push unselected tabs down slightly */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.tab:hover {
    background: #fcfcfc;
}

.tab.active {
    background: #fff;
    margin-top: 0;
    padding-bottom: 19px;
    /* Extend into the content area */
    border-bottom: 1px solid #fff;
    z-index: 2;
}

/* User Profile Picture */
.profile-pic-container {
    width: 169px;
    height: 169px;
    border: 4px solid #fff;
    outline: 1px solid #c0c0c0;
    border-radius: 4px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    display: inline-block;
    flex-shrink: 0;
    overflow: hidden;
    background-color: #f0f0f0;
}

.profile-pic {
    width: 112px;
    height: 112px;
    object-fit: cover;
    transform: scale(1.5);
    /* Scales 42px to ~64px (blurring it due to native bilinear scaling) */
    transform-origin: top left;
    filter: sepia(0.15) contrast(0.9) brightness(1.05) blur(0.3px);
    /* Soft Windows XP era CRT/LCD blur */
}

/* Tab Content */
.tab-content {
    background: #fff;
    border: 1px solid #919b9c;
    padding: 45px;
    border-radius: 0 5px 5px 5px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
}

/* Fieldset */
fieldset {
    border: 1px solid #d0d0bf;
    border-radius: 5px;
    margin-bottom: 28px;
    padding: 19px;
    background-color: #fff;
}

legend {
    padding: 0 10px;
    color: #15428b;
    background: transparent;
    font-weight: bold;
}

/* Typography styles */
h1 {
    font-size: 38px;
    margin-top: 0;
    color: #15428b;
    text-shadow: none;
}

p {
    margin-bottom: 1em;
    line-height: 1.4;
}

ul {
    padding-left: 38px;
}

li {
    margin-bottom: 10px;
}

/* Tech Stack */
.tech-container {
    display: flex;
    flex-direction: column;
    gap: 23px;
    padding: 8px 0;
}

.tech-category {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.tech-category-title {
    width: 262px;
    font-weight: bold;
    color: #333;
    padding-top: 8px;
    flex-shrink: 0;
    font-size: 28px;
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
}

.tech-tag {
    background: #ffffff;
    border: 1px solid #919b9c;
    border-radius: 5px;
    padding: 8px 23px;
    font-size: 26px;
    color: #000;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
    cursor: default;
}

/* SNS Icons */
.sns-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    opacity: 0.85;
    transition: opacity 0.15s;
}

.sns-icon:hover {
    opacity: 1;
}

.icon-sns {
    display: inline-block;
    width: 38px;
    height: 38px;
    background-size: contain;
    background-repeat: no-repeat;
    image-rendering: pixelated;
}

/* Blog List */
.blog-list {
    max-height: 300px;
    overflow-y: auto;
}

.blog-entry {
    padding: 14px 12px;
    text-decoration: none;
    color: #000;
    border-bottom: 1px solid #e8e8e0;
}

.blog-entry:last-child {
    border-bottom: none;
}

.blog-entry:hover {
    background-color: #e8eef7;
}

.blog-title {
    font-size: 26px;
    color: #15428b;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.blog-date {
    font-size: 22px;
    color: #888;
    flex-shrink: 0;
}

/* Buttons */
.btn {
    background: linear-gradient(180deg, #f3f3f3 0%, #d8d8d8 100%);
    border: 2px solid #737373;
    border-radius: 5px;
    box-shadow: inset 2px 2px 0px rgba(255, 255, 255, 0.8), inset -2px -2px 0px rgba(220, 220, 220, 0.4);
    padding: 15px 38px;
    color: #000;
    font-family: inherit;
    font-size: 28px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    min-width: 150px;
    text-align: center;
}

.btn:hover {
    border-color: #003c74;
    background: linear-gradient(180deg, #fdfdfd 0%, #e0edf9 100%);
    box-shadow: inset 2px 2px 0px rgba(255, 255, 255, 0.8), inset 0px 0px 6px rgba(255, 166, 0, 0.8);
}

.btn:active {
    background: #cccccc;
    border-color: #003c74;
    box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.3);
}

/* Status Bar */
.status-bar {
    border-top: 1px solid #d0d0bf;
    margin-top: auto;
    padding: 10px 19px;
    font-size: 26px;
    background-color: var(--surface);
}

/* Taskbar */
.taskbar {
    height: 75px;
    background: linear-gradient(to bottom, #245edb 0%, #3f8cf3 9%, #245edb 18%, #245edb 92%, #333 100%);
    border-top: 1px solid #1142a1;
    padding: 0;
    z-index: 1000;
}

.start-btn {
    font-weight: bold;
    font-style: italic;
    font-size: 30px;
    color: white;
    padding: 0 38px;
    height: 100%;
    background: linear-gradient(to bottom, #328c11 0%, #47b222 10%, #3ca018 50%, #29880d 50%, #379512 100%);
    border: none;
    border-right: 1px solid #1142a1;
    border-radius: 0 19px 19px 0;
    box-shadow: inset 1px 1px 2px rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.start-btn:hover {
    background: linear-gradient(to bottom, #3eab15 0%, #56d129 10%, #47bf1d 50%, #31a110 50%, #42b216 100%);
}

.start-icon {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #f03f32 0%, #68b22a 33%, #2d9ae1 66%, #f2b800 100%);
    border-radius: 50%;
    border: 1px solid white;
}

.active-window-tab {
    font-weight: bold;
    background: linear-gradient(to bottom, #1d4087 0%, #17387a 100%);
    color: white;
    border: 1px solid #0b224e;
    border-radius: 5px;
    padding: 15px 28px;
    margin-left: 19px;
    font-size: 26px;
    text-align: left;
    min-width: 281px;
}

.inactive-window-tab {
    background: linear-gradient(to bottom, #3f8cf3 0%, #245edb 100%);
    color: white;
    border: 1px solid #1142a1;
    border-radius: 5px;
    padding: 15px 28px;
    margin-left: 10px;
    font-size: 26px;
    text-align: left;
    min-width: 281px;
}

.inactive-window-tab:hover {
    background: linear-gradient(to bottom, #5cb0ff 0%, #3075eb 100%);
}

.divider {
    display: none;
}

.clock-tray {
    background: linear-gradient(to bottom, #0f8ee9 0%, #0861c8 100%);
    color: white;
    border-left: 1px solid #1142a1;
    padding: 0 38px;
    height: 100%;
    font-size: 26px;
}



/* Tablet */
@media (max-width: 800px) {
    body {
        padding: 0;
    }

    .window {
        width: 100%;
    }

    .active-window-tab,
    .inactive-window-tab {
        min-width: 100px;
    }

    .tech-category {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .tech-category-title {
        width: auto;
    }
}

/* Mobile */
@media (max-width: 480px) {
    body {
        padding: 0;
        font-size: 15px;
        border-width: 1px;
        overflow-x: hidden;
    }

    .window {
        width: 100%;
        border-width: 0;
        height: calc(100vh - 40px);
    }

    .title-bar {
        height: 30px;
    }

    .title-bar-text {
        font-size: 14px;
    }

    .title-bar-controls button {
        width: 22px;
        height: 22px;
        font-size: 12px;
    }

    .menu-bar {
        display: none;
    }

    .window-body {
        padding: 5px;
    }

    .tab {
        padding: 6px 12px;
        font-size: 14px;
    }

    .tab-content {
        padding: 10px;
    }

    fieldset {
        padding: 8px;
        margin-bottom: 10px;
    }

    h1 {
        font-size: 22px;
    }

    .btn {
        font-size: 14px;
        padding: 8px 12px;
        min-width: unset;
        flex: 1;
    }

    .icon-btn {
        width: 16px;
        height: 16px;
        margin-right: 5px;
    }

    .profile-pic-container {
        width: 80px;
        height: 80px;
    }

    .profile-pic {
        width: 54px;
        height: 54px;
    }

    .tech-container {
        gap: 12px;
    }

    .tech-category {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .tech-category-title {
        width: auto;
        font-size: 16px;
    }

    .tech-tags {
        gap: 6px;
        max-width: 100%;
    }

    .tech-tag {
        font-size: 13px;
        padding: 3px 8px;
    }

    .icon-computer,
    .icon-calendar {
        width: 16px;
        height: 16px;
        margin-right: 4px;
    }

    .icon-cat {
        width: 16px;
        height: 16px;
        margin-right: 4px;
    }

    .icon-sns {
        width: 22px;
        height: 22px;
    }

    .sns-links {
        gap: 8px;
    }

    .blog-list {
        max-height: 200px;
    }

    .blog-entry {
        padding: 8px 6px;
    }

    .blog-title {
        font-size: 14px;
    }

    .blog-date {
        font-size: 12px;
    }

    .taskbar {
        height: 40px;
    }

    .start-btn {
        font-size: 14px;
        padding: 0 10px;
        gap: 4px;
    }

    .start-icon {
        width: 18px;
        height: 18px;
    }

    .clock-tray {
        font-size: 13px;
        padding: 0 10px;
    }

    .active-window-tab {
        font-size: 13px;
        padding: 4px 8px;
        min-width: 80px;
    }

    .status-bar {
        font-size: 12px;
        padding: 3px 5px;
    }

    ::-webkit-scrollbar {
        width: 14px;
        height: 14px;
    }

    ::-webkit-scrollbar-button {
        width: 14px;
        height: 14px;
    }
}

/* Windows XP Luna Scrollbars */
::-webkit-scrollbar {
    width: 24px;
    height: 24px;
    background: #e9e7e3;
}

::-webkit-scrollbar-track {
    background: linear-gradient(90deg, #f0f4f9, #e0e5eb);
    border-left: 1px solid #a6a6a6;
    border-right: 1px solid #fff;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #a4c4f5 0%, #c1d5f8 20%, #88aef0 50%, #6d9ce9 100%);
    border-radius: 12px;
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow: inset 0 0 0 1px #4a7fd0, inset 2px 2px 2px rgba(255, 255, 255, 0.7), inset -2px -2px 2px rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #bdd4f7 0%, #d4e2fa 20%, #9fc0f3 50%, #87aecf 100%);
}

::-webkit-scrollbar-thumb:active {
    background: linear-gradient(90deg, #8baeed 0%, #a4c4f5 20%, #6d9ce9 50%, #4a7fd0 100%);
    box-shadow: inset 0 0 0 1px #4a7fd0, inset 2px 2px 5px rgba(0, 0, 0, 0.4);
}

::-webkit-scrollbar-button {
    display: block;
    width: 24px;
    height: 24px;
    border: 1px solid #4a7fd0;
    border-radius: 3px;
    background-color: #acc6f4;
}

::-webkit-scrollbar-button:vertical:decrement {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polygon points="7,14 12,8 17,14" fill="%23fff" filter="drop-shadow(1px 1px 1px rgba(0,0,0,0.5))"/></svg>'), linear-gradient(180deg, #dae7fc 0%, #b2cdf3 50%, #90b3e6 50%, #7d9fe4 100%);
    background-position: center;
    background-repeat: no-repeat;
}

::-webkit-scrollbar-button:vertical:increment {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polygon points="7,9 12,15 17,9" fill="%23fff" filter="drop-shadow(1px 1px 1px rgba(0,0,0,0.5))"/></svg>'), linear-gradient(180deg, #dae7fc 0%, #b2cdf3 50%, #90b3e6 50%, #7d9fe4 100%);
    background-position: center;
    background-repeat: no-repeat;
}

::-webkit-scrollbar-button:horizontal:decrement {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polygon points="14,7 8,12 14,17" fill="%23fff" filter="drop-shadow(1px 1px 1px rgba(0,0,0,0.5))"/></svg>'), linear-gradient(180deg, #dae7fc 0%, #b2cdf3 50%, #90b3e6 50%, #7d9fe4 100%);
    background-position: center;
    background-repeat: no-repeat;
}

::-webkit-scrollbar-button:horizontal:increment {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polygon points="9,7 15,12 9,17" fill="%23fff" filter="drop-shadow(1px 1px 1px rgba(0,0,0,0.5))"/></svg>'), linear-gradient(180deg, #dae7fc 0%, #b2cdf3 50%, #90b3e6 50%, #7d9fe4 100%);
    background-position: center;
    background-repeat: no-repeat;
}

::-webkit-scrollbar-button:active {
    background-image: linear-gradient(180deg, #90b3e6 0%, #7d9fe4 100%) !important;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3);
}