/***** VARIABLES *****/
:root {
    --taskbar: 45px;
    --titlebar: 20px;
    --addrbar: 31px;
    --toolbar: 35px;
    --margin: 5px;
    --padding: 20px;
    --screenw: 100vw;
    --screenh: 100vh;
    --headline: #3083b7;
    --aero-1: url(https://mrwallpaper.com/images/hd/trans-symbol-and-flag-color-5ul7z6vjh7ny6e4w.jpg);
    --aero-2: url(https://wallpapers.com/images/hd/transgender-n7po192wore2yjdg.jpg);
    --aero-3: url(https://mrwallpaper.com/images/hd/trans-symbol-and-flag-in-pattern-1l1on2edymoyd7r5.jpg);
    --aero-4: url(https://mrwallpaper.com/images/hd/pokemon-sylveon-and-trans-flag-7748gs55qzvzylsf.jpg);
    --aero-5: url(https://images.squarespace-cdn.com/content/v1/5bc9b8b27a1fbd76c82c7865/1615845738897-Y8CYAH3FZFVXE2V1CSNJ/stillonoir_pride-wallpaper_zoom_pride.jpg);
    --aero-6: url(https://mrwallpaper.com/images/hd/trans-symbol-with-a-dragon-8me4exkuz18poeat.jpg);
    --aero-7: url(https://wallpapercave.com/wp/wp4344614.jpg);
    --aero-8: url(https://getwallpapers.com/wallpaper/full/9/a/a/72779.jpg);
    --aero-9: url(https://getwallpapers.com/wallpaper/full/d/7/1/72685.jpg);
    --aero-10: url(https://media.them.us/photos/64fa0da95c5c1510c88778a0/16:9/w_2560%2Cc_limit/california-trans.jpg);
    --aero-1-color: rgba(170, 209, 251, 0.6);
    --aero-2-color: rgba(85, 132, 200, 0.6);
    --aero-3-color: rgba(171, 171, 171, 0.6);
    --aero-4-color: rgba(179, 155, 207, 0.6);
    --aero-5-color: rgba(179, 155, 207, 0.6);
    --aero-6-color: rgba(179, 155, 207, 0.6);
    --aero-7-color: rgba(179, 155, 207, 0.6);
    --aero-8-color: rgba(179, 155, 207, 0.6);
    --aero-9-color: rgba(179, 155, 207, 0.6);
    --aero-10-color: rgba(179, 155, 207, 0.6);
}

/***** ICONS *****/
.about {
    background-image: url(https://i.imgur.com/lHNzVVq.png)
}

.calc {
    background-image: url(https://i.imgur.com/66Rctgz.png)
}

.paint {
    background-image: url(https://i.imgur.com/nrKLvq2.jpg)
}

.snipping {
    background-image: url(https://i.imgur.com/3rEMUdW.png)
}

.notepad {
    background-image: url(https://i.imgur.com/zaI9fMo.png)
}

.bin {
    background-image: url(https://i.imgur.com/QTUZ6iR.png)
}

.computer {
    background-image: url(https://i.imgur.com/24dwXF1.png)
}

.folder {
    background-image: url(https://i.imgur.com/XAabxpZ.png)
}

.personal {
    background-image: url(https://i.imgur.com/nUTTrjp.png)
}

.ie {
    background-image: url(https://i.imgur.com/9y1cRkP.png)
}

.file {
    background-image: url(https://i.imgur.com/Zg4R50G.png)
}

.desktop {
    background-image: url(https://i.imgur.com/nUTTrjp.png)
}

.disk-data {
    background-image: url(https://i.imgur.com/sVHBzGZ.png)
}

.disk-usb {
    background-image: url(https://i.imgur.com/sVHBzGZ.png)
}

.disk-os {
    background-image: url(https://i.imgur.com/Q4A5Hzb.png)
}

.disk-cd {
    background-image: url(https://freepngimg.com/download/windows/24630-5-windows-cd-cover-transparent.png)
}

.cancel {
    background-image: url(https://i.imgur.com/Hw42swJ.png)
}

.chat {
    background-image: url(https://i.imgur.com/9KojD0L.png)
}

.shit {
    background-image: url(https://i.imgur.com/5fc8ZyH.png)
}

.shitoval {
    background-image: url(https://i.imgur.com/TesaErQ.png)
}

/***** LOG ON *****/
#logon {
    width: var(--screenw);
    height: var(--screenh);
    text-align: center;
    background-image: url(https://ia904603.us.archive.org/10/items/Windows-wallcollection/1920x1200_%28Windows_7%29.jpg);
}

#logon-wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#user {
    display: inline-block;
    padding: 8px;
    border: 1px solid #3f3f3f;
    border-radius: 20px;
    box-shadow: inset 1px 1px 1px #fff, 0 0 15px rgba(0, 0, 0, 0.5);
    background: linear-gradient(to bottom, #cfeaf8, #65aac9 45%, #3b90b5 45%, #5db3de);
}

#user>img {
    border: 1px solid #3f3f3f;
    border-radius: 5px;
    box-shadow: 0 0 1px 1px #fff;
}

#name {
    margin: 10px 0;
    color: #fff;
    text-shadow: 0 1px 2px #000;
    font-weight: bold;
}

#input {
    position: relative;
}

#password {
    width: 150px;
    border: 1px solid #666;
    border-radius: 3px;
}

#start {
    position: absolute;
    top: 50%;
    left: 102%;
    transform: translateY(-50%);
    font-weight: bold;
    font-size: 150%;
    text-shadow: 0 1px 1px #000;
}

/**** DESKTOP ****/
#windows {
    display: none;
    width: var(--screenw);
    height: var(--screenh);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
}

#desktop {
    position: fixed;
    width: var(--screenw);
    height: calc(var(--screenh) - var(--taskbar));
}

.icons {
    display: flex
}

.column {
    margin: 5px
}

.icon {
    position: relative;
    background-size: 70%;
    background-position: center 10%;
    background-repeat: no-repeat;
    /* ADDED to ensure size */
    width: 80px;
    height: 80px;
    display: block;
    margin-bottom: 15px;
}

.icons-sm .icon {
    width: 30px;
    height: 30px
}

.icons-md .icon {
    width: 80px;
    height: 80px
}

.icons-lg .icon {
    width: 120px;
    height: 120px
}

.icon:hover {
    background-color: rgba(255, 255, 255, 0.4)
}

.icon>label {
    width: 100%;
    position: absolute;
    bottom: 0;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 80%;
    color: #fff;
    text-shadow: 1px 1px #000;
}

.icon>label>input {
    width: 80%;
    text-align: center;
    padding: 0;
    font-size: 100%;
}

#desktop-menu {
    z-index: 1;
    display: none;
    background: #fff;
    font-size: 70%;
}

#desktop-menu,
.sub-menu {
    min-width: 130px;
    position: absolute;
    border: 1px solid #bbb;
    box-shadow: 2px 2px 2px 0 rgba(4, 69, 133, 0.4);
}

.menu-item {
    padding: 4px 0 4px 20px;
    color: #000;
    position: relative;
    background-size: 9%;
    background-position: 4px center;
    background-repeat: no-repeat;
}

.menu-item:hover {
    background-color: rgba(205, 224, 255, 0.4)
}

.has-sub:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 3px;
    transform: translateY(-50%);
    border: 4px solid transparent;
    border-left-color: currentColor;
}

.sub-menu {
    display: none;
    top: 0;
    left: 98%;
    background: #fff;
}

.sub-menu>.active:before,
.toolbar-subitem>li.active:before {
    content: '';
    position: absolute;
    top: calc(50% - 2.5px);
    left: 6px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.has-sub:hover>.sub-menu {
    display: block
}

#desktop-menu hr {
    border-color: rgba(255, 255, 255, 0.5);
    margin: 2px 6px
}

/**** TASKBAR ****/
#taskbar {
    position: fixed;
    width: 100%;
    height: var(--taskbar);
    z-index: 1;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    border-top: 1px solid #555;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent 3px);
}

.taskbar-item {
    display: inline-block;
    color: #fff
}

.taskbar-item.left:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.6),
            rgba(255, 255, 255, 0.2),
            transparent 40%,
            rgba(255, 255, 255, 0.5) 95%),
        linear-gradient(to right, #fff, transparent 1px),
        linear-gradient(to left, #fff, transparent 1px);
}

.taskbar-item.left {
    position: relative;
    margin-right: 3px;
    width: 45px;
    height: 100%;
    background-size: 60%;
    background-position: center center;
    background-repeat: no-repeat;
}

.taskbar-item.right {
    height: 100%;
    margin-left: 8px;
    float: right;
}

#start-button {
    margin: 3px;
    width: 40px;
    height: 40px;
    background: url(https://i.imgur.com/RuIg1YN.png) no-repeat;
    background-size: contain;
    float: left;
}

#start-button:hover,
#start-button.active {
    filter: brightness(1.4) contrast(1.3)
}

#show-desktop {
    width: 15px;
    border-radius: 3px;
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.6),
            rgba(255, 255, 255, 0.2),
            transparent 40%,
            rgba(255, 255, 255, 0.5) 95%),
        linear-gradient(to right, #fff, transparent 1px),
        linear-gradient(to left, #fff, transparent 1px);
}

#datetime {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    font-size: small;
}

#battery {
    position: relative;
    margin-top: 10px;
    width: 11px;
    height: 16px;
    border: 1px solid #fff;
    border-radius: 2px;
    padding: 1px;
    box-sizing: border-box;
}

#battery:before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 25%;
    width: 50%;
    height: 2px;
    background: #fff;
}

#gauge {
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    background: #fff;
}

#start-menu {
    display: none;
    position: absolute;
    bottom: 100%;
    min-width: 550px;
    height: 500px;
    padding: 6px;
    border: 1px solid #555;
    border-radius: 3px;
    box-shadow: inset 0 0 0 0.5px #fff;
    font-size: 70%;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6), transparent);
}

#start-menu .program,
#start-menu .link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    border: 1px solid transparent;
}

#start-menu>#programs {
    float: left;
    width: 55%;
    height: 100%;
    background: #fff;
    border-radius: 2px;
    padding: 2px;
    box-sizing: border-box;
}

#start-menu .program {
    width: 100%;
    height: 10%;
    background-repeat: no-repeat;
    background-size: contain;
    padding-left: 55px;
    border-radius: 2px;
}

#start-menu .program:hover {
    background-color: #cce2ef;
    border-color: #bbb;
}

.program#search {
    padding: 0
}

#start-menu>#links {
    float: left;
    width: 45%;
    height: 100%;
    color: #fff;
    padding: 2px 5px;
    box-sizing: border-box;
}

#start-menu hr {
    margin: 3px 0;
    border-color: #999;
}

#start-menu .link {
    height: 9.3%;
    padding-left: 5px;
}

#start-menu .link:not(:last-child):hover {
    border-color: #999;
    background-image: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.2),
            rgba(0, 0, 0, 0.3) 50%,
            transparent 98%);
}

