* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Theme colours sourced from tpenguinltg/winclassic (MPL 2.0). */
    --ActiveBorder: rgb(192,192,192);
    --ActiveTitle: rgb(0,0,128);
    --AppWorkspace: rgb(128,128,128);
    --Background: rgb(0,128,128);
    --ButtonAlternateFace: rgb(192,192,192);
    --ButtonDkShadow: rgb(0,0,0);
    --ButtonFace: rgb(192,192,192);
    --ButtonHilight: rgb(255,255,255);
    --ButtonLight: rgb(223,223,223);
    --ButtonShadow: rgb(128,128,128);
    --ButtonText: rgb(0,0,0);
    --GradientActiveTitle: rgb(16,132,208);
    --GradientInactiveTitle: rgb(181,181,181);
    --GrayText: rgb(128,128,128);
    --Hilight: rgb(0,0,128);
    --HilightText: rgb(255,255,255);
    --HotTrackingColor: rgb(0,0,128);
    --InactiveBorder: rgb(192,192,192);
    --InactiveTitle: rgb(128,128,128);
    --InactiveTitleText: rgb(192,192,192);
    --InfoText: rgb(0,0,0);
    --InfoWindow: rgb(255,255,225);
    --Menu: rgb(192,192,192);
    --MenuBar: rgb(192,192,192);
    --MenuHilight: rgb(0,0,128);
    --MenuText: rgb(0,0,0);
    --Scrollbar: rgb(192,192,192);
    --TitleText: rgb(255,255,255);
    --Window: rgb(255,255,255);
    --WindowFrame: rgb(0,0,0);
    --WindowText: rgb(0,0,0);

    --desktop-bg: var(--Background);
    --window-bg: var(--ButtonFace);
    --window-border-light: var(--ButtonHilight);
    --window-border-dark: var(--ButtonShadow);
    --window-border-very-dark: var(--ButtonDkShadow);
    --titlebar-active-start: var(--ActiveTitle);
    --titlebar-active-end: var(--GradientActiveTitle);
    --titlebar-inactive: var(--InactiveTitle);
    --taskbar-height: 32px;
    --font-ui: "MS Sans Serif", "Microsoft Sans Serif", sans-serif;
    --scrollbar-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M1 6l3.5-4L8 6H1z' fill='%23000000'/%3E%3C/svg%3E");
    --scrollbar-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M1 3l3.5 4L8 3H1z' fill='%23000000'/%3E%3C/svg%3E");
    --scrollbar-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M6 1L2 4.5 6 8V1z' fill='%23000000'/%3E%3C/svg%3E");
    --scrollbar-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M3 1l4 3.5L3 8V1z' fill='%23000000'/%3E%3C/svg%3E");
}

body {
    font-family: var(--font-ui);
    font-size: 11px;
    background-color: var(--desktop-bg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    overflow: hidden;
    height: 100vh;
    cursor: default;
    user-select: none;
    color: #000;
}

img.icon-image,
.title-bar-text img,
.menu-icon,
.start-menu-subitem img,
.taskbar-task img,
.system-tray img,
.welcome-logo {
    image-rendering: pixelated;
    user-select: none;
}

/* Desktop */
.desktop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--taskbar-height);
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, 90px);
    grid-auto-rows: max-content;
    gap: 16px;
    align-content: start;
    justify-content: start;
    justify-items: start;
    align-items: start;
}

/* Wallpaper Artist Attribution */
.wallpaper-attribution {
    position: fixed;
    bottom: calc(var(--taskbar-height) + 8px);
    right: 8px;
    font-family: var(--font-ui);
    font-size: 11px;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 2px;
    pointer-events: none;
    z-index: 50;
}

/* Desktop Icons */
.desktop-icon {
    width: 90px;
    text-align: center;
    cursor: pointer;
    padding: 6px 4px;
    border: 1px solid transparent;
    outline: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border-radius: 2px;
}

.desktop-icon:hover,
.desktop-icon:focus {
    border: 1px solid #b5dfff;
    background: rgba(0, 0, 128, 0.35);
}

