.taskbar { width: 100vw; height: 50px; /*background-color: #fff8;*/ background: linear-gradient(90deg, #fff8 0px, #fff8 50px, #aaf6 100px), url(images/window-styles/aero-glass-taskbar.png); backdrop-filter: blur(6px) brightness(0.8); border-top: 1px solid #00000077; box-shadow: 0 -0.5px 0.5px #000e, 0 2px 1px inset #bfd1e4ee;; position: absolute; bottom: 0; left: 0; z-index: 100000000000; } .start-icon { height: 60px; width: 60px; image-rendering: smooth; top: 50%; transform: translatey(-50%); position: relative; background-image: url("images/window-styles/start_1.png"); background-position: center; background-size: 110%; background-repeat: no-repeat; transition: background-image 0.02s ease-in-out; cursor: url('images/cursors/windows7_link.webp') 5 1, auto; } .start-icon:hover { background-position: center; background-size: 110%; background-repeat: no-repeat; animation-fill-mode: forwards; background-image: url("images/window-styles/start_2.png"); } .start-apps { position: absolute; top: 0; left: 70px; height: 100%; width: 100%; display: flex; flex-direction: row; } .app { height: 38px; margin-right: 5px; width: 60px; background-size: 40px; background-position: center; background-repeat: no-repeat; padding: 5px; border-radius: 4px; position: relative; display: block; cursor: url('images/cursors/windows7_link.webp') 5 1, auto; } .app::after { border: 1px solid #08161f; box-shadow: 0 0 0.4px 1px inset white; border-radius: 5px; content: ""; position: absolute; top: -1px; left: -1px; width: 70px; height: 48px; background-image: url("images/window-styles/app-shine.png"); background-size: 100% 100%; image-rendering: smooth; opacity: .5; } .app::after.minimized { } .app:hover::after { filter: brightness(1.2); backdrop-filter: brightness(1.2); }