/**** WINDOW ****/
.window {
    position: absolute;
    top: 0;
    z-index: 1;
    display: none;
    width: 800px;
    height: 80%;
    padding: 5px;
    border: 1px solid #000;
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px #fff, 0 0 5px #000;
    box-sizing: border-box;
}

#taskbar:before,
#start-menu:before,
.window:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: rgba(0, 0, 0, 0.25);
}

.window>div:not(:first-child) {
    margin-top: var(--margin)
}

.window>.titlebar {
    position: relative
}

.titlebar>.title {
    font-size: small;
    line-height: 20px;
    padding-left: 23px;
    text-shadow:
        0 0 10px #fff, 0 0 10px #fff,
        0 0 10px #fff, 0 0 10px #fff,
        0 0 10px #fff, 0 0 10px #fff,
        0 0 10px #fff, 0 0 10px #fff;
    background-repeat: no-repeat;
    background-size: contain;
}

.titlebar>.controls {
    position: absolute;
    right: 0;
    top: -5px;
    display: flex;
    border-radius: 0 0 3px 3px;
    overflow: hidden;
}

.controls>.control {
    width: 25px;
    line-height: 15px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    border-right: 1px solid #666;
    text-shadow: 1px 1px 0 #000;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 0.5px #eee;
    background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3) 45%,
            rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 70%,
            rgba(255, 255, 255, 0.5));
}