.desktop-icon.selected {
    border: 1px solid #a5c8ff;
    background: rgba(0, 0, 128, 0.55);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}


.desktop-icon .icon-image {
    display: block;
    margin: 0 auto 4px;
    width: 32px;
    height: 32px;
}

.desktop-icon .icon-label {
    color: white;
    font-size: 11px;
    text-shadow: 1px 1px 2px #000;
    word-wrap: break-word;
    padding: 0 2px;
}

/* Windows */
.window {
    position: absolute;
    display: flex;
    flex-direction: column;
    background: var(--window-bg);
    border-width: 2px;
    border-style: solid;
    border-color: var(--window-border-light) var(--window-border-dark) var(--window-border-dark) var(--window-border-light);
    box-shadow: 2px 2px 0 #000000;
    min-width: 320px;
    min-height: 220px;
    height: 400px;
    z-index: 1;
    overflow: hidden;
}

.window.active {
    z-index: 100;
}

.window .resize-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    right: 0px;
    bottom: 0px;
    cursor: nwse-resize;
    background-image:
        linear-gradient(135deg, transparent 0, transparent 7px, var(--ButtonShadow) 7px, var(--ButtonShadow) 9px, transparent 9px),
        linear-gradient(135deg, transparent 0, transparent 4px, var(--ButtonHilight) 4px, var(--ButtonHilight) 5px, transparent 5px);
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: auto;
    z-index: 5;
}

.window.maximized .resize-handle {
    display: none;
}

/* Title Bar */
.title-bar {
    background: linear-gradient(to right, var(--titlebar-active-start), var(--titlebar-active-end));
    padding: 2px 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
    height: 22px;
    flex-shrink: 0;
}

