/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
background-image: url(https://bartlomiej.neocities.org/azul%20wallpaper.jpeg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
background-position: center center;
}

.window-body {
    padding: 15px;
}

.window-body ul {
    list-style-position: inside;
    text-align: center;
}
.window {
    overflow: hidden;
}
body {
  background-color: black;
  color: white;
  font-family: Frutiger;
}
h1 { font-family: Frutiger; font-size: 24px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 26.4px; } h3 { font-family: Frutiger; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 15.4px; } p { font-family: Frutiger; font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px; } blockquote { font-family: Frutiger; font-size: 21px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 30px; } pre { font-family: Frutiger; font-size: 13px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 18.5667px; }

/* Taskbar Container */
.xp-taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(to bottom, #245edb 0%, #3f8cf3 9%, #245edb 18%, #1b4ea2 92%, #184185 100%);
    border-top: 1px solid #1a3e7a;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 9999;
    font-family: Tahoma, Arial, sans-serif;
    box-sizing: border-box;
}

/* Iconic Green Start Button */
.xp-start-button {
    height: 100%;
    width: 90px;
    border: none;
    background: linear-gradient(to bottom, #6cb230 0%, #4c8a1a 12%, #386710 45%, #447e17 85%, #5a9825 100%);
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    box-shadow: inset -1px 0 2px #264a06, 2px 0 3px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.xp-start-button:active {
    background: linear-gradient(to bottom, #386710 0%, #447e17 50%, #6cb230 100%);
}

.xp-start-button .start-text {
    color: #ffffff;
    font-family: "Franklin Gothic Medium", Arial, sans-serif;
    font-style: italic;
    font-weight: bold;
    font-size: 16px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

/* Center Tasks Area */
.xp-taskbar-tasks {
    flex-grow: 1;
    display: flex;
    padding: 0 10px;
    height: 100%;
    align-items: center;
}

/* Active Program Tab */
.xp-task-tab {
    background: linear-gradient(to bottom, #3a75ea 0%, #245edb 12%, #1d4fa4 85%, #245edb 100%);
    color: white;
    height: 22px;
    padding: 0 12px;
    border-radius: 3px;
    font-size: 11px;
    display: flex;
    align-items: center;
    border: 1px solid #16366b;
    box-shadow: inset 1px 1px 1px rgba(255,255,255,0.2);
    max-width: 150px;
}

/* Blue System Tray (Clock Area) */
.xp-system-tray {
    height: 100%;
    background: linear-gradient(to bottom, #0c8df2 0%, #0060e5 12%, #0840bc 85%, #0053cf 100%);
    border-left: 1px solid #08318a;
    padding: 0 12px;
    display: flex;
    align-items: center;
    color: #dff4ff;
    font-size: 11px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
    box-shadow: inset 1px 0 1px rgba(255,255,255,0.2);
}

body {
    /* Keep your existing background layout lines here */
    padding-bottom: 40px; /* This keeps your content from hiding behind the taskbar */
}

/* Core Start Menu Box */
.xp-start-menu {
    position: fixed;
    bottom: 30px;
    left: 2px;
    width: 380px;
    background: #245edb;
    border: 2px solid #245edb;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    display: none;
    flex-direction: column;
    z-index: 10000;
    box-shadow: 2px 2px 12px rgba(0,0,0,0.5);
    font-family: Tahoma, Arial, sans-serif;
    box-sizing: border-box;
}

.xp-start-menu.show {
    display: flex;
}

/* User Header Banner */
.xp-menu-header {
    background: linear-gradient(to bottom, #1856d1 0%, #245edb 100%);
    padding: 6px 10px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #1d4fa4;
    box-shadow: inset 0 1px rgba(255,255,255,0.4);
}

.xp-user-avatar {
    width: 32px;
    height: 32px;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 3px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.xp-user-avatar img {
    width: 24px;
    height: 24px;
}

.xp-username {
    color: white;
    font-weight: bold;
    font-size: 13px;
    margin-left: 10px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}

/* Two-Pane Body Wrapper */
.xp-menu-body {
    display: flex;
    background: #fff;
}

/* Left Panel (Programs) */
.xp-menu-left-pane {
    width: 53%;
    background: #ffffff;
    padding: 6px;
    display: flex;
    flex-direction: column;
}

.xp-menu-item {
    display: flex;
    align-items: center;
    padding: 5px;
    text-decoration: none;
    color: #333;
    font-size: 11px;
    border-radius: 3px;
}

.xp-menu-item img {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.xp-menu-item .xp-item-text span {
    color: #777;
    font-size: 10px;
}

.xp-menu-item.standard-item span {
    font-size: 11px;
}

.xp-menu-item:hover {
    background-color: #316ac5;
    color: white;
}
.xp-menu-item:hover span {
    color: #dff4ff !important;
}

.xp-pane-divider {
    height: 1px;
    background: linear-gradient(to right, #eeeeee 0%, #dcdcdc 50%, #eeeeee 100%);
    margin: 5px 0;
}

/* Right Panel (System Locations) */
.xp-menu-right-pane {
    width: 47%;
    background: #d3e5fa;
    border-left: 1px solid #b4d1f5;
    padding: 6px;
    display: flex;
    flex-direction: column;
}

.xp-right-item {
    padding: 5px 8px;
    text-decoration: none;
    color: #001763;
    font-size: 11px;
    border-radius: 3px;
}

.xp-right-item.heavy {
    font-weight: bold;
}

.xp-right-item:hover {
    background-color: #316ac5;
    color: white;
}

.xp-right-divider {
    height: 1px;
    background: #b4d1f5;
    margin: 4px 4px;
}

/* Bottom Logout Footer */
.xp-menu-footer {
    background: linear-gradient(to bottom, #245edb 0%, #1856d1 100%);
    padding: 6px;
    display: flex;
    justify-content: flex-end;
    border-top: 2px solid #1d4fa4;
}

.xp-footer-btn {
    background: none;
    border: none;
    display: flex;
    align-items: center;
    color: white;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 3px;
    margin-left: 5px;
}

.xp-footer-btn img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.xp-footer-btn:hover {
    background: rgba(255,255,255,0.15);
}

/* Align start menu text left so it doesn't inherit the body's center rule */
.xp-start-menu, 
.xp-start-menu a, 
.xp-start-menu button {
    text-align: left !important;
}

/* Style the emoji icons nicely */
.xp-emoji-icon {
    font-size: 22px;
    margin-right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

/* Fix footer layout spacing */
.xp-menu-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Update the Title Bar to keep a normal cursor */
.title-bar {
    cursor: default; /* Keeps the normal Windows mouse arrow pointer */
    user-select: none; /* Prevents text from being highlighted while dragging */
}
/* Resizing Handle Box */
.xp-resize-handle {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 14px;
    height: 14px;
    cursor: se-resize; /* Shows the diagonal bottom-right resize cursor arrow */
    z-index: 50;
}