.controls>.closewin {
    background-color: #d04a37;
    width: 35px;
}

.controls>.maximize {
    line-height: 12px
}

.maximized {
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.focused {
    z-index: 2
}

.addrbar {
    display: flex;
    align-items: center;
}

.addrbar>div:first-child {
    min-width: 60px
}

.addrbar>div:not(:first-child) {
    flex-grow: 1;
    margin-left: 5px;
}

.addrbar>.input {
    height: 23px
}

.addrbar input {
    width: 100%;
    height: 100%
}

.addr,
.addrbar input {
    background-color: #ecf5fe;
    border: 1px solid #888;
    border-bottom-color: #ccc;
    border-right-color: #ccc;
    box-sizing: border-box;
}

.addr {
    white-space: nowrap;
    font-size: 80%;
    padding: 3px 0 3px 20px;
    position: relative;
    background-size: contain;
    background-repeat: no-repeat;
}

.addr>label {
    margin-left: 15px
}

.addr:before {
    content: '';
    position: absolute;
    top: calc(50% - 4px);
    border: 4px solid transparent;
    border-left-color: currentColor;
    margin-left: 5px;
}

.toolbar {
    background: linear-gradient(#fff 30%, #dce6f5 70%);
    border: 1px solid #555;
    height: 28px;
    line-height: 28px;
    font-size: 80%;
    margin-bottom: -6px;
    display: flex;
}

.toolbar-item {
    padding: 0 10px;
    color: #3b5372;
    position: relative;
}

.toolbar-item:hover>.toolbar-subitem {
    display: block
}

.toolbar-subitem {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 100px;
    background: #f0f0f0;
    padding: 1px;
    border: 1px solid #999;
    box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3);
    margin: 0;
}

.toolbar-subitem>li {
    list-style: none;
    margin: 0;
    padding-left: 20px;
    border: 1px solid transparent;
    position: relative;
}

.toolbar-subitem>li:hover {
    border-color: rgb(177, 208, 244);
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(177, 208, 244, 0.3));
}

.toolbar-subitem>hr {
    margin: 0 3px;
    border-color: #fff;
}

.window>.container {
    padding: 10px;
    background: #fff;
    border: 1px solid #555;
    overflow: auto;
    height: calc(100% - var(--titlebar) - var(--addrbar) - var(--toolbar) - var(--padding));
}

#window-about>.container {
    height: calc(100% - var(--titlebar) - var(--margin) - var(--padding));
}

#window-ie>.container,
#window-paint>.container {
    height: calc(100% - var(--titlebar) - var(--addrbar) - var(--toolbar));
}

/***** CALCULATOR *****/
#window-calc {
    width: auto;
    height: auto
}

#window-calc>.container {
    background: #d9e4f1;
    padding: 10px;
    border: 1px solid #8a939c;
}

#display,
.bt {
    box-sizing: border-box;
    border: 1px solid #8a939c;
    border-radius: 3px;
}

#display {
    height: 70px;
    position: relative;
    background-image: linear-gradient(#d9e4f1, #fff);
    margin-bottom: 3px;
}

#display>input {
    position: absolute;
    font-family: monospace;
    text-align: right;
    background: none;
    border: 0;
    color: #000;
    width: 100%;
    font-size: 120%;
}

#display>#result {
    font-size: 250%;
    bottom: 0;
}

@media only screen and (max-width: 480px) {
    #result {
        font-size: 200%
    }
}

#window-calc .btns {
    width: 100%;
    border-spacing: 5px;
}

#window-calc .bt {
    width: 20%;
    background: linear-gradient(rgba(255, 255, 255, 0.4) 50%, transparent 50%);
    box-shadow: inset 0 0 2px 1px #fff;
    padding: 5px;
    text-align: center;
}

#window-calc .btn-bright {
    background: linear-gradient(rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.4) 50%)
}

#window-calc .bt:hover {
    border-color: rgb(255, 219, 0);
    background: linear-gradient(rgb(255, 238, 219) 50%, rgb(255, 212, 119) 50%);
}

