/* ===========================================================
   ABOUT WINDOW
   Draggable "About Me" popup opened from the About Me desktop icon.
   Previously an inline <style> block inside index.html.
   =========================================================== */

/* Windows 98 style window */
.win98-window {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    max-width: 90vw;
    z-index: 60;
    font-family: "MS Sans Serif", Tahoma, Verdana, sans-serif
}

.win98-frame {
    background: #c0c0c0;
    padding: 2px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #404040;
    border-right: 2px solid #404040
}

.win98-titlebar {
    background: #000084;
    color: #fff;
    padding: 4px 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    font-size: 13px
}

.win98-titlebar.inactive {
    background: #c0c0c0;
    color: #000
}

.win98-controls {
    display: flex;
    gap: 6px;
    align-items: center
}

.win98-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block
}

.win98-client {
    background: #fff;
    padding: 10px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #808080;
    border-right: 2px solid #808080
}

/* 3D buttons */
.win98-btn {
    background: #c0c0c0;
    padding: 4px 8px;
    border-top: 2px solid #fff;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #404040;
    border-right: 2px solid #404040;
    cursor: pointer;
    font-weight: bold
}

.win98-btn:active {
    border-top: 2px solid #404040;
    border-left: 2px solid #404040;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff
}

.win98-close {
    width: 34px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px solid #808080;
    border-right: 2px solid #808080
}

.about-avatar {
    width: 92px;
    height: 92px;
    background: #00008b;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border: 2px solid #000;
    background-image: url(/images/about\ me.gif);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.about-name {
    margin: 0;
    font-size: 16px
}

.about-role {
    margin: 6px 0 0;
    color: #000;
    font-size: 13px
}

.about-section {
    margin-top: 10px
}

.about-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px
}