:root {
    --main-col: #54caf8;
    --bg-col: #3f9bf1;
    --bg-col-dark-a-solid: color-mix(in srgb,var(--bg-col) 100%, #000 42%);
    --bg-col-dark-a: rgb(from var(--bg-col-dark-a-solid) r g b / 50%);
    --bg-col-dark-b-solid: color-mix(in srgb,var(--bg-col) 100%, #000 68%);
    --bg-col-dark-b: rgb(from var(--bg-col-dark-b-solid) r g b / 50%);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Arial, Verdana, sans-serif;
    color: white;
    margin: 0px;
    user-select: none;
    overflow: hidden;
}

.desktop {
    position: absolute;
    display: flex;
    height: calc(100vh - 58px);
    width: 100vw;
    align-items: stretch;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: flex-start;
}

.background {
    pointer-events: none;
    overflow: hidden;
    max-width: 100vw;
    max-height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    background-color: #00a782;
}

.background img {
    opacity: 1;
    display: block;
}

.taskbar {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    bottom: 0px;
    

    background: linear-gradient(0deg, var(--bg-col-dark-a) 90%, #fff8);
    backdrop-filter: blur(3px);
    height: 52px;
    width: 100vw;
    padding: 0px;
    border-top: 2px #191e29 solid;

    z-index: 191;
}

.taskbar-left, .taskbar-right {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.aero {
    overflow: hidden;
}

.aero::before {
    background-image: url(/tiny-webos/customization/misc_assets/aero.png);
    display: flex;
    position: absolute;
    background-repeat: repeat;
    inset: 0;
    background-size: 4000px;
    border-radius: inherit;
    opacity: 0.4;
    content: "";
    pointer-events: none;
}


.menu-button {
    font-family: inherit;
    width: 48px;
    height: 48px;
    margin: 2px;
    background-size: 50px;
    background-position: -1px -1px;
    background-image: url(/tiny-webos/customization/icons/windows_7/start-menu.png);
    border: none;
    border-radius: 100px;
    color: transparent;
    background-color: #0000;
    font-size: 0;
    font-family: inherit;
    transition: 100ms;
    transform: scale(0.9);
    filter: drop-shadow(0 2px 3px #0008);
}
.menu-button:hover {
    filter: brightness(1.2);
    transform: scale(1);
}
.menu-button:active {
    filter: brightness(1.3) contrast(1.1);
    transform: scale(0.95);
}

button.tb-app[data-status='closing']{
    transition: 200ms;
    opacity: 0;
    pointer-events: none;
}
button.tb-app[data-status='opening']{
    transition: 200ms;
}
button.tb-app {
    width: 44px;
    height: 44px;
    padding: 2px;
    background: linear-gradient(180deg, #0000, #0000);
    border: 2px inset #e1e5eb00;
    transition: 200ms;
    border-radius: 8px;
}
button.tb-app[data-open="true"] {
    width: 44px;
    height: 44px;
    padding: 2px;
    background: linear-gradient(180deg, #b4aeae13, #b9d0eb54);
    border: 1px solid #e1e5ebab;
    border-bottom: inset 2px #ffffff9a;
    transition: 200ms;
    border-radius: 8px;
}
button.tb-app:hover {
    background: linear-gradient(180deg, #b4aeae13, #b9d0eb54);
    border: 1px solid #e1e5ebab;
    border-bottom: inset 2px #ffffff9a;
}
button.tb-app:active {
    background: linear-gradient(180deg, #b4aeae36, #b9d0ebb4);
    border: 1px solid #e1e5ebd7;
    border-bottom: inset 2px #a0cdf1da;
}
button.tb-app img, .tb-icon {
    width: 100%;
    height: 100%;
}

.center {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    flex-wrap: nowrap;
}

button.icon{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    color: white;
    background: transparent;
    border: none;
    margin: 3px;
    border: 2px solid #0000;
    padding: 8px;
    text-shadow: #000 0px 0px 2px, #000 0px 0px 4px;
    border-radius: 10px;
}
button.icon img {
    width: 48px;
    margin-bottom: 5px;
}
button.icon:hover {
    background-color: #00a2ff4d;
    border: 2px solid #00a2ffb6;
}
button.icon[class="icon"]:active {
    background-color: #00a2ff81;
    border: 2px solid #00a2ffff;
    filter: none;
}
.start-menu {
    position: absolute;
    bottom: 55px;
    left: 2px;
    width: min(425px, 90vw);
    height: min(580px, 70vh);
    display: flex;
    flex-direction: column-reverse;
    border: 2px solid rgba(29, 29, 29, 0.333);
    box-shadow: 0px 0px 2px 1px inset #ffffff79;
    border-radius: 8px 25px 8px 8px;
    background-color: var(--bg-col-dark-a) ;
    backdrop-filter: blur(5px);
    padding: 5px;
    transform: translate(0px 0px);
    transition: 250ms;
    z-index: 190;
}
.start-menu * button, .start-menu * span {
    text-shadow: #0002 0px 0px 2px, #0008 0px 0px 4px;
}

.sm-right {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.start-menu[data-status="disabled"] {
    transform: translate(-35px, 60px) scale(0.8);
    opacity: 0;
    pointer-events: none;
}

.user {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2px;
    font-weight: 600;
    margin-bottom: 10px;
}
.user img {
    margin-right: 10px;
    width: 70px;
    height: 70px;
    margin: 10px 0px;
    border-radius: 100px;
    border: none;
    box-shadow: 2px 3px 4px 2px #0004;
    transition: 700ms;
    transform: rotate3d(.1, 1, 1, 19deg);
}
.user img:hover {
    transform: rotate3d(.4, .7, 1, 40deg);
}
.start-menu .sm-middle,.start-menu .sm-left {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    background-color: #fffd;
    border: white 2px solid;
    border-radius: 8px;
    margin-right: 4px;
    min-height: calc( calc( min(580px, 70vh) - 120px ) * 0.45);
    margin-top: 10px;
    overflow: auto;
}

.start-menu .sm-middle button {
    display: flex;
    height: 36px;
    font-family: inherit;
    width: calc(min(400px, 90vw) - calc(calc(min(300px, 90vw) * 0.15) + 120px));
    border: none;
    background-color: #0000;
    border-radius: 8px;
    font-size: 1.25em;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.start-menu .sm-right button {
    display: block;
    height: 24px;
    font-family: inherit;
    width: 120px;
    border-radius: 5px;
    border: none;
    background-color: #0000;
    text-align: center;
    align-content: center;
    color: #fff;
    font-size: 1em;
}

@media (max-aspect-ratio: 16/9) {
    .background img {
        height: 100vh;
        width: unset;
    }
}
@media (min-aspect-ratio: 16/9) {
    .background img {
        height: unset;
        width: 100vw;
    }
}
.start-menu .sm-right button:hover {
    background: linear-gradient(180deg, #353b4115, #121d2763);
    border: 1.2px solid #0a131bb4;
}

button.sm-middle-but img {
    height: 24px;
    margin-right: 10px;
}

.start-menu .sm-middle button:hover {
    background: linear-gradient(180deg, #3c9dff1c, #178fff4d);
    border: 1.2px solid #1b95ff75;
}


.start-menu .sm-right button:active {
    background: linear-gradient(180deg, #353b413b, #121d2783);
    border: 1.2px solid #0a131b;
}

.start-menu .sm-middle button:active {
    background: linear-gradient(180deg, #3c9dff3b, #178fff83);
    border: 1.2px solid #1b95ff;
}

#timedate {
    background-color: #0000;
    border: none;
    font-size: 1em;
    text-shadow: #000 0px 0px 2px, #000 0px 0px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px;
}

.taskbar-right .hidewindows {
    width: 20px;
    height: 52px;
    background: linear-gradient(304deg,#fff4 20%, #fff1 40%, #fff1 60%, #fff4);
    backdrop-filter: blur(3px);
    border: 1px #ffffff70 solid;
    margin: 0px;
}

.window {
    z-index: attr(data-z);
    position: absolute;
}

.window[data-isfocused="false"] .window-content iframe {
    pointer-events: none;
}

.window[data-status="unminimizing"] {
    transition: 250ms;
}
.window[data-status="minimized"]{
    transform: perspective(500px) rotate3d(1,1,0,15deg) translate(-20px, 60px) scale(0.4);
    transform-origin: left bottom;
    opacity: 0;
    pointer-events: none;
    transition: 250ms;
}
.window[data-status="closing"]{
    transform: perspective(500px) rotateX(-20deg) scale(0.6);
    opacity: 0;
    pointer-events: none;
    transition: 250ms;
}
.window[data-status="opening"]{
    transform: perspective(500px) rotateX(-20deg) scale(0.6);
    opacity: 0;
    pointer-events: none;
    transition: 250ms;
}
.window[data-status="almostOpen"]{
    transition: 250ms;
}
.transitioning {
    transition: 200ms;
}

button.sm-left-block.block-1 {
    --siz: calc(0.2 * min(425px, 90vw));
    width: var(--siz);
    height: var(--siz);
    border-radius: 12px;
    border: none;
    background: linear-gradient(2deg, #0056a785, #0f70ee26);
    box-shadow: 0 0 4px 4px #fffa inset, 0 0 2px 1px #0005;
    margin: 2px;
}

button.sm-left-block.block-1 img {
    height: 65%;
    aspect-ratio: 1/1;
}

button.sm-left-block.block-1 span {
    font-size: 0.8em;
    line-height: 0.9em;
    display: block;
}

button.sm-left-block.block-2 {
    --siz: calc(0.2 * min(425px, 90vw));
    width: calc(var(--siz) * 2);
    height: var(--siz);
    border-radius: 12px;
    border: none;
    background: linear-gradient(2deg, #0056a785, #0f70ee26);
    box-shadow: 0 0 4px 4px #fffa inset, 0 0 2px 1px #0005;
    margin: 2px;
}

button.sm-left-block.block-2 img {
    height: 65%;
    aspect-ratio: 1/1;
}

button.sm-left-block.block-2 span {
    font-size: 0.8em;
    line-height: 0.9em;
    display: block;
}

*::-webkit-scrollbar {
  width: 12px;
  height: 8px;
  background-color: #0a6ac45d; /* or add it to the track */
  border-radius: 10px;
  padding: 4px;
}

*::-webkit-scrollbar-thumb {
  background: #82c0fa;
  width: 10px;
  border-radius: 6px;
}

.text-box, .window-content {
    user-select: text;
}

img {
    user-select: none !important;
}

.wtb-middle {
    display: flex;
    flex-direction: row;
    align-content: center;
    align-items: center;
    min-width: 120px;
    border-radius: 50px;
    justify-content: center;
    pointer-events: none;
    flex-direction: row;
    position: relative;
}

.window {
    display: flex;
    flex-direction: column;
    background: var(--bg-col-dark-b);
    padding: 10px;
    border-radius: 20px 20px 8px 8px;
    z-index: attr(data-z);
    position: absolute;
    box-shadow: inset 0 0 2px 1px #000c, inset 0 0 4px 4px #fffa, 0 3px 9px 3px #0005;
    backdrop-filter: blur(3px);
}

img.wtb-icon {
    width: 32px;
    aspect-ratio: 1/1;
}

.window-content {
    border-radius: 10px;
    overflow: clip;
    display: flex;
    width: attr(width);
    height: attr(height);
}

.window-content iframe {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    position: relative;
}

.wtb-right, .wtb-left {
    width: 100px;
}

.wtb-right button {
    width: 28px;
    height: 28px;
    border-radius: 100%;
    border: none;
    background: var(--bg-col-dark-b);
    box-shadow: inset 0 0 12px 0px white, -2px 2px 5px 0px black;
}

.wtb-right button.wtb-close {
    background: #d11c3491;
}

.window-topbar {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    touch-action: none;
}
.window-topbar:active {
    cursor: move;
}

.resizer {
    width: 32px;
    height: 32px;
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: #0000;
    cursor: nw-resize;
}