/***** NOTEPAD *****/
#window-notepad>.toolbar {
    height: 20px;
    line-height: 20px;
    padding: 1px;
}

#window-notepad .toolbar-item {
    padding: 0 5px;
    color: #000;
    border: 1px solid transparent;
    border-radius: 3px;
}

#window-notepad .toolbar-item:hover {
    border-color: #555;
    background: rgba(0, 0, 0, 0.1);
}

#window-notepad>.container {
    height: calc(100% - var(--titlebar) - 30px);
}

#notepad-editor {
    overflow: scroll;
    resize: none;
    white-space: nowrap;
    font-family: "lucida console", monospace;
    font-size: 10pt;
    border: 0;
    width: 100%;
    height: 100%;
    cursor: text;
}

#notepad-editor.wrap {
    white-space: normal
}

#window-font {
    height: auto
}

#window-font>.container {
    height: calc(100% - var(--titlebar) - var(--padding) - var(--margin));
}

.font-row {
    display: flex
}

.font-row>div {
    white-space: nowrap;
    overflow: hidden;
}

.font-row>div:not(:first-child) {
    margin-left: 8px
}

.flex-right {
    justify-content: flex-end
}

.list {
    margin: 0;
    padding: 0;
    overflow: hidden;
    overflow-y: auto;
    border: 1px solid #555;
    height: 100px;
}

.list>li {
    list-style: none;
}

.list>li>input {
    display: none
}

.list>li>label {
    display: block
}

.list>li>input:checked+label {
    color: #fff;
    background: #299bfc
}

/***** PERSONALIZE *****/
#window-personal>.container {
    height: calc(100% - var(--titlebar) - var(--addrbar) - var(--padding) - var(--margin));
}

.themes {
    margin-top: 10px;
    border: 1px solid #555;
    padding: 8px;
}

.headline {
    color: var(--headline);
    display: flex;
    align-items: center;
}

.headline:after {
    content: '';
    width: 100%;
    flex: 1;
    border-top: 1px solid #ccc;
}

.theme-collection {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    text-align: center;
}

.theme {
    list-style: none;
    width: 100px;
    height: 100px;
    border: 1px solid transparent;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 5px;
    margin: 3px;
    font-size: 12px;
}

.device:hover,
.theme:hover,
.theme.selected {
    border-color: rgb(177, 208, 244);
    background-color: rgba(177, 208, 244, 0.3);
}

.theme>.theme-bg {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 70%;
    height: 45%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.theme>.theme-color {
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    width: 50%;
    height: 50%;
    border-radius: 4px;
    border: 1px solid #888;
    box-shadow: inset 0 0 0 1px #fff;
    box-sizing: border-box;
}

.theme>label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.theme:hover>label {
    white-space: normal;
}

.theme-basic>.theme-color {
    border-radius: 0;
    border-color: transparent;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}

.theme-basic>.theme-color:before,
.theme-basic>.theme-color:after {
    content: '';
    background: #000;
    display: block;
}

.theme-basic>.theme-color:before {
    height: 35%
}

.theme-basic>.theme-color:after {
    height: 65%
}

#aero-1>.theme-bg {
    background-image: var(--aero-1)
}

#aero-1>.theme-color {
    background-image: radial-gradient(circle at 100% 100%, var(--aero-1-color) 65%, rgba(170, 209, 251, 0.3) 70%)
}

#aero-2>.theme-bg {
    background-image: var(--aero-2)
}

#aero-2>.theme-color {
    background-image: radial-gradient(circle at 100% 100%, var(--aero-2-color) 65%, rgba(85, 132, 200, 0.3) 70%)
}

#aero-3>.theme-bg {
    background-image: var(--aero-3)
}

#aero-3>.theme-color {
    background-image: radial-gradient(circle at 100% 100%, var(--aero-3-color) 65%, rgba(170, 209, 251, 0.3) 70%)
}

#aero-4>.theme-bg {
    background-image: var(--aero-4)
}

#aero-4>.theme-color {
    background-image: radial-gradient(circle at 100% 100%, var(--aero-4-color) 65%, rgba(170, 209, 251, 0.3) 70%)
}

#aero-5>.theme-bg {
    background-image: var(--aero-5)
}

#aero-5>.theme-color {
    background-image: radial-gradient(circle at 100% 100%, var(--aero-5-color) 65%, rgba(85, 132, 200, 0.3) 70%)
}

#aero-6>.theme-bg {
    background-image: var(--aero-6)
}

#aero-6>.theme-color {
    background-image: radial-gradient(circle at 100% 100%, var(--aero-6-color) 65%, rgba(170, 209, 251, 0.3) 70%)
}

#aero-7>.theme-bg {
    background-image: var(--aero-7)
}

#aero-7>.theme-color {
    background-image: radial-gradient(circle at 100% 100%, var(--aero-7-color) 65%, rgba(85, 132, 200, 0.3) 70%)
}

#aero-8>.theme-bg {
    background-image: var(--aero-8)
}

#aero-8>.theme-color {
    background-image: radial-gradient(circle at 100% 100%, var(--aero-8-color) 65%, rgba(170, 209, 251, 0.3) 70%)
}

#aero-9>.theme-bg {
    background-image: var(--aero-9)
}

#aero-9>.theme-color {
    background-image: radial-gradient(circle at 100% 100%, var(--aero-9-color) 65%, rgba(170, 209, 251, 0.3) 70%)
}

#aero-10>.theme-bg {
    background-image: var(--aero-10)
}

