body {
    margin: 24px;

    background:
        linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22)),
        url("https://wallpapercave.com/wp/wp3572019.jpg") center center / cover no-repeat fixed;

    font-family: "Segoe UI", sans-serif;

    user-select: none;
    -webkit-user-select: none;

    transition: background .25s ease;
}
div {
    width: 150px;
    height: 150px;
    margin: 8px;
    float: left;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 8px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.95) 0%,
            rgba(245,250,255,.95) 45%,
            rgba(223,236,250,.95) 46%,
            rgba(210,226,245,.95) 100%
        );

    border: 1px solid #8fb1d9;

    box-shadow:
        inset 0 1px rgba(255,255,255,.95),
        0 1px 3px rgba(0,0,0,.18);

    transition: .15s;
}

div:hover {
    border-color: #4e9df8;

    box-shadow:
        inset 0 1px rgba(255,255,255,1),
        0 0 8px rgba(70,150,255,.45);

    transform: translateY(-1px);
}

div:active {
    transform: translateY(1px);
}

h2 {
    margin: 0;

    font-size: 19px;
    font-weight: 600;

    color: #2f3c4b;

    text-align: center;

    text-shadow: 0 1px white;

    pointer-events: none;
}
/* Cursor Types */

#auto { cursor: auto; }
#none { cursor: none; }
#pointer { cursor: pointer; }
#crosshair { cursor: crosshair; }
#move { cursor: move; }
#wait { cursor: wait; }
#help { cursor: help; }
#text { cursor: text; }
#vertical-text { cursor: vertical-text; }

#progress { cursor: progress; }
#copy { cursor: copy; }
#alias { cursor: alias; }
#cell { cursor: cell; }
#grab { cursor: grab; }
#grabbing { cursor: grabbing; }

#no-drop { cursor: no-drop; }
#not-allowed { cursor: not-allowed; }

#all-scroll { cursor: all-scroll; }

#zoom-in { cursor: zoom-in; }
#zoom-out { cursor: zoom-out; }

/* Resize */

#e-resize { cursor: e-resize; }
#ne-resize { cursor: ne-resize; }
#n-resize { cursor: n-resize; }
#nw-resize { cursor: nw-resize; }
#w-resize { cursor: w-resize; }
#sw-resize { cursor: sw-resize; }
#s-resize { cursor: s-resize; }
#se-resize { cursor: se-resize; }

#ew-resize { cursor: ew-resize; }
#ns-resize { cursor: ns-resize; }
#nesw-resize { cursor: nesw-resize; }
#nwse-resize { cursor: nwse-resize; }

#col-resize { cursor: col-resize; }
#row-resize { cursor: row-resize; }
/* ==========================
   Aero Theme Button
   ========================== */

#theme-toggle {
    appearance: none;
    -webkit-appearance: none;

    width: 115px;
    height: 30px;

    font: 600 12px "Segoe UI", sans-serif;

    color: #23384d;

    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #eef6ff 48%,
        #d9eafc 49%,
        #c8dcf4 100%
    );

    border: 1px solid #7fa7d8;
    border-radius: 4px;

    box-shadow:
        inset 0 1px rgba(255,255,255,.95),
        0 1px 2px rgba(0,0,0,.18);

    cursor: pointer;
    outline: none;
}

#theme-toggle:hover {
    background: linear-gradient(
        to bottom,
        #ffffff,
        #f8fcff 45%,
        #d8ecff 46%,
        #b8d8fb
    );

    border-color: #4b90e2;
}

#theme-toggle:active {
    background: linear-gradient(
        to bottom,
        #c8dcf4,
        #e7f2ff
    );
}

/* ==========================
   Dark Button
   ========================== */
#toolbar {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 9999;
}

/* ==========================
   Dark Theme
   ========================== */

body.dark {
    background:
        linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
        url("https://wallpapercave.com/wp/wp3572019.jpg") center center / cover no-repeat fixed;
}

