/* XP OS External Styling */
/* Start Menu Exact Replacements */
#start-menu {
    position: absolute; bottom: 30px; left: 0; width: 400px;
    background: #ffffff; border: 1px solid #0831d9; border-radius: 5px 5px 0 0;
    display: none; flex-direction: column; box-shadow: 2px -2px 10px rgba(0,0,0,0.5); z-index: 10000;
}
#start-menu.active { display: flex; }

.sm-header {
    background: linear-gradient(to right, #245edb 0%, #3a83f1 50%, #245edb 100%);
    color: white; padding: 6px 6px; font-weight: bold; font-size: 15px;
    display: flex; align-items: center; border-radius: 4px 4px 0 0;
    border-bottom: 2px solid #e27d14; /* Orange divider */
    box-shadow: inset 0 2px 2px rgba(255,255,255,0.4);
}
.sm-header img { width: 38px; height: 38px; border-radius: 2px; border: 2px solid rgba(255,255,255,0.8); margin-right: 10px; background: white; object-fit: cover; }

.sm-body { display: flex; flex-direction: row; height: 380px; }

.sm-left { width: 55%; background: white; padding: 5px; display: flex; flex-direction: column; overflow: visible; }
.sm-right { width: 45%; background: #d3e5fa; padding: 5px; display: flex; flex-direction: column; border-left: 1px solid #a6c6f7; }

.sm-item { padding: 8px 8px; display: flex; align-items: center; cursor: pointer; color: #333; text-decoration: none; border: 1px solid transparent; }
.sm-item:hover { background: #2f71cd; color: white; border: 1px solid #0a246a; }
.sm-item:hover small { color: #ddd; }

.sm-item-bold { font-weight: bold; font-size: 12px; }
.sm-item span { flex: 1; display: flex; flex-direction: column; }
.sm-item span small { color: #888; font-size: 10px; font-weight: normal; margin-top: 1px; }

.sm-item img { width: 32px; height: 32px; margin-right: 10px; }
.sm-item.sm-small-icon img { width: 22px; height: 22px; }

.sm-separator { height: 1px; background: linear-gradient(to right, transparent, rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.1) 90%, transparent); margin: 5px 10px; }
.sm-right-separator { height: 1px; background: #a2c1ed; margin: 5px 10px; }

.sm-all-programs { margin-top: auto; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 11px; padding: 8px; cursor: pointer; color: #333;}
.sm-all-programs img { width: 14px; margin-left: 5px; }
.sm-all-programs:hover { background: #2f71cd; color: white; }

.sm-footer {
    background: linear-gradient(to bottom, #4ca0fc 0%, #245edb 100%);
    padding: 8px; display: flex; justify-content: flex-end; align-items: center; gap: 15px;
    border-top: 1px solid rgba(255,255,255,0.3); color: white; font-size: 12px;
}
.sm-footer-btn { display: flex; align-items: center; cursor: pointer; border: 1px solid transparent; padding: 2px 4px; }
.sm-footer-btn:hover { background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.5); border-radius: 3px; }
.sm-footer-btn img { width: 22px; height: 22px; margin-right: 5px; border-radius: 2px; }

/* The About Me Window - MitchIvin Style */
.xp-app-toolbar {
    background: #ece9d8; display: flex; align-items: center; padding: 3px 6px; 
    border-bottom: 1px solid #d4d0c8; flex-wrap: wrap; gap: 2px;
}
.app-btn {
    display: flex; align-items: center; padding: 4px 8px; cursor: pointer; font-size: 11px; color: #000;
    border: 1px solid transparent;
}
.app-btn:hover { border: 1px solid rgba(0,0,0,0.2); box-shadow: inset 1px 1px 1px rgba(255,255,255,0.8), 1px 1px 2px rgba(0,0,0,0.1); background: rgba(255,255,255,0.5); }
.app-btn img { height: 32px; margin-right: 5px; }

.address-bar { display: flex; align-items: center; width: 100%; padding: 4px; border-bottom: 1px solid #d4d0c8; font-size: 11px; color: #555; background: #ece9d8; }
.address-input { flex-grow: 1; margin: 0 10px; background: white; border: 1px solid #7f9db9; padding: 2px 5px; display: flex; align-items: center;}
.address-input img { height: 14px; margin-right: 5px; }

.about-layout { display: flex; flex-direction: row-reverse; flex-grow: 1; background: white; overflow: hidden; min-height: 0; }
.about-left-pane { width: 230px; background: linear-gradient(to right, #748aff 0%, #4057d3 100%); padding: 10px; overflow-y: auto; flex-shrink: 0; border-right: 1px solid #334ab5; }
.about-panel { background: #eef3ff; border: 1px solid #fff; border-radius: 4px; margin-bottom: clamp(5px, 1.5vh, 15px); box-shadow: 1px 1px 4px rgba(0,0,0,0.4); overflow: hidden; }
.about-panel-header { background: linear-gradient(to right, #ffffff 0%, #c9d3e8 100%); padding: clamp(5px, 1vh, 10px) clamp(10px, 1vw, 15px); color: #0f246a; font-weight: bold; font-size: clamp(11px, 1.5vh, 13px); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #dcdcdc; cursor: pointer; }
.about-panel-header img { transition: transform 0.3s ease; }
.about-panel-header.collapsed img { transform: rotate(180deg); }
.about-panel-content { padding: clamp(6px, 1vh, 12px) clamp(10px, 1vw, 15px); background: #edf4fe; max-height: 1000px; transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), padding 0.3s ease-in-out; overflow: hidden; }
.about-panel-content.skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, 1vh, 12px) clamp(5px, 1vw, 20px); }
.about-panel-content.collapsed { max-height: 0; padding-top: 0; padding-bottom: 0; border: none; }
.about-panel-item { display: flex; align-items: center; font-size: clamp(10px, 1.3vh, 12px); color: #0b3383; margin-bottom: clamp(4px, 1vh, 8px); cursor: default; }
.skills-grid .about-panel-item { margin-bottom: 0; }
.about-panel-item[onclick] { cursor: pointer; }
.about-panel-item[onclick]:hover { text-decoration: underline; }
.about-panel-item img { width: clamp(14px, 1.8vh, 18px); height: clamp(14px, 1.8vh, 18px); margin-right: clamp(5px, 1vw, 10px); object-fit: contain; }

.about-right-pane { 
    flex-grow: 1; padding: clamp(10px, 2vh, 20px); overflow-y: auto; background: linear-gradient(to bottom right, #5c85e5, #4160c9); color: white; font-family: 'Verdana', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-shadow: none; font-smooth: always;
}
.about-right-pane h1 { font-family: 'Arial', sans-serif; font-size: clamp(20px, 3vh, 32px); font-weight: bold; margin-bottom: clamp(5px, 1.5vh, 20px); color: white; }
.about-text-block { display: flex; gap: clamp(10px, 2vh, 20px); margin-bottom: clamp(5px, 1.5vh, 25px); align-items: flex-start; }
.about-avatar { width: clamp(55px, 9vh, 80px); height: clamp(55px, 9vh, 80px); border-radius: 4px; filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.4)); flex-shrink: 0; position: relative; z-index: 1; margin: 0; object-fit: cover; }
.avatar-interactive-wrapper { position: relative; width: clamp(55px, 9vh, 80px); height: clamp(55px, 9vh, 80px); cursor: pointer; flex-shrink: 0; }
.avatar-scatter-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; }
.scatter-avatar { width: clamp(55px, 9vh, 80px); height: clamp(55px, 9vh, 80px); border-radius: 50%; position: absolute; top: 0; left: 0; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease; box-shadow: 2px 2px 8px rgba(0,0,0,0.5); object-fit: cover; }
.avatar-interactive-wrapper:hover .bubble-1 { transform: translate(-60px, -40px) scale(0.7); }
.avatar-interactive-wrapper:hover .bubble-2 { transform: translate(60px, -40px) scale(0.7); }
.avatar-interactive-wrapper:hover .bubble-3 { transform: translate(-70px, 40px) scale(0.7); }
.avatar-interactive-wrapper:hover .bubble-4 { transform: translate(70px, 40px) scale(0.7); }
.avatar-interactive-wrapper:hover .bubble-5 { transform: translate(0px, 70px) scale(0.7); }
.avatar-interactive-wrapper.dispersed .scatter-avatar { opacity: 0; pointer-events: none; }
.avatar-interactive-wrapper.dispersed .bubble-1 { transform: translate(-150px, -150px) scale(0); }
.avatar-interactive-wrapper.dispersed .bubble-2 { transform: translate(150px, -150px) scale(0); }
.avatar-interactive-wrapper.dispersed .bubble-3 { transform: translate(-150px, 150px) scale(0); }
.avatar-interactive-wrapper.dispersed .bubble-4 { transform: translate(150px, 150px) scale(0); }
.avatar-interactive-wrapper.dispersed .bubble-5 { transform: translate(0px, 200px) scale(0); }
.about-text-block p { font-size: clamp(12px, 1.7vh, 14.5px); line-height: clamp(1.35, 1.8vh, 1.6); margin-bottom: clamp(5px, 1.2vh, 15px); }

/* Resume Window */
.resume-bg { background: #d7d7d7; padding: 20px; overflow-y: auto; display: flex; justify-content: center; }
.resume-page { 
    background: white; width: 700px; padding: 40px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); color: black; font-family: 'Helvetica', sans-serif; 
}
.resume-header-name { font-size: 48px; font-weight: 900; letter-spacing: -1px; margin-bottom: 5px; text-transform: uppercase; color: #111; }
.resume-sub-title { font-size: 20px; font-family: 'Georgia', serif; font-style: italic; color: #333; margin-bottom: 20px; border-bottom: 1px solid #ccc; padding-bottom: 10px;}

.resume-content { display: flex; gap: 30px; }
.resume-left { width: 220px; background: #1a1a1a; color: white; padding: 20px 15px; border-radius: 8px; flex-shrink: 0; }
.resume-pfp { width: 100%; border-radius: 12px; border: 3px solid #28a745; margin-bottom: 15px; }

.resume-section-title { font-size: 14px; font-family: 'Georgia', serif; font-style: italic; color: #28a745; margin-bottom: 10px; border-bottom: 1px solid #444; padding-bottom: 5px;}
.resume-skill-item { font-size: 11px; margin-bottom: 6px; color: #ddd; }
.resume-info-item { display: flex; flex-direction: column; font-size: 11px; margin-bottom: 15px; }
.resume-info-item strong { color: #fff; margin-bottom: 2px; }

.resume-right { flex-grow: 1; padding-top: 10px; }
.resume-right p { font-size: 12px; line-height: 1.5; color: #444; margin-bottom: 15px; }

.resume-section-main-title { font-size: 18px; font-family: 'Georgia', serif; font-style: italic; color: #111; text-align: center; position: relative; margin-bottom: 15px; }
.resume-section-main-title::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid #ccc; z-index: 0; }
.resume-section-main-title span { background: white; padding: 0 10px; position: relative; z-index: 1; }

.exp-block { margin-bottom: 20px; }
.exp-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.exp-title { font-weight: bold; font-size: 14px; color: #111; }
.exp-date { font-size: 11px; color: #666; }
.exp-company { font-size: 11px; color: #888; margin-bottom: 5px; }
.exp-bullets { list-style-type: disc; padding-left: 20px; font-size: 11px; line-height: 1.6; color: #444; }
.exp-bullets li { margin-bottom: 5px; }

.skills-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; font-size: 11px; color: #444; margin-bottom: 20px;}
.skills-grid span::before { content: "• "; color: #111; }

.edu-block { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.edu-block .edu-course { font-weight: bold; font-size: 12px; }
.edu-block .edu-school { font-size: 11px; color: #666; }

.menu-classic { background: #ece9d8; padding: 2px 5px; font-size: 12px; border-bottom: 1px solid #d4d0c8; display: flex; gap: 15px; color: #000; }
.menu-classic span:hover { background: #316be3; color: white; cursor: default;}

.category-folder { transition: transform 0.2s ease, opacity 0.5s ease; }
.category-folder:hover { transform: scale(1.05); }

.explorer-content {
    background: white;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 20px;
    align-content: flex-start;
    overflow-y: auto;
}

.explorer-content .icon {
    width: 90px;
    height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 5px;
}

.explorer-content .icon:hover {
    background-color: rgba(11, 97, 255, 0.1);
    border: 1px solid rgba(11, 97, 255, 0.3);
}

.explorer-content .icon img {
    width: 48px;
    height: 48px;
    margin-bottom: 5px;
}

.explorer-content .icon span {
    font-size: 11px;
    color: #000;
    text-align: center;
    word-break: break-word;
}

@media (max-width: 768px) {
    .about-layout {
        flex-direction: column;
        overflow-y: auto;
    }
    .about-left-pane {
        width: 100%;
        border-right: none;
        border-top: 1px solid #334ab5;
        overflow-y: visible;
    }
    .about-right-pane {
        width: 100%;
        overflow-y: visible;
    }
}