#aero-10>.theme-color {
    background-image: radial-gradient(circle at 100% 100%, var(--aero-10-color) 65%, rgba(85, 132, 200, 0.3) 70%)
}

/* windows basic */
#basic-1>.theme-bg {
    background-image: var(--aero-1)
}

#basic-1>.theme-color {
    background: #a7bfd7;
    box-shadow: 0.5px 0.5px 0 1px #000, inset 0 0 0 0.5px #fff;
    border-radius: 4px 4px 0 0;
    padding: 3px;
}

#basic-1>.theme-color:before {
    box-shadow: inset 0 0 0 4px #a7bfd7, inset -7px -7px 0 #a7bfd7
}

#basic-1>.theme-color:after {
    box-shadow: inset 0 0 0 4px #fff, inset -19px -19px 0 #fff
}

/* windows classic */
#basic-2>.theme-bg {
    background-color: #3b6ea4
}

#basic-2>.theme-color {
    background: #d0d0d0;
    box-shadow: 0.5px 0.5px 0 1px #000;
    padding: 1px;
}

#basic-2>.theme-color:before {
    box-shadow: inset 0 0 0 5px #0f75c9, inset -7px -7px 0 #0f75c9;
    background: #fff;
}

#basic-2>.theme-color:after {
    box-shadow: inset 0 0 0 4px #fff, inset -21px -21px 0 #fff
}

/* contrast black */
#basic-3>.theme-bg {
    background-color: #000
}

#basic-3>.theme-color {
    background: #fff;
    padding: 0.5px;
}

#basic-3>.theme-color:before {
    box-shadow: inset 0 0 0 5px #81007f, inset -7px -7px 0 #81007f;
    background: #fff;
}

#basic-3>.theme-color:after {
    box-shadow: inset 0 0 0 4px #000, inset -21px -21px 0 #000;
    background: #fff;
}

/* contast white */
#basic-4>.theme-bg {
    background-color: #fff;
    box-shadow: inset 0 0 0 1px #999
}

#basic-4>.theme-color {
    background: #fff;
    box-shadow: 0.5px 0.5px 0 1px #000;
    padding: 0.5px;
}

#basic-4>.theme-color:before {
    box-shadow: inset 0 0 0 5px #000, inset -7px -7px 0 #000;
    background: #fff;
}

#basic-4>.theme-color:after {
    box-shadow: inset 0 0 0 4px #fff, inset -21px -21px 0 #fff
}

#window-wait>.container {
    padding: 30px 0
}

#window-wait {
    width: 250px;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

/***** SNIPPING TOOL *****/
#window-snipping {
    height: auto
}

#window-snipping .toolbar {
    background: #ededed;
    border-color: transparent
}

#window-snipping .toolbar-subitem {
    min-width: 160px
}

#window-snipping .toolbar-item:hover {
    border-color: #555;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4)
}

#window-snipping .toolbar-item {
    color: #000;
    background-size: 25%;
    background-repeat: no-repeat;
    background-position: 5px center;
    padding-left: 25px;
    border: 1px solid transparent;
    border-radius: 3px
}

#window-snipping .direction {
    background: linear-gradient(#fff 30%, #ededed 70%);
    border-color: transparent
}

/***** PAINT APP *****/
#paint-canvas {
    width: 100%;
    height: 100%;
    display: block;
    background-color: #ffffff;
}

/***** THEMES *****/

/* AERO 1 - WINDOWS 7 */
.aero-1 #windows {
    background-image: var(--aero-1)
}

.aero-1 .window {
    background:
        linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.3) 30%),
        linear-gradient(transparent 20%, #fff 40%, transparent 40%);
}

.aero-1 .window,
.aero-1 #taskbar,
.aero-1 #start-menu {
    background-color: var(--aero-1-color)
}

.aero-1 .controls>.control:last-child {
    border-right: 0
}

.aero-1 .controls {
    box-shadow: 0 1px 1px #eee;
    border: 1px solid #666;
    border-top: 0;
}

/* AERO-2 - ARCHITECTURE */
.aero-2 #windows {
    background-image: var(--aero-2)
}

.aero-2 .window {
    background:
        linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.3) 30%),
        linear-gradient(transparent 20%, #fff 40%, transparent 40%);
}

.aero-2 .window,
.aero-2 #taskbar,
.aero-2 #start-menu {
    background-color: var(--aero-2-color)
}

.aero-2 .controls>.control:last-child {
    border-right: 0
}

.aero-2 .controls {
    box-shadow: 0 1px 1px #eee;
    border: 1px solid #666;
    border-top: 0;
}

/* AERO-3 - LANDSCAPES */
.aero-3 #windows {
    background-image: var(--aero-3)
}

.aero-3 .window {
    background:
        linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.3) 30%),
        linear-gradient(transparent 20%, #fff 40%, transparent 40%);
}

.aero-3 .window,
.aero-3 #taskbar,
.aero-3 #start-menu {
    background-color: var(--aero-3-color)
}

.aero-3 .controls>.control:last-child {
    border-right: 0
}

.aero-3 .controls {
    box-shadow: 0 1px 1px #eee;
    border: 1px solid #666;
    border-top: 0;
}

/* AERO-4 - NATURE */
.aero-4 #windows {
    background-image: var(--aero-4)
}

.aero-4 .window {
    background:
        linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.3) 30%),
        linear-gradient(transparent 20%, #fff 40%, transparent 40%);
}

.aero-4 .window,
.aero-4 #taskbar,
.aero-4 #start-menu {
    background-color: var(--aero-4-color)
}

