body {background: url("background.png") 50%; background-attachment: fixed; background-size:cover; background-position: center top; overflow: hidden; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; right: 0; bottom: 0; padding: 0;
  margin: 0;}

#desktop {display: flex;flex: 1;position: relative;overflow-y: hidden; /* at least dont hide stuff on mobile */overflow-x: hidden}
.window {display: flex;flex-direction: column;width: 100%;height: 100%}
.window-body {overflow: auto}
.window-body,
.window-body > div {flex: 1;display: flex;flex-direction: column;justify-content: space-between;margin-top:0px}
.glass::before {content: "";position: absolute;top: 0;bottom: 0;left: 0;right: 0;filter: brightness(1.4);display: block;}
.colored::before,
.colored > .title-bar {background: #1F1F1F;}
.window.glass > .title-bar {background-size: contain;background-attachment: fixed}
.window-wrapper {position: absolute;touch-action: none;user-select: none;min-width: 320px;transition:top 0.25s,right 0.25s,left 0.25s,bottom 0.25s,width 0.25s,height 0.25s,opacity 0.35s,scale 0.35s}
.window-wrapper.minimizedWindow {transition:top 0.25s,right 0.25s,left 0.25s,bottom 0.25s,width 0.25s,height 0.25s,opacity 0.35s,scale 0.35s}
.window-wrapper.ui-draggable-dragging {transition:opacity 0.35s,scale 0.35s}
.window-wrapper.closed { opacity:0;scale:0.9; }
.window-wrapper .window.glass > .title-bar {background-size: contain;background-attachment: fixed}
.window-wrapper.fullSizeWindow { top: 0 !important; right: 0 !important; left: 0 !important; border-radius: 0; bottom: 32px !important; width:100% !important; height:100% !important; }
.window > .title-bar {border:0;box-shadow:inset 0 .5px #fff;}
.window-container {display: flex;flex: 1;position: relative;overflow-y: auto;overflow-x: hidden;}
.taskbar-container {height: 40px;border-radius: 0;z-index: 9999 !important;display: flex!important;flex-direction: row!important;}
.taskbar-container::before {border-radius: 0;border-top: #fff 0px solid;box-shadow:inset 0 0 0 0px #fffd}
.taskbar-container .title-bar {border-radius: 0;width: 100%;height: 100%;display: flex;padding: 0;display: flex;}

h1, h2, h3 {margin:0px;}
h2 {margin-bottom:-15px;font-size:35px;}
h3 {font-size:20px;margin-bottom:10px;}

iframe { border-width: 0px }

#icons {display: flex;flex-direction: column;position: absolute;z-index: 10;top: 20px;left: 20px;margin-bottom:15px;border-radius: 4px;}
#icon-row {display: flex;flex-direction: row;margin-bottom: 30px;}
#icons img {width:45px;height:45px;margin-top: 4px;display: block;align-self: center;margin-left: auto;margin-right: auto;z-index: 1;filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));}

#icons a {text-decoration: none !important;width: 62px;height: 62px;display: block;justify-content: center;padding: 4px;background: transparent;transition: background 0.15s;cursor:default;user-select:none;touch-action:none;}

#icons div {margin-top: 1px;font: 9pt Segoe UI, sans-serif;color: #fff;letter-spacing: 0;line-height: 15px;text-shadow: 1px 1px 0 #000, 1px 1px 2px #000, 0 0 16px #000;text-align: center;z-index: 1}

#icons a:hover {border-radius: 4px;background: #ffffff4f;color: #FFF;box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.71) inset;}
      
#taskbar {height:100%;width:100%;background:transparent;position: absolute;border-top: 0px solid #000;bottom: 0;left: 0;right: 0;margin-right: 4px;display: flex!important;flex-direction: row!important;}
.taskbarPanel {height: 100%;display: inline-block;width:60px;height:calc(100% + 2px);font-size: 17px;padding: 4px 0px;border-radius: 4px;border: 1px solid #000000bd;margin-right: 4px;box-sizing:border-box;background: linear-gradient(150deg,#fff,hsla(0,0%,100%,.5) 30%,transparent);font-weight: bold;cursor: pointer;display: flex;cursor:default;user-select:none;touch-action:none;}
.taskbarPanel > div::after {background: radial-gradient(circle,#fff 0%,rgba(255, 255, 255, 0.3) 75%,transparent 100%);opacity: 0;transition-property: opacity;transition-duration: 0.3s;display: block;content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.taskbarPanel:hover > div::after {opacity: 0.5;}
.taskbarPanel:active > div::after {opacity: 1;}
.taskbarPanel > div {border-radius: 6px; border: 1px solid hsla(0, 0%, 100%, .3); height:100%; width:100%; position: relative;padding: 4px 4px;}
.taskbarPanel > div > img {width: auto;height:100%;margin: 0 auto;display:block;filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5));}
.taskbarPanel.activeTab{display: flex;background: linear-gradient(150deg,#fff,hsla(0,0%,100%,.5) 30%,transparent)}
.taskbarPanel.minimizedTab {display: flex;background: transparent}
.taskbarPanel.minimizedTab:hover {display: flex;background: transparent}
.taskbarPanel.closed {opacity: 0;display: none}
      
.openWindow { color:#FFF; text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px,
        #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px; }
        
@keyframes patternscroll {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: 1008px 0px;
  }
}
@keyframes patternscroll2 {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: -1008px 0px;
  }
}

.web-button {width:88px;height:32px;margin-right:10.3px;}
.rosepattern {width: 100%;height: 20px;opacity:0.4;background-image: url("img/pattern.png");mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0.2))}