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


body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #1e1e1e;
    color: #d4d4d4;
    line-height: 1.5;
    height: 100vh;
    background-image: url('../img/fdwin11.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    transition: background-image 0.8s ease;
}

::-webkit-scrollbar {
    display: none;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}


#loader-container {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: transparent;
    backdrop-filter: blur(20px);
    transition: backdrop-filter 0.5s ease-out;
    z-index: 9999;
}

.loader {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid #333;
    border-top-color: #fff;
    animation: loader 1s linear infinite;
}


.container {
    position: relative;
    width: 1000px;
    max-width: 100vw;
    height: 650px;
    max-height: calc(100vh - 60px);
    background-color: #1e1e1e;
    border: 1px solid #404040;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1;
    container-type: inline-size;
    container-name: vscode-window;
}


.title-bar {
    background-color: #333333;
    height: 35px;
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: flex-start;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    cursor: grab;
    padding: 0 0 0 10px;
}

.title-bar:active {
    cursor: grabbing;
}

.title-bar .nav-arrows,
.title-bar .action-icons {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #919191;
}

.title-bar .search-container {
    flex-grow: 1; 
    flex-shrink: 1; 
    max-width: 500px;
    min-width: 150px; 
    overflow: hidden;   
    height: 28px;
    background-color: #3c3c3c;
    border-radius: 5px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: #d4d4d4;
    font-size: 14px;
    margin: 0; 
}

.title-bar .search-container span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.title-bar .search-container i {
    margin-right: 8px;
    color: #919191;
}

.title-bar-controls {
    margin-left: auto; 
}
.logo {
    display: flex;
    align-items: center;
}

.logo img {
    width: 22px;
    height: 22px;
    margin-left: 5px;
}

.title-bar-menu ul {
    display: flex;
    list-style: none;
    margin-left: 15px;
}

.title-bar-menu ul li {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: default;
    transition: background-color 0.2s ease;
}

.title-bar-menu ul li:hover {
    background-color: #444;
}

.title-bar-text {
    color: #d4d4d4;
    font-size: 13px;
    flex-grow: 1;
    text-align: center;
    padding: 0 20px;
}

.title-bar-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 140px;
    height: 100%;
    margin-left: auto;
}

.title-bar-controls button {
    width: 100%;
    height: 100%;
    font-size: 16px;
    border: none;
    cursor: pointer;
    background-color: transparent;
}

.title-bar-controls .minimize-button:hover,
.title-bar-controls .maximize-button:hover {
    background-color: #444;
}

.title-bar-controls .close-button:hover {
    background-color: #e81123;
}
.title-bar-controls .close-button:hover i {
    color: #ffffff;
}

.minimize-button,
.maximize-button {
    color: #cccccc;
}

.close-button i {
    color: #cccccc;
    font-size: 18px;
}

.menu-bar {
    background-color: #2b2b2b;
    box-shadow: 0 15px 10px -15px rgba(0, 0, 0, 0.3);
    position: absolute;
    display: flex;
    align-items: center;
    height: 45px;
    top: 35px; 
    left: 170px;
    right: 0;
}

.menu-bar ul {
    list-style-type: none;
    display: flex;
    align-items: center;
}

.menu-bar ul img {
    width: 16px;
    height: 16px;
    margin-right: 8px;
}

.menu-bar ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d4d4d4;
    font-size: 14px;
    width: 126px;
    padding: 12px 0;
}

.menu-bar a.active {
    box-shadow: 0 1px 0 0 #54BDF1;
    background-color: #1e1e1e;
}

.menu-bar ul li a:hover {
    background-color: #444;
}

.content {
    font-family: 'Victor Mono', monospace;
    position: absolute;
    top: 80px; 
    bottom: 22px;
    left: 170px;
    right: 0;
    padding: 0px 20px 0 80px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

.content section:not(.contact) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 100%;
    padding: 20px 0;
}