.aero-4 #start-menu {
    border-radius: 3px;
    box-shadow: inset 0 0 0 0.5px #fff;
    background-color: var(--aero-4-color);
}

.aero-4 .controls>.control:last-child {
    border-right: 0
}

.aero-4 .controls {
    box-shadow: 0 1px 1px #eee;
    border: 1px solid #666;
    border-top: 0;
}

/* AERO-5 - more */
.aero-5 #windows {
    background-image: var(--aero-5)
}

.aero-5 .window {
    background:
        linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.3) 30%),
        linear-gradient(transparent 20%, #fff 40%, transparent 40%);
}

.aero-5 .window,
.aero-5 #taskbar,
.aero-5 #start-menu {
    background-color: var(--aero-5-color)
}

.aero-5 #start-menu {
    border-radius: 3px;
    box-shadow: inset 0 0 0 0.5px #fff;
    background-color: var(--aero-5-color);
}

.aero-5 .controls>.control:last-child {
    border-right: 0
}

.aero-5 .controls {
    box-shadow: 0 1px 1px #eee;
    border: 1px solid #666;
    border-top: 0;
}

/* AERO-6 - more */
.aero-6 #windows {
    background-image: var(--aero-6)
}

.aero-6 .window {
    background:
        linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.3) 30%),
        linear-gradient(transparent 20%, #fff 40%, transparent 40%);
}

.aero-6 .window,
.aero-6 #taskbar,
.aero-6 #start-menu {
    background-color: var(--aero-6-color)
}

.aero-6 #start-menu {
    border-radius: 3px;
    box-shadow: inset 0 0 0 0.5px #fff;
    background-color: var(--aero-6-color);
}

.aero-6 .controls>.control:last-child {
    border-right: 0
}

.aero-6 .controls {
    box-shadow: 0 1px 1px #eee;
    border: 1px solid #666;
    border-top: 0;
}

/* BASIC-1 - WINDOWS 7 */
.basic-1 #windows {
    background-image: var(--aero-1)
}

.basic-1 .window:before {
    background: linear-gradient(rgba(0, 0, 0, 0.2), transparent 5%)
}

.basic-1 .window,
.basic-1 #taskbar,
.basic-1 #start-menu {
    background-color: #a7bfd7
}

.basic-1 #start-menu hr {
    border-color: #999
}

.basic-1 #start-button {
    margin: -6px 3px 0;
    width: 40px;
    height: 40px;
}

.basic-1 .titlebar>.controls {
    top: 0
}

.basic-1 .controls>.control {
    width: 26px !important;
    margin-left: 3px;
    border: 1px solid #666;
    border-radius: 3px;
}

/* BASIC-2 - WINDOWS CLASSIC */
.basic-2 #windows {
    background: #3b6ea4
}

.basic-2 .window,
.basic-2 #taskbar,
.basic-2 #start-menu {
    background: #d0d0d0
}

.basic-2 .window:before,
.basic-2 #taskbar:before,
.basic-2 #start-menu:before {
    content: none
}

.basic-2 #start-button:hover,
.basic-2 #start-button.active {
    filter: none;
    border-color: #333 #fff #fff #333
}

.basic-2 #start-button:after {
    content: 'Start';
    padding-left: 26px;
    font-weight: bold
}

.basic-2 #start-button {
    width: 70px;
    height: 26px;
    line-height: 22px;
    margin: 5px;
    background-image: url(https://vignette.wikia.nocookie.net/khangnd/images/e/ee/Windows7-start-button.png/revision/20190724063543);
    background-position: 3px;
    box-sizing: border-box;
}

.basic-2 #start-menu {
    border-radius: 0;
    border-width: 2px;
    border-color: #fff #555 #555 #fff;
}

.basic-2 #start-menu hr {
    border-color: #eee
}

.basic-2 #start-menu>#programs {
    background: none
}

.basic-2 #start-menu>#links {
    color: #000;
    border-left: 1px solid #eee
}

.basic-2 #start-menu .button {
    background: none;
    box-shadow: none;
}

.basic-2 #start-button,
.basic-2 #start-menu .button,
.basic-2 .window,
.basic-2 .window .control,
.basic-2 .taskbar-item.left,
.basic-2 .bt {
    border: 2px solid;
    border-color: #fff #333 #333 #fff;
    border-radius: 0;
    color: #000;
}

.basic-2 #start-menu .link:not(:last-child):hover,
.basic-2 #start-menu .program:hover,
.basic-2 .menu-item:hover,
.basic-2 .toolbar-subitem>li:hover {
    background-color: #082767;
    color: #fff
}

.basic-2 .toolbar-subitem>li:hover {
    background-image: none
}

.basic-2 #start-menu .link:not(:last-child):hover {
    background-image: none
}

.basic-2 .taskbar-item {
    color: #000
}

.basic-2 #battery {
    box-shadow: 0 0 0 1px #999;
    background: #999
}

.basic-2 .storage-bar,
.basic-2 .window {
    border-radius: 0;
    box-shadow: none;
}

.basic-2 .window .controls {
    top: 0
}

.basic-2 .window .control {
    width: 20px;
    background: #d0d0d0;
    color: #000;
    text-shadow: none;
}