/* Cursor Cards */
body.dark div {
    background: linear-gradient(
        to bottom,
        #4b4b4b 0%,
        #3b3b3b 45%,
        #2a2a2a 46%,
        #1a1a1a 100%
    );

    border: 1px solid #4e9df8;

    box-shadow:
        inset 0 1px rgba(255,255,255,.10),
        0 1px 3px rgba(0,0,0,.7);
}

body.dark div:hover {
    border-color: #7fc2ff;

    box-shadow:
        inset 0 1px rgba(255,255,255,.15),
        0 0 8px rgba(70,150,255,.55);
}

body.dark h2 {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,.9);
}

/* ==========================
   Theme Button
   ========================== */

body.dark #theme-toggle {
    color: white;

    background: linear-gradient(
        to bottom,
        #505b69 0%,
        #3f4854 50%,
        #2f3741 51%,
        #242b34 100%
    ) !important;

    border: 1px solid #6aaeff !important;

    box-shadow:
        inset 0 1px rgba(255,255,255,.12),
        0 1px 3px rgba(0,0,0,.7);
}

body.dark #theme-toggle:hover {
    background: linear-gradient(
        to bottom,
        #5b6879,
        #485362 50%,
        #38414d 51%,
        #2a313b
    ) !important;

    border-color: #9dd3ff !important;
}

body.dark #theme-toggle:active {
    background: linear-gradient(
        to bottom,
        #252d37,
        #414d5b
    ) !important;
}
/* Explorer-style collapsible header */

#legacy-header {
    clear: both;

    width: calc(100% - 18px);
    box-sizing: border-box;

    margin: 18px 8px 14px;
    padding: 8px 12px;

    display: flex;
    align-items: center;
    gap: 10px;

    font: 600 15px "Segoe UI", sans-serif;

    color: #24405f;

    cursor: pointer;

    border-radius: 6px;

    background: linear-gradient(
        to bottom,
        rgba(255,255,255,.9),
        rgba(225,238,252,.9)
    );

    border: 1px solid #9dbce3;

    transition: all .18s ease;
}
#legacy-header:hover {

    border-color: #5aa8ff;

    box-shadow: 0 0 8px rgba(70,150,255,.25);

}

#legacy-arrow {

    font-size: 13px;

    transition: transform .20s;

    width: 12px;

}

/* Hidden by default */

#legacy-section {
    display: none;
    clear: both;
    overflow: hidden;
}

#legacy-section.open {
    display: block;
}

/* Rotate arrow */

#legacy-header.open #legacy-arrow {

    transform: rotate(90deg);

}

/* Dark mode */

body.dark #legacy-header {

    color: white;

    background: linear-gradient(
        to bottom,
        #394351,
        #232b35
    );

    border-color: #5f9fff;

}

/* Animation */

@keyframes fadeDown {

    from {

        opacity: 0;
        transform: translateY(-6px);

    }

    to {

        opacity: 1;
        transform: translateY(0);

    }

}
/* Don't make containers into cursor cards */

#toolbar,
#legacy-header,
#legacy-section {
    width: auto !important;
    height: auto !important;

    float: none !important;

    display: block !important;

    margin: 0 !important;

    padding: 0 !important;

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;
}

#legacy-header {
    display: flex !important;

    align-items: center;

    gap: 10px;

    margin: 20px 8px !important;

    padding: 8px 12px !important;

    background: linear-gradient(
        to bottom,
        rgba(255,255,255,.9),
        rgba(225,238,252,.9)
    ) !important;

    border: 1px solid #9dbce3 !important;

    border-radius: 6px;

    cursor: pointer;
}

#legacy-section {
    clear: both;
    width: 100% !important;
}

#legacy-section.open {
    display: block !important;
}
/* Legacy section fixes */

body.dark #legacy-header {
    background: linear-gradient(
        to bottom,
        #394351,
        #232b35
    ) !important;

    border: 1px solid #5f9fff !important;
    color: white !important;
}

body.dark #legacy-section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}