.title { padding: 10px 0; margin-bottom: 10px; width: 100%; }
.title .vscode-title { color: #ffffff; font-size: 20px; font-family: 'Victor Mono', monospace; }
.title .vscode-tag, .title .vscode-tog { color: #569cd6; font-size: 20px; font-family: 'Victor Mono', monospace; }
.title .vscode-tag:before { content: "<"; color: #a4a4a4; }
.title .vscode-tog:before { content: "</"; color: #a4a4a4; }
.title .vscode-tag:after, .title .vscode-tog:after { content: ">"; color: #a4a4a4; }
.para { padding: 10px 0; margin-bottom: 20px; width: 100%; }
.para .vscode-para { color: #d7d7d7; font-size: 16px; font-family: 'Victor Mono', monospace; }
.para .vscode-tag, .para .vscode-tog { color: #569cd6; font-size: 16px; font-family: 'Victor Mono', monospace; }
.para .vscode-tag:before { content: "<"; color: #a4a4a4; }
.para .vscode-tog:before { content: "</"; color: #a4a4a4; }
.para .vscode-tag:after, .para .vscode-tog:after { content: ">"; color: #a4a4a4; }
.projects .vscode-com { margin-bottom: 20px; }
.vscode-com { color: #6a9955; font-style: italic; }
.vscode-com::before { content: ""; }
.home { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: auto; }
.checkbox { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; }
.checkbox input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 17px; height: 17px; border: 1px solid #7a7a7a; background-color: #343434; color: #fff; border-radius: 2px; margin-right: 8px; position: relative; outline: none; cursor: pointer; transition: all 0.2s ease-out; }
.checkbox input[type="checkbox"]:checked::before { content: "✔"; position: absolute; top: -4px; left: 1px; font-size: 16px; color: #fff; }
.checkbox label { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #d4d4d4; font-size: 14px; }
.about p { margin-bottom: 20px; }
.about a { color: #569cd6; font-weight: bold; }
.containerSkills {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    grid-gap: 25px;
}

.skills-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    border: 1px solid #2b2b2b;
    border-radius: 5px;
    padding: 20px;
    transition: all 0.3s ease;
    height: 100%;
}
.skills-list:hover { background-color: #2b2b2b; }
.skills-list:hover h3 { color: #007ACC; }
.skills-list h3 { color: #d4d4d4; font-size: 18px; }
.skills-list ul li {
    font-size: 14px;
    display: flex;       
    align-items: center; 
    gap: 10px;           
    margin-bottom: 12px; 
}

.skill-icon {
    font-size: 1.4rem;
}
.projects-container { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; }
.project { border: 1px solid #2b2b2b; max-width: 600px; border-radius: 5px; overflow: hidden; transition: all 0.3s ease; }
.project:hover { background-color: #2b2b2b; }
.img-container { overflow: hidden; width: 100%; height: 200px; border-radius: 5px 5px 0 0; }
.projectImg { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: scale 0.3s ease; }
.projectImg:hover { scale: 1.1; }
.project-content { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 20px; }
.project-content a { color: #569cd6; font-weight: bold; }
.projectsSkills { display: flex; align-items: center; margin: 10px 0; }
.projectsSkills img { width: 35px; height: 35px; margin-right: 15px; }
.projects li { margin-bottom: 10px; }
.contact { padding: 20px 0; }
.vscode-form { display: flex; flex-direction: column; }
.contact .form-field { margin-bottom: 20px; }
.contact label { color: #d4d4d4; font-size: 14px; margin-bottom: 5px; }
.contact input[type="text"], .contact input[type="email"], .contact textarea { font-family: 'Victor Mono', monospace; background-color: #2d2d2d; border: none; color: #d4d4d4; padding: 10px; border-radius: 4px; width: 100%; transition: box-shadow 0.3s ease-out; }
.contact textarea { height: 150px; resize: none; }
.contact input[type="text"]:focus, .contact input[type="email"]:focus, .contact textarea:focus { outline: none; box-shadow: 0 0 0 2px #007ACC; }
#successMessage { display: none; color: #00ff00; font-size: 14px; margin: 10px 0; }
#errorMessage { display: none; color: #ff0000; font-size: 14px; margin: 10px 0; }
.vscode-button { display: flex; align-items: center; justify-content: center; font-family: 'Victor Mono', monospace; background-color: #007ACC; color: #fff; border: none; padding: 10px 20px; letter-spacing: 1.2px; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; }
.vscode-button:hover { background-color: #026fb9; }
.loaderBtn { display: none; width: 15px; height: 15px; border: 2px solid #fff; border-top: 2px solid transparent; border-radius: 50%; animation: loader 0.6s linear infinite; margin-right: 10px; }
@keyframes loader { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.loading .loaderBtn { display: block; }
.loading #btnMail { pointer-events: none; opacity: 0.6; }

.sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 50px;
    background-color: #2b2b2b;
    color: #d4d4d4;
    padding: 15px 5px;
    position: absolute;
    top: 35px;
    left: 0px;
    bottom: 22px;
}

.sidebar-item { display: flex; flex-direction: column; align-items: center; justify-content: space-between; cursor: pointer; }
.top-items .sidebar-item { margin-bottom: 22px; }
.bottom-items .sidebar-item { margin-top: 22px; }
.sidebar-icon { display: inline-block; }
.sidebar-icon i { font-size: 26px; color: #919191; transition: color 0.3s ease; }
.sidebar-icon i:hover { color: #bcbcbc; }
.theme-modal { display: none; position: absolute; bottom: 15px; left: 50px; width: 200px; background-color: #252526; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 14px; border-radius: 3px; border: 1px solid #3c3c3c; padding: 5px; user-select: none; box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3); z-index: 100; }
.theme-vscode-name { display: flex; align-items: center; justify-content: space-between; padding: 8px 15px; color: #d4d4d4; cursor: pointer; }
.theme-vscode-name:hover { background-color: #00365d; color: #ffffff; border-radius: 5px; }
.theme-modal.active { display: block; }

aside.explorer {
    width: 120px;
    background-color: #252526;
    color: #d4d4d4;
    padding: 10px 0;
    position: absolute;
    top: 35px; 
    left: 50px;
    bottom: 22px;
}

.explorer-header { font-size: 12px; color: #b8b8b8; text-transform: uppercase; margin-bottom: 10px; padding: 0 18px; }
.explorer-content { overflow-y: auto; }
.toggle-chevron { display: flex; align-items: center; justify-content: flex-start; cursor: pointer; font-size: 14px; font-weight: bold; margin-bottom: 5px; }
.toggle-chevron svg { width: 18px; height: 15px; transition: transform 0.3s; }
.file-list { line-height: 1.2; list-style: none; padding: 0; margin: 0; max-height: 0; overflow: hidden; transition: max-height 0.1s; }
.explorer-content.show .file-list { max-height: 500px; }
.explorer-content.show .toggle-chevron svg { transform: rotate(90deg); }
.file-list li { display: flex; align-items: center; cursor: pointer; }
.file-list li a { font-size: 14px; padding: 5px 10px; letter-spacing: 0.1px; display: flex; align-items: center; color: #d4d4d4; text-decoration: none; width: 100%; }
.file-list li:hover, .file-list li a.active { background-color: #4e4e4e46; }
.file-icon { display: flex; align-items: center; }
.file-icon img { display: inline-block; width: 16px; height: 16px; margin-right: 5px; }

footer {
    background-color: #007ACC;
    height: 22px;
    padding: 0 3px 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.status-bar { display: flex; }
.status-bar-section { color: #d4d4d4; font-size: 13px; margin-right: 10px; padding: 0 5px; cursor: pointer; }
.status-bar .status-bar-section:hover { background-color: #ffffff1f; }
.warning-status { display: flex; cursor: pointer; }
.warning-status:hover { background-color: #ffffff1f; }
.warning-status .status-bar-section { color: #d4d4d4; font-size: 13px; margin-right: 0; padding: 0 5px; cursor: pointer; }

.code-column { position: absolute; left: 0; top: 0; width: 60px; font-family: 'Victor Mono', monospace; font-size: 15px; letter-spacing: -0.5px; line-height: 1.4; padding: 0 20px 0 15px; background-color: transparent; border-right: 1px solid #78787855; }
.code-column ol { list-style: none; counter-reset: line-numbering; }
.code-column li { counter-increment: line-numbering; }
.code-column li::before { content: counter(line-numbering); color: #888888; }

.taskbar { position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; display: flex; align-items: center; justify-content: space-between; background-color: #1e1f1ff5; backdrop-filter: blur(10px); border-top: 1px solid #333; color: #fff; padding: 0 20px; z-index: 2; }
.left-section { display: flex; align-items: center; padding: 8px 20px 8px 8px; cursor: pointer; transition: all 0.3s ease; }
.left-section:hover { background-color: #333333; border-radius: 5px; }
.weather-info { display: flex; align-items: start; justify-content: center; flex-direction: column; margin-left: 3px; font-size: 12px; }
.weather-info .description { text-transform: capitalize; opacity: 0.7; }
.weather-icon { display: flex; align-items: center; justify-content: center; margin-right: 5px; }
.weather-icon img { width: 30px; height: 30px; }
.menu { display: flex; align-items: center; justify-content: center; height: 100%; width: 500px; }
.menu img { width: 50px; height: 50px; padding: 10px; cursor: pointer; transition: all 0.3s ease; }
.menu img:hover, .logo-vscode:hover, .logo-vscode.active { background-color: #333333d4; border-radius: 5px; }
.logo-vscode img { width: 50px; height: 50px; padding: 10px; cursor: pointer; transition: all 0.3s ease; }
.logo-vscode { position: relative; display: inline-block; width: 50px; height: 50px; margin-left: 10px; transition: all 0.3s ease; }
.logo-vscode::after { content: ''; display: var(--after-display, block); position: absolute; width: 6px; height: 3px; background: #c4c4c4ae; top: 90%; left: 50%; transform: translate(-50%, -50%); z-index: 1; transition: all 0.3s ease; }
.logo-vscode.active::after { width: 15px; background: #54BDF1; }
.search-bar { display: flex; align-items: center; background-color: #323232; border-radius: 25px; padding: 10px 15px; margin-left: 10px; }
.search-bar input { background-color: transparent; border: none; color: #fff; font-size: 14px; width: 200px; outline: none; }
.search-bar input::placeholder { color: #ffffffaa; }
.search-bar i { color: #ffffffaa; margin-right: 10px; }
.right-section { display: flex; align-items: center; justify-content: flex-end; padding: 8px 10px 8px 10px; cursor: default; }
.right-section:hover { background-color: #333333; border-radius: 5px; }
.date-time { display: flex; flex-direction: column; align-items: flex-end; }
.date, .time { font-size: 12px; color: #c1c1c1; }

.all-widgets { position: absolute; display: flex; flex-direction: column; gap: 10px; bottom: 70px; right: -300px; width: 300px; transition: right 0.2s ease-in-out; z-index: 1000; }
.all-widgets.active { right: 10px; }
.widget { background-color: #27282Df5; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 10px; border: 1px solid #444; overflow-y: auto; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
.widget h3 { background-color: #212227; color: #fff; padding: 10px 15px; font-size: 14px; font-weight: 400; }
.widget ul { height: 150px; }
.widget ul li { display: flex; align-items: center; justify-content: center; font-size: 12px; height: 100%; }
#notification-widget { top: 32%; height: 190px; }
#calendar-widget { height: 380px; top: 53%; }
#calendar-widget table { width: 100%; border-collapse: collapse; }
#calendar-widget table th, #calendar-widget table td { padding: 5px; text-align: center; }
#calendar-widget table th { background-color: transparent; color: #fff; font-size: 11px; }
#calendar-widget table td { border: none; height: auto; font-size: 14px; }
#calendar-widget table td.fc-day-today { background-color: #C0BDDF; border-radius: 50%; color: #212227; }
#calendar-widget table td.fc-day-today:hover { background-color: #c0bddfda; }
.fc .fc-daygrid-day-top { display: flex; flex-direction: row-reverse; justify-content: center; }
#calendar-widget table td.fc-day:hover { background-color: #ffffff1f; border-radius: 50%; cursor: default; }
.fc .fc-toolbar.fc-header-toolbar { margin-bottom: 0; padding: 5px }
.fc-theme-standard td, .fc-theme-standard th, .fc-theme-standard .fc-scrollgrid { border: none; }
.fc .fc-toolbar-title { font-size: 14px; font-weight: 600; color: #fff; padding: 0 10px; }
.fc .fc-button .fc-icon { color: #b8b8b8; font-size: 14px; }
.fc .fc-daygrid-body-natural .fc-daygrid-day-events { display: none; }
.fc .fc-button-primary { background-color: transparent; border: none; border-radius: 50%; }
.fc .fc-button-primary:hover { background-color: #ffffff1f; border-radius: 50%; }
.fc .fc-button-primary:disabled { display: none; }
.taskbar-app-icon {
    position: relative;
    display: inline-block;
    width: 50px; 
    height: 50px;
    margin-left: 10px; 
    transition: all 0.3s ease;
}

.taskbar-app-icon img {
    width: 50px; 
    height: 50px; 
    padding: 10px; 
    cursor: pointer;
    transition: all 0.3s ease;
}

.taskbar-app-icon:hover {
    background-color: #333333d4;
    border-radius: 5px;
}

.taskbar-app-icon::after {
    content: '';
    display: block;
    position: absolute;
    width: 6px;
    height: 3px;
    background: #c4c4c4ae;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.taskbar-app-icon.active::after {
    width: 15px;
    background: #54BDF1;
}
@keyframes like { 0% { background-position: 0 0; } 100% { background-position: right; } }
#desktopGame { position: fixed; bottom: 60px; left: 10px; display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 5px; }
.icon { color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 5px; cursor: pointer; width: 90px; padding: 10px; transition: all 0.1s ease; }
.icon:hover { background-color: rgba(255, 255, 255, 0.1); }
.icon img { width: 50px; }
.icon-label { font-size: 14px; font-weight: 100; text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000; margin-top: 5px; }
#game-container { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1.0); border: none; width: 80%; height: 80%; border-radius: 10px; box-shadow: 0 0 20px rgba(41, 41, 41, 0.746); z-index: 1000; }
#game-iframe { width: 100%; height: 100%; border: none; border-radius: 10px; }
#close-button-game { position: absolute; top: 20px; right: 20px; background-color: transparent; color: red; font-size: 30px; border: none; cursor: pointer; }
.modalBg { display: none; position: fixed; top: 0; left: 0; width: 280px; height: auto; }
.modal-content-bg { background-color: rgba(37, 49, 63, 0.73); backdrop-filter: blur(10px); width: 100%; padding: 8px 5px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.context-menu-item { display: block; padding: 8px 16px; font-size: 14px; border-radius: 5px; color: #fff; cursor: pointer; user-select: none; transition: background-color 0.3s; }
.context-menu-item i { margin-right: 10px; }
.context-menu-item:hover { background-color: rgba(255, 255, 255, 0.084); }


.container.light .title-bar-controls button,
.container.light .title-bar-controls button i {
    color: #333333; 
}

.container.light .title-bar-controls .minimize-button:hover,
.container.light .title-bar-controls .maximize-button:hover {
    background-color: #bababac6;
}

.container.light .title-bar-controls .close-button:hover {
    background-color: #e81123; 
}

.container.light .title-bar-controls .close-button:hover i {
    color: #ffffff; 
}

.container.light { background-color: #ffffff; border: none; }
.container.light .title-bar { background-color: #e1e1e1; }
.container.light .title-bar .title-bar-text { color: #000000; }
.container.light .title-bar .title-bar-controls button:hover { background-color: #bababac6; }
.container.light .menu-bar { background-color: #e9e9e9; }
.container.light .menu-bar ul li a { color: #c1c1c1; }
.container.light .menu-bar ul li a:hover { background-color: #6583d61f; }
.container.light .menu-bar a.active { background-color: #ffffff; color: #000000; }
.container.light .sidebar { background-color: #d3d3d3; }
.container.light aside.explorer { background-color: #e6e6e6; }
.container.light .explorer-header { color: #888888; }
.container.light .toggle-chevron { color: #888888; }
.container.light .toggle-chevron svg #F-Chevron polyline { stroke: #888888; }
.container.light .file-list li a { color: #c1c1c1; }
.container.light .file-list li:hover, .container.light .file-list li a.active { background-color: #6583d61f; color: #000000; }
.container.light .title .vscode-title { color: #000000; }
.container.light .para .vscode-para { color: #7b7b7b; }
.container.light .checkbox label { color: #000000; }
.container.light .checkbox input[type="checkbox"] { background-color: #ffffff; }
.container.light .checkbox input[type="checkbox"]:checked::before { color: #000000; }
.container.light p { color: #7b7b7b; }
.container.light .about a { color: #008597; }
.container.light .skills-list { border: 1px solid #e6e6e6; }
.container.light .skills-list:hover { background-color: #e6e6e6; }
.container.light .skills-list:hover h3 { color: #008597; }
.container.light .skills-list h3 { color: #000000aa; }
.container.light .skills-list li { color: #7b7b7b; }
.container.light .project { border: 1px solid #e6e6e6; }
.container.light .project:hover { background-color: #e6e6e6; }
.container.light .project-content a { color: #008597; }
.container.light .contact label { color: #000000; }
.container.light .contact input[type="text"], .container.light .contact input[type="email"], .container.light .contact textarea { background-color: #e6e6e6; color: #000000; }
.container.light .code-column li::before { color: #008597; }
.container.light .theme-modal { background-color: #f1f1f1; border: 1px solid #e6e6e6; box-shadow: 0 0 15px 5px rgba(140, 140, 140, 0.3); }
.container.light .theme-vscode-name { color: #5f5f5f; }
.container.light .theme-vscode-name:hover { background-color: #1277c5; color: #f1f1f1; }
.container.light .title-bar-menu ul li { color: #333333; }
.container.light .title-bar-menu ul li:hover { background-color: #bababac6; }
.container.light .home-text .greeting {
    color: #52525b; 
}
.container.light .home-text h1 {
    color: #000000; 
}
.container.light .home-text .description {
    color: #52525b; 
}
.container.light .home-text .contact-info {
    color: #3f3f46; 
}
.container.light .home-text .contact-info i {
    color: #52525b; 
}
.container.light .home-photo img {
    border: 3px solid #e1e1e1;
}


.container.dracula .title-bar-controls button,
.container.dracula .title-bar-controls button i {
    color: #f8f8f2; 
}

.container.dracula .title-bar-controls .minimize-button:hover,
.container.dracula .title-bar-controls .maximize-button:hover {
    background-color: #44475a; 
}

.container.dracula .title-bar-controls .close-button:hover {
    background-color: #e81123; 
}

.container.dracula .title-bar-controls .close-button:hover i {
    color: #f8f8f2;
}

.container.dracula { background-color: #282a36; }
.container.dracula a { color: #ff79c6; }
.container.dracula .title-bar { background-color: #262330; }
.container.dracula .title-bar .title-bar-text { color: #f8f8f2; }
.container.dracula .title-bar .title-bar-controls button:hover { background-color: #44475ac6; }
.container.dracula .menu-bar { background-color: #1e1f27; }
.container.dracula .menu-bar ul li a { color: #6272a4; }
.container.dracula .menu-bar ul li a:hover { background-color: #44475a79; }
.container.dracula .menu-bar a.active { background-color: #282a36; color: #f8f8f2; box-shadow: inset 0 -1px 0 0 #ff79c6; }
.container.dracula .sidebar { background-color: #434657c7; }
.container.dracula .sidebar-icon i { color: #6272a4; }
.container.dracula .sidebar-icon i:hover { color: #ffffff; }
.container.dracula aside.explorer { background-color: #262330; }
.container.dracula .explorer-header { color: #ffffff; }
.container.dracula .toggle-chevron { color: #ffffff; }
.container.dracula .file-list li a { color: #ffffff; }
.container.dracula .file-list li:hover, .container.dracula .file-list li a.active { background-color: #44475a79; color: #f8f8f2; }
.container.dracula .title .vscode-title { color: #f8f8f2; }
.container.dracula .checkbox #showHomePage { background-color: #44475a79; border: 1px solid #1b1922; }
.container.dracula .vscode-tag, .container.dracula .vscode-tog { color: #ff79c6; }
.container.dracula .vscode-tag::before, .container.dracula .vscode-tog::before, .container.dracula .vscode-tag::after, .container.dracula .vscode-tog::after { color: #ffffff; }
.container.dracula .para .vscode-para { color: #ffffff; }
.container.dracula .vscode-com, .container.dracula .code-column li::before { color: #6272a4; }
.container.dracula .about a { color: #ff79c6; }
.container.dracula .skills-list { border: 1px solid #44475a79; }
.container.dracula .skills-list:hover { background-color: #44475a79; }
.container.dracula .skills-list:hover h3 { color: #ff79c6; }
.container.dracula .project { border: 1px solid #44475a79; }
.container.dracula .project:hover { background-color: #44475a79; }
.container.dracula .contact label { color: #ffffff; }
.container.dracula .contact input[type="text"], .container.dracula .contact input[type="email"], .container.dracula .contact textarea { background-color: #44475a; color: #ffffff; }
.container.dracula .contact input[type="text"]:focus, .container.dracula .contact input[type="email"]:focus, .container.dracula .contact textarea:focus { box-shadow: 0 0 5px 1px #ff79c6; }
.container.dracula .vscode-button { background-color: #6272a4; color: #ffffff; }
.container.dracula .vscode-button:hover { background-color: #57658f; }
.container.dracula .theme-modal { background-color: #44475a; border: 1px solid #44475a; box-shadow: 0 0 15px 5px rgba(29, 29, 29, 0.3); }
.container.dracula .theme-vscode-name { color: #f8f8f2; }
.container.dracula .theme-vscode-name:hover { background-color: #6266a191; }
.container.dracula footer { background-color: #1b1922; }
.container.dracula .title-bar-menu ul li { color: #f8f8f2; }
.container.dracula .title-bar-menu ul li:hover { background-color: #44475ac6; }




.home-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    width: 100%;
    padding: 40px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}

.home-text {
    max-width: 500px;
}

.home-text .greeting {
    font-size: 18px;
    color: #d4d4d4;
    margin-bottom: 8px;
}

.home-text h1 {
    font-size: 48px;
    line-height: 1.1;
    color: #ffffff;
    margin-bottom: 16px;
}

.home-text h1 .highlight {
    color: #026fb9; 
}

.home-text h1 .typed-cursor {
    color: #026fb9;
}

.home-text .description {
    font-size: 16px;
    color: #a1a1aa; 
    margin-bottom: 30px;
}

.home-text .cta-button {
    display: inline-block;
    background-color: #026fb9;
    color: #ffffff;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-text .cta-button i {
    margin-left: 8px;
}

.home-text .cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(21, 196, 250, 0.2);
}

.home-text .contact-info {
    margin-top: 40px;
    display: flex;
    gap: 30px;
    font-size: 14px;
    color: #d4d4d4;
}

.home-text .contact-info span {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.home-text .contact-info i {
    margin-right: 8px;
    color: #a1a1aa;
}

.home-photo {
    width: 280px;
    height: 280px;
    position: relative;
    border-radius: 50%;
    overflow: hidden;
    align-self: center;  
    flex-shrink: 0;   
}

.home-photo img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    object-fit: cover;     
    border: 3px solid #404040;
}




.contact {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.content section.contact {
    min-height: auto;
}

.contact-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 40px 20px;
}

.contact-pre-heading {
    font-size: 16px;
    color: #a1a1aa;
    margin-bottom: 8px;
}

.contact-container h2 {
    font-size: 42px;
    color: #ffffff;
    margin-bottom: 16px;
}

.contact-description {
    font-size: 18px;
    color: #a1a1aa;
    margin-bottom: 30px;
}

.email-button {
    background-color: #4f46e5; 
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    padding: 14px 28px;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.email-button:hover {
    background-color: #4338ca;
    transform: translateY(-2px);
}

.contact-divider {
    width: 100%;
    border: none;
    height: 1px;
    background-color: #404040;
    margin: 50px 0;
}

.social-links h3 {
    font-size: 14px;
    color: #a1a1aa;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.social-links ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.social-links ul li a {
    color: #d4d4d4;
    text-decoration: none;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: color 0.2s ease;
}

.social-links ul li a:hover {
    color: #ffffff;
}



.container.light .contact-container h2 {
    color: #000000;
}
.container.light .contact-description,
.container.light .contact-pre-heading,
.container.light .social-links h3 {
    color: #52525b;
}
.container.light .social-links ul li a {
    color: #3f3f46;
}
.container.light .social-links ul li a:hover {
    color: #000000;
}
.container.light .home-text h1 .highlight,
.container.light .home-text h1 .typed-cursor {
    color: #007ACC; 
}

.container.dracula .contact-container h2 {
    color: #f8f8f2;
}
.container.dracula .contact-description,
.container.dracula .contact-pre-heading,
.container.dracula .social-links h3 {
    color: #bd93f9;
}
.container.dracula .social-links ul li a {
    color: #f8f8f2;
}
.container.dracula .social-links ul li a:hover {
    color: #bd93f9;
}
.container.dracula .home-text h1 .highlight,
.container.dracula .home-text h1 .typed-cursor {
    color: #bd93f9; 
}

.title-bar-menu {
    flex-shrink: 1; 
    overflow: hidden; 
}

.title-bar-menu ul {
    display: flex;
    flex-wrap: nowrap; 
}


.menu-item-optional {
    display: none;
}
.menu-item-ellipsis {
    display: list-item;
}


@container vscode-window (min-width: 1100px) { 
    .menu-item-optional {
        display: list-item;
    }
    .menu-item-ellipsis {
        display: none;
    }
}


.container.light .title-bar .search-container {
    background-color: #f3f3f3;
    border: 1px solid #cccccc;
    color: #333333;
}

.container.light .title-bar .search-container i {
    color: #666666;
}

.container.dracula .title-bar .search-container {
    background-color: #44475a;
    border: 1px solid #1b1922;
    color: #f8f8f2;
}

.container.dracula .title-bar .search-container i {
    color: #6272a4;
}

.container.light footer {
    background-color: #f0f0f0;
    border-top: 1px solid #e1e1e1;
}

.container.light footer .status-bar-section,
.container.light footer .warning-status .status-bar-section {
    color: #333333;
}

.container.light footer .status-bar-section:hover,
.container.light footer .warning-status:hover {
    background-color: #0000001a;
}

.container.light .home-text .cta-button,
.container.light .email-button {
    color: #1e1e1e; 
}

.container.dracula .home-text .cta-button {
    background-color: #bd93f9; 
    color: #f8f8f2;           
}
.container.dracula .home-text .cta-button:hover {
    background-color: #aa87e4; 
}

.container.dracula .email-button {
    background-color: #ff79c6; 
    color: #f8f8f2;           
}
.container.dracula .email-button:hover {
    background-color: #e66fb5; 
}


.theme-preview {
    width: 32px;  
    height: 20px; 
    border-radius: 4px;
    display: inline-block;
    background-image: linear-gradient(to right, 
        var(--preview-sidebar) 0%, 
        var(--preview-sidebar) 30%, 
        var(--preview-editor) 30%, 
        var(--preview-editor) 100%
    );
    border: 1px solid var(--preview-border);
}

.theme-vscode-name.light .theme-preview {
    --preview-sidebar: #e6e6e6;  
    --preview-editor: #ffffff;   
    --preview-border: #cccccc;
}

.theme-vscode-name.dark .theme-preview {
    --preview-sidebar: #2b2b2b; 
    --preview-editor: #1e1e1e;   
    --preview-border: #404040;
}

.theme-vscode-name.dracula .theme-preview {
    --preview-sidebar: #262330;  
    --preview-editor: #282a36;   
    --preview-border: #1b1922;
}