.basic-2 .window>.titlebar {
    background: linear-gradient(to right, #7f7e78, transparent)
}

.basic-2 .window .title {
    text-shadow: none;
    color: #fff;
    font-weight: bold
}

.basic-2 .addr,
.basic-2 .addrbar input {
    border-color: #999 #fff #fff #999
}

.basic-2 .addr {
    background-color: transparent
}

.basic-2 .addrbar input {
    background: #fff
}

.basic-2 .toolbar {
    background: none;
    border: none
}

.basic-2 .container {
    border-color: #ddd
}

.basic-2 #show-desktop {
    width: 20px;
    background: center center url(https://vignette.wikia.nocookie.net/khangnd/images/a/a2/Windows7-desktop.ico) no-repeat;
    background-size: contain;
}

.basic-2 .taskbar-item.left:before {
    content: none
}

.basic-2 .bt {
    background: #d0d0d0;
    box-shadow: none
}

.basic-2 .bt-primary {
    box-shadow: inset -1px -1px 0 #aaa
}

.basic-2 .bt-secondary {
    border-color: #fff #999 #999 #fff
}

.basic-2 .storage-bar>div {
    background: #082767
}

.basic-2 .red-bar>div {
    background: #e50001
}

/* BASIC-3 - CONTRAST BLACK */
.basic-3 {
    color: #fff
}

.basic-3 #windows,
.basic-3 .window,
.basic-3 .window>.container,
.basic-3 .window>.toolbar,
.basic-3 #taskbar,
.basic-3 #start-menu,
.basic-3 #start-menu>#programs,
.basic-3 .window .control,
.basic-3 .toolbar-subitem,
.basic-3 #window-calc>.container,
.basic-3 .bt,
.basic-3 .button {
    background: #000;
    color: #fff;
    box-shadow: none
}

.basic-3 .window,
.basic-3 #start-menu,
.basic-3 .window .control,
.basic-3 .taskbar-item.left,
.basic-3 .bt {
    border: 2px solid #fff;
    border-radius: 0
}

.basic-3 .button {
    box-shadow: 0 0 0 1px #fff;
    border-radius: 0
}

.basic-3 .window>.titlebar,
.basic-3 #start-menu .program:hover,
.basic-3 #start-menu .link:not(:last-child):hover,
.basic-3 .toolbar-subitem>li:hover {
    background-color: #81007f;
    border-color: transparent
}

.basic-3 #start-menu .link:not(:last-child):hover {
    background-image: none
}

.basic-3 #taskbar {
    border-top: 2px solid #fff
}

.basic-3 #start-button:hover,
.basic-3 #start-button.active {
    filter: none
}

.basic-3 #start-button:after {
    content: 'Start';
    padding-left: 26px;
    font-weight: bold
}

.basic-3 #start-button {
    width: 70px;
    height: 26px;
    line-height: 22px;
    margin: 5px;
    background-image: url(https://vignette.wikia.nocookie.net/khangnd/images/e/ee/Windows7-start-button.png/revision/20190724063543);
    background-position: 3px;
    box-sizing: border-box;
    border: 2px solid #fff;
}

.basic-3 #show-desktop {
    width: 20px;
    background: center center url(https://vignette.wikia.nocookie.net/khangnd/images/a/a2/Windows7-desktop.ico) no-repeat;
    background-size: contain;
}

.basic-3 .taskbar-item.left:before {
    content: none
}

.basic-3 .window .title {
    font-weight: bold;
    text-shadow: none
}

.basic-3 .window .controls {
    top: 0
}

.basic-3 .window .control {
    width: 20px;
    text-shadow: none;
    margin: 2px;
    border-width: 1px;
}

.basic-3 .addr,
.basic-3 .addrbar input {
    background-color: #000;
    color: #fff
}

.basic-3 .toolbar-item {
    color: #fff !important
}

.basic-3 .toolbar-subitem>li:hover {
    background-image: none
}

.basic-3 .storage-bar {
    border-radius: 0
}

.basic-3 .storage-bar>div {
    background: #81007f
}

.basic-3 .red-bar>div {
    background: #e50001
}

/* BASIC-4 - CONTRAST WHITE */
.basic-4,
.basic-4 .icon>label,
.basic-4 .taskbar-item {
    color: #000;
    text-shadow: none
}

.basic-4 .window:before,
.basic-4 #taskbar:before,
.basic-4 #start-menu:before {
    content: none
}

.basic-4 #windows,
.basic-4 .window,
.basic-4 .window>.container,
.basic-4 .window>.toolbar,
.basic-4 #taskbar,
.basic-4 #start-menu,
.basic-4 #start-menu>#links,
.basic-4 .window .control,
.basic-4 .toolbar-subitem,
.basic-4 #window-calc>.container,
.basic-4 .bt,
.basic-4 .button {
    background: #fff;
    color: #000;
    box-shadow: none
}

.basic-4 .window,
.basic-4 #start-menu,
.basic-4 .window .control,
.basic-4 .taskbar-item.left,
.basic-4 .bt {
    border: 2px solid #000;
    border-radius: 0
}

.basic-4 .button {
    box-shadow: 0 0 0 1px #000;
    border-radius: 0
}

.basic-4 .window>.titlebar,
.basic-4 #start-menu .program:hover,
.basic-4 #start-menu .link:not(:last-child):hover,
.basic-4 .toolbar-subitem>li:hover {
    background-color: #000;
    color: #fff;
    border-color: transparent
}

.basic-4 #start-menu .link:not(:last-child):hover {
    background-image: none
}

.basic-4 #taskbar {
    border-top: 2px solid #000
}

.basic-4 #start-button:hover,
.basic-4 #start-button.active {
    filter: none
}

.basic-4 #start-button:after {
    content: 'Start';
    padding-left: 26px;
    font-weight: bold
}