.title-bar-text {
    color: #ffffff;
    font-weight: bold;
    font-size: 11px;
    flex-grow: 1;
    padding-left: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.title-bar-text img {
    width: 18px;
    height: 18px;
}

.title-bar-controls {
    display: flex;
    gap: 2px;
}

.title-bar-controls button {
    width: 16px;
    height: 14px;
    padding: 0;
    border: 1px solid;
    border-color: var(--window-border-light) var(--window-border-very-dark) var(--window-border-very-dark) var(--window-border-light);
    background-color: var(--window-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 10px;
    cursor: pointer;
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.title-bar-controls button:active {
    border-color: var(--window-border-very-dark) var(--window-border-light) var(--window-border-light) var(--window-border-very-dark);
}

.minimize-btn {
    background-image: url('assets/icons/minimize.svg');
}

.maximize-btn {
    background-image: url('assets/icons/maximize.svg');
}

.close-btn {
    background-image: url('assets/icons/close.svg');
}

/* Menu Bar */
.menu-bar {
    background: var(--window-bg);
    display: flex;
    gap: 8px;
    padding: 2px 4px;
    border-bottom: 1px solid var(--window-border-dark);
    flex-shrink: 0;
}

.menu-item {
    padding: 2px 8px;
    cursor: pointer;
}

.menu-item:hover {
    background: var(--titlebar-active-start);
    color: #ffffff;
}

/* Toolbar */
.toolbar {
    background: var(--window-bg);
    display: flex;
    gap: 4px;
    padding: 4px;
    border-bottom: 1px solid var(--window-border-dark);
    flex-shrink: 0;
}

.toolbar-btn {
    padding: 4px 8px;
    background: var(--window-bg);
    border: 2px solid;
    border-color: var(--window-border-light) var(--window-border-very-dark) var(--window-border-very-dark) var(--window-border-light);
    cursor: pointer;
    font-size: 11px;
}

.toolbar-btn:active {
    border-color: var(--window-border-very-dark) var(--window-border-light) var(--window-border-light) var(--window-border-very-dark);
}

/* Address Bar */
.address-bar {
    background: var(--window-bg);
    padding: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--window-border-dark);
    flex-shrink: 0;
}

.address-bar label {
    font-size: 11px;
}

.address-bar input {
    flex-grow: 1;
    padding: 2px 4px;
    border: 2px solid;
    border-color: var(--window-border-dark) var(--window-border-light) var(--window-border-light) var(--window-border-dark);
    font-family: var(--font-ui);
    font-size: 11px;
    background: #ffffff;
}

/* Window Body */
.window-body {
    background: #ffffff;
    padding: 8px;
    overflow: auto;
    flex: 1 1 0px;
    min-height: 0;
    flex-grow: 1;
}

p {
    font-size: 1.2em;
}

.window-body.browser {
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


.browser-content {
    flex: 1 1 auto;
    padding: 14px;
    background: linear-gradient(180deg, #f2f5ff 0%, #ffffff 40%, #f5f9ff 100%);
    display: flex;
    flex-direction: column;
    gap: 18px;
    overflow-y: auto;
    border-top: 1px solid var(--window-border-light);
    min-height: 0;
}

.browser-content,
.browser-content * {
    user-select: text;
}


.browser-hero {
    background: linear-gradient(90deg, #0f3fa1, #2685d8, #0f3fa1);
    padding: 12px 16px;
    color: #ffffff;
    text-align: center;
    border: 2px solid #0a2d72;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.hero-glow {
    font-family: "Trebuchet MS", "Verdana", sans-serif;
    font-size: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 6px;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

.browser-hero p {
    margin: 0;
    font-size: 12px;
}

.browser-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.browser-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px;
    background: rgba(255, 255, 255, 0.92);
    border: 2px solid var(--window-border-dark);
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
}

.browser-card:hover {
    background: #f0f6ff;
    border-color: #0f3fa1;
}

.card-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-size: 32px 32px;
    background-position: center;
    border: 2px solid var(--window-border-dark);
    box-shadow: inset -1px -1px 0 var(--ButtonDkShadow), inset 1px 1px 0 var(--ButtonHilight);
    background-color: var(--ButtonFace);
    image-rendering: pixelated;
}

.card-icon--orcid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23008f4c'/%3E%3Crect x='0.5' y='0.5' width='31' height='31' fill='none' stroke='%23002515' stroke-width='1'/%3E%3Crect x='10' y='8' width='4' height='16' fill='%23ffffff'/%3E%3Cpath d='M18 8h5a3 3 0 013 3v10a3 3 0 01-3 3h-5z' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");
}

.card-icon--scholar {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%230f3fa1'/%3E%3Crect x='0.5' y='0.5' width='31' height='31' fill='none' stroke='%23002260' stroke-width='1'/%3E%3Cpath d='M4 9l12-3 12 3-12 5z' fill='%23ffffff' stroke='%23002260' stroke-width='2'/%3E%3Cpath d='M8 13v9l8 5 8-5v-9' fill='%23f3f6ff' stroke='%23002260' stroke-width='2'/%3E%3Cpath d='M16 15v10' stroke='%23002260' stroke-width='2'/%3E%3C/svg%3E");
}

.card-icon--github {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23000000'/%3E%3Crect x='0.5' y='0.5' width='31' height='31' fill='none' stroke='%23909090' stroke-width='1'/%3E%3Cpath d='M8 24v-6a6 6 0 016-6h4a6 6 0 016 6v6' fill='%23ffffff'/%3E%3Cpath d='M20 16c1.5-2 3-6-4-6s-5.5 4-4 6M12 24v4M20 24v4' stroke='%23000000' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='20' r='1' fill='%23000000'/%3E%3Ccircle cx='20' cy='20' r='1' fill='%23000000'/%3E%3C/svg%3E");
}

.card-icon--linkedin {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%230067b1'/%3E%3Crect x='0.5' y='0.5' width='31' height='31' fill='none' stroke='%23003f70' stroke-width='1'/%3E%3Crect x='7' y='13' width='4' height='12' fill='%23ffffff'/%3E%3Ccircle cx='9' cy='9' r='2' fill='%23ffffff'/%3E%3Cpath d='M15 13h3v2c0-1 1.5-2.2 3.5-2.2 2.3 0 4.5 1.3 4.5 4.8V25h-4v-6.1c0-1.4-.7-2.1-1.9-2.1-1.3 0-2.1.9-2.1 2.1V25h-4z' fill='%23ffffff'/%3E%3C/svg%3E");
}

.card-body h3 {
    margin: 0 0 4px;
    font-size: 14px;
}

.card-body p {
    margin: 0 0 8px;
    line-height: 1.4;
    font-size: 11px;
}

.card-link {
    display: inline-block;
    padding: 4px 12px;
    border: 2px solid #0f3fa1;
    background: linear-gradient(180deg, #ffffff, #cfe0ff);
    color: #0f3fa1;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-decoration: none;
}

.card-link:hover {
    background: linear-gradient(180deg, #dbe8ff, #ffffff);
}

.browser-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    font-size: 10px;
    color: #1f1f1f;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--window-border-dark);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.browser-badge {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.window-body a {
    color: #000080;
}


.icon-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.folder-icon {
    width: 100%;
    text-align: left;
    cursor: pointer;
    padding: 4px 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid transparent;
    border-radius: 2px;
}

.folder-icon:hover,
.folder-icon:focus {
    background: var(--Hilight);
    color: var(--HilightText);
    border-color: var(--HilightText);
}

.folder-icon .icon-image {
    display: block;
    margin: 0;
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
}

.folder-icon .icon-label {
    font-size: 11px;
    word-wrap: break-word;
    color: inherit;
}

.notepad-text {
    width: 100%;
    height: 300px;
    border: 1px solid var(--window-border-dark);
    padding: 4px;
    font-family: "Courier New", monospace;
    font-size: 12px;
    resize: none;
    background: #ffffff;
}

/* Status Bar */
.status-bar {
    background: var(--window-bg);
    border-top: 1px solid var(--window-border-light);
    padding: 2px 2px;
    display: flex;
    gap: 4px;
    align-items: center;
    height: 22px;
    flex: 0 0 auto;
}

.status-bar-field {
    padding: 0 6px;
    border: 1px solid;
    border-color: var(--window-border-dark) var(--window-border-light) var(--window-border-light) var(--window-border-dark);
    font-size: 11px;
    background: #ffffff;
    display: flex;
    align-items: center;
    min-height: 16px;
    line-height: 16px;
}

/* Taskbar */

.taskbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--taskbar-height);
    background: var(--window-bg);
    border-top: 2px solid var(--window-border-light);
    display: flex;
    align-items: center;
    padding: 2px 4px;
    gap: 4px;
    z-index: 1000;
}

.start-button {
    position: relative;
    height: 23px;
    min-width: 84px;
    padding: 0 12px 0 28px;
    background: var(--window-bg);
    border: 2px solid;
    border-color: var(--window-border-light) var(--window-border-very-dark) var(--window-border-very-dark) var(--window-border-light);
    font-weight: bold;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    line-height: 16px;
}

.start-button:active,
.start-button.active {
    border-color: var(--window-border-very-dark) var(--window-border-light) var(--window-border-light) var(--window-border-very-dark);
}

.start-button .start-icon {
    position: absolute;
    left: 8px;
    top: 48%;
    width: 16px;
    height: 14px;
    background-image: url('assets/icons/start.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    image-rendering: pixelated;
    display: block;
    transform: translateY(-50%);
}

.start-button .start-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
    border: 0;
    color: #000000;
    overflow: hidden;
}

.taskbar-tasks {
    display: flex;
    gap: 4px;
    flex-grow: 1;
}

.system-tray {
    margin-left: auto;
    display: flex;
    min-height: 0;
    gap: 6px;
    padding: 2px 6px;
    border: 1px solid;
    border-color: var(--window-border-dark) var(--window-border-light) var(--window-border-light) var(--window-border-dark);
    background: var(--window-bg);
    min-height: 18px;
    box-shadow: inset -1px -1px 0 var(--window-border-light), inset 1px 1px 0 var(--window-border-dark);
}

.taskbar-task {
    height: 24px;
    padding: 0 8px;
    background: var(--window-bg);
    border: 2px solid;
    border-color: var(--window-border-light) var(--window-border-very-dark) var(--window-border-very-dark) var(--window-border-light);
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.taskbar-task.active {
    border-color: var(--window-border-very-dark) var(--window-border-light) var(--window-border-light) var(--window-border-very-dark);
}

.taskbar-task img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.taskbar-task span {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tray-icon img {
    width: 16px;
    height: 16px;
    margin: 0;
}

.clock {
    font-size: 11px;
    padding: 0 4px;
    line-height: 16px;
}
.start-menu {
    position: fixed;
    bottom: var(--taskbar-height);
    left: 2px;
    width: 240px;
    background: var(--window-bg);
    border: 2px solid;
    border-color: var(--window-border-light) var(--window-border-very-dark) var(--window-border-very-dark) var(--window-border-light);
    box-shadow: 2px 2px 0 #000000;
    z-index: 2000;
}

.start-menu-sidebar {
    background: linear-gradient(to bottom, var(--titlebar-active-start), var(--titlebar-active-end));
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 8px 4px;
    color: #ffffff;
    font-size: 18px;
    float: left;
    height: 100%;
}

.start-menu-sidebar-text {
    transform: rotate(180deg);
}

.start-menu-content {
    margin-left: 32px;
    padding: 6px 0;
}

.start-menu-item {
    padding: 6px 24px 6px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    width: 100%;
    background: none;
    border: none;
    color: inherit;
    text-align: left;
}

.start-menu-item span {
    flex-grow: 1;
}

.start-menu-item:hover,
.start-menu-item:focus {
    background: var(--titlebar-active-start);
    color: #ffffff;
}

.menu-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.start-menu-separator {
    height: 1px;
    background: var(--window-border-dark);
    margin: 6px 12px;
    border-top: 1px solid var(--window-border-light);
}

.has-submenu {
    position: relative;
}

.has-submenu::after {
    content: '\25B6';
    margin-left: auto;
    font-size: 10px;
}

.has-submenu:hover::after,
.has-submenu:focus::after,
.has-submenu:focus-within::after {
    color: #ffffff;
}

.start-menu-submenu {
    display: none;
    position: absolute;
    top: -6px;
    left: calc(100% - 4px);
    background: var(--window-bg);
    border: 2px solid;
    border-color: var(--window-border-light) var(--window-border-very-dark) var(--window-border-very-dark) var(--window-border-light);
    box-shadow: 2px 2px 0 #000000;
    padding: 4px 0;
    min-width: 180px;
    z-index: 2100;
}

.has-submenu:hover .start-menu-submenu,
.has-submenu:focus-within .start-menu-submenu {
    display: flex;
    flex-direction: column;
}

.start-menu-subitem {
    padding: 6px 18px;
    background: none;
    border: none;
    text-align: left;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.start-menu-subitem:hover,
.start-menu-subitem:focus {
    background: var(--titlebar-active-start);
    color: #ffffff;
}

.start-menu-subitem img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.start-menu-subitem span {
    flex-grow: 1;
    text-align: left;
}

/* Content helpers */
.welcome-pane {
    display: flex;
    gap: 16px;
    align-items: center;
}

.welcome-logo {
    width: 96px;
    filter: drop-shadow(1px 1px 0 #000000);
}

.welcome-text h1 {
    font-size: 18px;
    margin-bottom: 8px;
}

.welcome-text p {
    margin-bottom: 6px;
    line-height: 1.4;
}

.welcome-text,
.welcome-text * {
    user-select: text;
}

.welcome-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.welcome-heading h1 {
    margin: 0;
}

.welcome-photo {
    display: block;
    width: 33%;
    max-width: 200px;
    margin: 8px 0 12px;
    border: 2px solid var(--window-border-dark);
    box-shadow: 2px 2px 0 var(--window-border-very-dark);
}

.projects-list {
    list-style: none;
    display: grid;
    gap: 12px;
    margin-top: 12px;
}

.projects-title {
    display: block;
    font-weight: bold;
}

.projects-desc {
    color: #333333;
}

.about-pane {
    display: flex;
    gap: 12px;
    align-items: center;
}

.internet-pane ul {
    margin-top: 8px;
    margin-left: 18px;
}

/* Utility */
.window[style*="display: none"] {
    visibility: hidden;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .window {
        width: 90% !important;
        left: 5% !important;
    }
}