.basic-4 #start-button {
    width: 70px;
    height: 26px;
    line-height: 22px;
    margin: 5px;
    background-image: url(https://vignette.wikia.nocookie.net/khangnd/images/e/ee/Windows7-start-button.png/revision/20190724063543);
    background-position: 3px;
    box-sizing: border-box;
    border: 2px solid #000;
}

.basic-4 #show-desktop {
    width: 20px;
    background: center center url(https://vignette.wikia.nocookie.net/khangnd/images/a/a2/Windows7-desktop.ico) no-repeat;
    background-size: contain;
}

.basic-4 .taskbar-item.left:before {
    content: none
}

.basic-4 #battery {
    box-shadow: 0 0 0 1px #333;
    background: #333
}

.basic-4 .window .title {
    font-weight: bold;
    text-shadow: none
}

.basic-4 .window .controls {
    top: 0
}

.basic-4 .window .control {
    width: 20px;
    text-shadow: none;
    margin: 2px;
    border-width: 1px;
}

.basic-4 .addr,
.basic-4 .addrbar input {
    background-color: #fff;
    color: #000
}

.basic-4 .toolbar-item {
    color: #000 !important
}

.basic-4 .toolbar-subitem>li:hover {
    background-image: none
}

.basic-4 .storage-bar {
    border-radius: 0
}

.basic-4 .storage-bar>div {
    background: #000
}

.basic-4 .red-bar>div {
    background: #e50001
}

/***** MY COMPUTER *****/
.devices {
    display: flex;
    flex-wrap: wrap;
    margin: 5px 0;
    font-size: 80%;
}

.device {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 180px;
    height: 50px;
    padding: 5px 5px 5px 55px;
    background-repeat: no-repeat;
    background-size: 20%;
    background-position: 5px center;
    border: 1px solid transparent;
    border-radius: 3px;
}

.storage-bar {
    height: 13px;
    border: 1px solid #999;
    border-radius: 3px;
    position: relative;
    margin: 2px 0;
}

.storage-bar>div {
    height: 100%;
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.2)),
        linear-gradient(to bottom, #56cfe4 40%, #005f7f 50%, #56cfe4 99.9%);
}

.red-bar>div {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.1)),
        linear-gradient(to bottom, #ffbfbf 40%, #e50001 50%);
}

.storage-txt {
    color: #999
}

/***** UTILITIES *****/
#windows-container {
    margin: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.grayout * {
    pointer-events: none
}

.grayout {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    transition: 2s;
}

* {
    cursor: default
}

p {
    margin: 3px
}

label {
    margin: 0
}

h2 {
    text-align: center;
    margin: 0;
}

iframe {
    width: 100%;
    height: 100%;
}

.badge {
    padding: 0 5px;
    display: inline-block;
    color: #fff;
    background: #16c60c;
    line-height: 1;
}

.button.back {
    transform: scaleX(-1);
}

.button {
    display: inline-block;
    padding: 5px;
    box-shadow: inset 0 0 2px #fff, 0 0 2px 1px #1b3a4d;
    border: 0;
    border-radius: 3px;
    color: #fff;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.2),
            rgba(255, 255, 255, 0.2) 40%,
            rgba(39, 71, 86, 0.5) 50%,
            rgba(39, 71, 86, 0.1) 90%,
            rgba(255, 255, 255, 0.5));
}

.bt:not(:first-child) {
    margin-left: 5px
}

.bt {
    padding: 1px 15px;
    font-size: 75%;
}

.bt-primary {
    border-color: #3083b7;
    box-shadow: inset 0 0 0 1px #34deff;
    background: linear-gradient(#e7f6fd 50%, #bde3f8 50%)
}

.bt-secondary {
    box-shadow: inset 0 0 0 1px #fff;
    background: linear-gradient(#efefef 50%, #d7d7d7 50%);
}

.round {
    line-height: 1;
    border-radius: 50%
}

.mt-5 {
    margin-top: 5px
}

.p-0 {
    padding: 0 !important
}

.text-200 {
    font-size: 200% !important
}

.text-75 {
    font-size: 75% !important
}

.text-50 {
    font-size: 50% !important
}

.text-center {
    text-align: center !important
}

.text-right {
    text-align: right !important
}

.text-normal {
    font-weight: normal !important
}

.text-bold {
    font-weight: bold !important
}

.text-muted {
    color: #999 !important;
    pointer-events: none !important
}

.icon-sm {
    background-size: 50%
}

.title-1 {
    color: var(--headline);
    margin: 8px 0;
    font-size: 18px
}

input[type=search] {
    width: 100%;
    height: 100%;
    padding: 0 5px;
    padding-right: 18px;
    border-width: 1px;
    background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%3E%3Cpath%20stroke%3D%22%232070b9%22%20d%3D%22M%2010.5%201%20C%208.019531%201%206%203.019531%206%205.5%20C%206%206.558594%206.382813%207.523438%207%208.292969%20L%202.023438%2013.269531%20L%202.726563%2013.980469%20L%207.707031%209%20C%208.476563%209.617188%209.441406%2010%2010.5%2010%20C%2012.980469%2010%2015%207.980469%2015%205.5%20C%2015%203.019531%2012.980469%201%2010.5%201%20Z%20M%2010.5%202%20C%2012.4375%202%2014%203.5625%2014%205.5%20C%2014%207.4375%2012.4375%209%2010.5%209%20C%208.5625%209%207%207.4375%207%205.5%20C%207%203.5625%208.5625%202%2010.5%202%20Z%20%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E);
    background-position: 99% center;
    background-repeat: no-repeat;
}