/*-----------------------------------*\
#FONT IMPORTED LINK
\*-----------------------------------*/

@import"https://fonts.googleapis.com/css2?family=Georama:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap";

@import url('https://fonts.googleapis.com/css2?family=Yuyu+Short&display=swap');

/*-----------------------------------*\
#CUSTOM PROPERTY
\*-----------------------------------*/

:root {

    --background:#f5f5f7;
    --text:#111;
    --icon-color:#111;

    --window-header: rgb(251 249 250);
    --window-header-border: rgb(235 230 231);

    --list-item-bg: rgb(219 234 254);
    --list-item-hover: rgb(20 71 230);

    /* FONT: */
    --font-georama: "Georama", sans-serif;
    --font-roboto: "Roboto Mono", monospace;

    /* window sizing */
    --container-xs: 20rem;
    --container-md: 28rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
}

/*-----------------------------------*\
#LIGHT/DARK THEME
\*-----------------------------------*/

html[data-theme="light"] {
    --background:#f5f5f7;
    --text:#111;
    --icon-color:#111;

    --window-header: rgb(251 249 250);
    --window-header-border: rgb(235 230 231);

    --list-item-bg: rgb(219 234 254);
    --list-item-hover: rgb(20 71 230);
}

html[data-theme="dark"] {
    --background:#111;
    --text:#fff;
    --icon-color:#fff;

    --window-header: rgb(50 50 50);
    --window-header-border: rgb(30 30 30 / 80%);;

    --list-item-bg: rgb(255 255 255 / 10%);
    --list-item-hover: rgb(255 255 255);
}

html[data-theme="dark"] .apple-icon img,
html[data-theme="dark"] .desktop-icons li img:not(.siri),
html[data-theme="dark"] .status-bar img,
html[data-theme="dark"] .battery-life img { filter: brightness(0) invert(1); }

html[data-theme="light"] .status-bar img,
html[data-theme="light"] .battery-life img { filter: brightness(0); }

/*-----------------------------------*\
#RESET
\*-----------------------------------*/

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

html, body {
    width: 100dvw;
    height: 100dvh;
    overflow: hidden;
    font-family: var(--font-georama);
}

body {
    margin: 0 auto;
    width: 100%;
    height: 100vh;
    background-color: rgb(218 178 255);
    font-size: 15px;
    color: var(--text);
}

@media screen and (max-width: 500px) {
    body {
        background-image: url(/assets/images/wallpaper/mobile-background.jpg);
        background-repeat: no-repeat;
        background-size: contain;
        background-color: black;
        background-position: center;
    }

    header, .apps { color: white; }

    .status-bar img, .battery-life img { filter: brightness(0) invert(1); }
}

a {
    text-decoration: none;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
}

li { list-style: none; }

button, img, li {
    cursor: pointer;
}

button {
    border: none;
    font-family: inherit;
}

img, svg, video, canvas, audio, iframe, embed, object { display: block; }

img, video {
    max-width: 100%;
    height: auto;
}

button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
}

/*-----------------------------------*\
#HEADER: DESKTOP SCREEN
\*-----------------------------------*/

#top-bar {
    position: fixed;
    top: 0;
    width: 100%;
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.20);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block-start: 1rem;
    /* height: 5vh; */
    padding-inline: 1rem;
    padding-block-end: 0.5rem;
}

#top-bar .left-side-header,
.right-side-header,
.desktop-menu,
.desktop-icons {
    display: flex;
    align-items: center;
    gap: calc(.25rem * 5);
    /* gap: 1rem; */
}

.desktop {
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.05rem;
}

.skills-dropdown {
    display: none;
    position: absolute;
    list-style: none;
    top: 3rem;
    color: #333333d4;
    padding: 8px;
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.20);
    border-radius: 5px;
    width: 8rem;
    padding-block: 0.5rem;
    padding-inline: 10px;
}

.skills-menu.active > .skills-dropdown {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.submenu {
    display: none;
    position: absolute;
    width: 8rem;
    left: 120px;
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.20);
    top: 0;
    /* left: 100px; */
    padding: 5px 10px;
}

.skills-list-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.skills-list-item:hover > .submenu {
    display: flex;
    gap: 5px;
    flex-direction: column;
}

.socials-dropdown {
    display: none;
    flex-direction: column;
    gap: 5px;
    position: absolute;
    list-style: none;
    top: 3rem;
    /* left: 12%; */
    padding: 8px;
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.20);
    border-radius: 5px;
    width: 8rem;
    padding-block: 0.5rem;
    padding-inline: 10px;
    color: #333333d4;
}

.socials-menu.active > .socials-dropdown {
    display: flex;
}

.social-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.socials-dropdown #Gmail { display: none; }

.desktop-socials { margin-left: 1rem; }

.desktop-icons { 
    margin-right: -1.5rem;
    gap: 15px;
}

.desktop li img {
    width: 15px;
}

.desktop-icons li .battery { width: 20px; }

.desktop-icons li .siri {
    width: 45px;
    margin-left: -8px;
}

.date-time {
    font-size: 13px;
    letter-spacing: 0.4px;
}

/*-----------------------------------*\
#HEADER: TABLET SCREEN
\*-----------------------------------*/

@media screen and (max-width: 899px) {
    #top-bar { 
        background: none; 
        height: 3vh;
        padding-inline: 5px;
    }

    #top-bar div {
        display: flex;
        align-items: center;
        gap: 2px;
    }

    #top-bar ul {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    #top-bar ul img {
        width: 20px;
    }
}

/*-----------------------------------*\
#HEADER: MOBILE SCREEN
\*-----------------------------------*/

@media screen and (max-width: 600px) {
    #top-bar {
        padding-inline: 4px;
    }
}

/*-----------------------------------*\
#WORKSPACE: DESKTOP SCREEN
\*-----------------------------------*/

#workspace {
    margin: 0;
    /* background-color: rgb(218 178 255); */
}

#desktop-apps { height: 100vh; }

.sticky-note {
    font-family: "Yuyu Short", sans-serif;
    position: absolute;
    top: 6rem;
    left: 2rem;
    width: 300px;
    min-height: 230px;
    background: #fffacd;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    border: 1px solid #eee;
    padding: 10px;
    cursor: grab;
    resize: both;
    border-radius: 6px;
    overflow: hidden;
    color: #333;
}

.sticky-note h4 { 
    font-size: 30px; 
    /* margin-bottom: 15px; */
    color: #333;
}

.sticky-note .sticky-list {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    resize: none;
    color: #333;
    outline: none;   
}

.sticky-list {
    font-size: 22px;
    display: flex;
    flex-direction: column;
    font-weight: 200;
    /* gap: 5px; */
    /* align-items: normal; */
    margin-bottom: 10px;
    margin-inline-start: 1rem;;
}

/* .sticky-list li svg { width: 15px; } */

.desktopIcon-item {
    position: absolute;
    text-align: center;
    z-index: 20;
}

.desktopIcon-item img {
    height: calc(.25rem * 20);
    width: calc(.25rem * 20);
    margin: auto;
}

/*-----------------------------------*\
#WORKSPACE: TABLET SCREEN
\*-----------------------------------*/

@media screen and (max-width: 899px) {
    #workspace {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .apps {
        display: grid;
        grid-template-rows: repeat(4, calc(.30rem * 20));
        grid-template-columns: repeat(4, calc(.30rem * 20));
        row-gap: 1.5rem;
        align-items: center;
        justify-content: space-evenly;
        column-gap: 4rem;
    }

    .app-item {
        transform-origin: 50%;
        cursor: pointer;
        transition-property: all;
        text-align: center;
        font-size: 13px;
        height: calc(.30rem * 20);
        width: calc(.30rem * 20);
    }

    #files-mobile { display: none; }

    .app-item img {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    .social-links {
        margin-top: 4px;
        height: calc(.28rem * 20);
        width: calc(.29rem * 20);
        background: rgba(255, 255, 255, 0.20);
        backdrop-filter: blur(12px);
        display: flex;
        flex-wrap: wrap;
        border-radius: 1rem;
        padding-block: 5px;
        align-items: center;
        justify-content: start;
        padding-inline: 9px;
        gap: 2px;
        margin-bottom: 5px;
    }

    .social-item {
        height: calc(.10rem * 14);
        width: calc(.10rem * 14);
    }

    .social-item span { display: none; }

    #pages {
        position: fixed;
        bottom: 6.5rem;
        left: 50%;
        transform: translate(-50%, -10%);
    }

    .page-icon { font-size: 9px; }

    .page-icon:first-child { color: rgb(255 255 255); }

    .page-icon:last-child { color: rgba(255, 255, 255, 0.20); }

    body.blurred > *:not(.social-preview):not(#overlay) {
        filter: blur(10px);
        transition: filter .3s ease;
    }

    .social-preview {
        z-index:9999;
        border-radius:25px;
        overflow:hidden;
        transform-origin:center;
    }

    .social-preview h4 {
        text-align: center;
        font-size: 2rem;
        font-weight: 200;
        margin-bottom: 1rem;
    }

    .social-preview-grid {
        background: rgba(255, 255, 255, 0.20);
        border-radius: 25px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        padding: 1rem 3.5rem;
        gap: 15px;
        height: 45vh;
    }

    .social-preview-item {
        text-align: center;
        width: calc(.25rem * 20);
        height: calc(.25rem * 20);
    }

    .social-preview-item img {
        width: 100%;  
        height: 100%;
    }

    #phone.social-preview-item,
    #gmail.social-preview-item { display: block; }
}

/*-----------------------------------*\
#WORKSPACE: MOBILE SCREEN
\*-----------------------------------*/

@media screen and (max-width: 599px) {

    #workspace { height: auto; }

    .apps {
        display: grid;
        grid-template-rows: repeat(4, calc(.25rem * 20));
        grid-template-columns: repeat(4, calc(.25rem * 20));
        justify-content: center;
        margin-top: 2rem;
        column-gap: 5px;
    }

    .app-item {
        font-size: 10px;
        height: calc(.25rem * 20);
        width: calc(.25rem * 20);
    }

    #files-mobile { display: block; }

    .social-links {
        margin-top: 4px;
        height: calc(.22rem * 20);
        width: calc(.24rem * 20);
    }

    .social-item {
        height: calc(.08rem * 14);
        width: calc(.08rem * 14);
    }

    .social-item:first-child { display: none; }

    .social-preview-grid {
        /* height: 55vh; */
        gap: 10px;
        padding: 20px;
    }

    #phone.social-preview-item { display: none; }

    #gmail.social-preview-item { display: block; }
}

/*-----------------------------------*\
#FOOTER: DESKTOP SCREEN
\*-----------------------------------*/

#dock {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    user-select: none;
    bottom: calc(.25rem * 5);
    padding-inline: calc(.25rem * 5);
}

.dock-container {
    background: rgba(255, 255, 255, 0.20);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: flex-end;
    border-radius: 1rem;
    gap: 10px;
    padding: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: calc(.25rem * 1.5);
    align-items: flex-end;
    gap: calc(.25rem * 1.5);
}

.dock-item {
    transition: transform 0.25s ease;
    display: flex;
    align-items: center;
    translate: none;
    rotate: none;
    scale: none;
    transform: translate(0px, 0px);
    width: calc(.25rem * 14);
    height: calc(.25rem * 14);
    cursor: pointer;
    list-style: none;
    transform-origin: center bottom;
    will-change: transform;
}

.dock-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
}

#phone { display: none; }

@media screen and (max-width: 1240px) {
    #maps, #facetime, #messages, #reminders, #siri { display: none; }
}

/*-----------------------------------*\
#FOTTER: TABLET SCREEN
\*-----------------------------------*/

@media screen and (max-width: 899px) {
    #phone, #safri, #launchpad, #maps, #photos, #gmail, #calendar, #appstore, #settings, #trash, #notes, #terminal {
        display: none;
    }

    .dock-item {
        width: calc(.30rem * 14);
        height: calc(.30rem * 14);
    }

}

/*-----------------------------------*\
#FOTTER: MOBILE SCREEN
\*-----------------------------------*/

@media screen and (max-width: 560px) {
    #dock {
        width: 100%;
        bottom: 0;
        padding-inline: 0;
    }

    .dock-container { 
        justify-content: space-evenly;
        border-radius: 0; 
    }

    .dock-item {
        width: calc(.25rem * 20);
        height: calc(.25rem * 20);
    }

    #phone, #safri, #messages { display: flex; }

    #finder, #preview, #player, #notes {
        display: none;
    }
}

/*-----------------------------------*\
#FOTTER: DOCK ITEM TOOLTIP
\*-----------------------------------*/

.tippy-box[data-theme~="mac"]{
    padding: 5px 12px;
    font-size: 13px;
    border-radius: 8px;
    backdrop-filter: blur(12px);
    background-color: #bfdbfe;
    color: #1e3a8a;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);

} 

.tippy-box[data-theme~="mac"] > .tippy-arrow::before { color: #bfdbfe; }

/*-----------------------------------*\
#GENERAL WINDOW STYLES
\*-----------------------------------*/

.window {
    background: var(--background);
    border-radius: .625rem;
    position: absolute;
    width: 30rem;
    overflow: hidden;
    border-radius: calc(.625rem + 4px);
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}

.grid-row {
    padding-block: 0.5rem;
    border-bottom: 1px solid lightgray;
    padding-inline: 0.5rem;
}

.grid-row input {
    border: none;
    padding-inline-start: 1rem;
}

/*-----------------------------------*\
#WINDOW CONTROLS
\*-----------------------------------*/

.window-controls, .window-buttons {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.window-header {
    border-top-left-radius: .625rem;
    border-top-right-radius: .625rem;
    padding-inline: calc(.25rem * 4);
    padding-block: calc(.25rem * 3);
    border-bottom: 1px solid var(--window-header-border);
    -webkit-user-select: none;
    user-select: none;
    justify-content: space-between;
    align-items: center;
    display: flex;
    color: rgb(153 161 175);
    background: var(--window-header);
}

.window-back { display: none; }

.window-btn {
    width: calc(.25rem * 3.5);
    height: calc(.25rem * 3.5);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .75rem;
    color: #000;
    padding: 0;
}

.window-btn i { display: none; }

.window-buttons:hover .window-btn i { display: block; }

.window-btn.close { background-color: #ff6157; }

.window-btn.minimize { background-color: #ffc030; }

.window-btn.maximize { background-color: #2acb42; }

.window-btn.maximize i { transform: rotate(45deg); }

@media screen and (max-width: 560px) {
    .window,
    .window-header { border-radius: 0; }

    .window-back { display: block; }

    .window-buttons { display: none; }
}

/*-----------------------------------*\
#NOTES WINDOW 
\*-----------------------------------*/

#notes.window {
    top: calc(.25rem * 20);
    left: calc(.25rem * 20);
    height: 300px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.window-header { flex-shrink: 0; }

.window-header .header-icons { 
    display: flex;
    align-items: center;
    gap: 15px;
}

#notes.window .window-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 2rem;
}

.window-content .welcome-text {
    text-align: center;
    color: rgb(153 161 175);
    margin-block-start: 1rem;
}

.accordion-item {
    border: 1px solid rgb(153 161 175);
    border-radius: 1rem;
}

.accordion-item.active .accordion-header i {
    transform: rotate(180deg);
    color: var(--text);
}

.accordion-item.active .accordion-header { 
    border-radius: 0.9rem; 
    background: rgb(153 161 175);
}

.accordion-header {
    width: 100%;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
}

.accordion-header:focus {
    outline: none;
    box-shadow: none;
    border-color: transparent;
}

.accordion-header i {
    transition: transform .35s ease;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.accordion-item:last-child { margin-bottom: 2rem; }

.accordion-content p {
    padding: 12px 16px;
}

@media screen and (max-width: 599px) {
    .window-header .header-icons:nth-child(2),
    .window-header .header-icons:nth-child(3) { display: none; }
}

/*-----------------------------------*\
#EMAIL WINDOW
\*-----------------------------------*/

#gmail.window {
    top: calc(.25rem * 50);
    left: calc(.25rem * 10);
    /* height: 450px; */
}

.window-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.window-header p { font-weight: 500; }

.mobile-header-actions { display: none; }

.window-content i,
#to-input { color: rgb(153 161 175); }

#to-input { letter-spacing: 1px; }

.grid-row { display: flex; }

.grid-row input { width: 100%; }

.emailWindowFooter {
    display: flex;
    align-items: center;
    margin-inline: 1rem;
    margin-block-end: 1rem;
    /* position: fixed;
    bottom: 1rem; */
}

.email-icons {
    display: flex;
    align-items: center;
    gap: 5px;
}

.email-icons svg {
    width: 20px;
    height: 20px;
}

.email-icons svg:nth-last-child() { 
    position: absolute;
    right: 1rem;
}

.mobile-send {
    background: #2d53b1;
    color: white;
    padding: 4px 10px;
    border-radius: 5px;
    display: none;
}

.desktop-send {
    cursor: not-allowed;
    transition: background-color .2s ease;
    background: #2d53b1;
    color: white;  
    cursor: pointer; 
    padding: 5px 15px;
    border-radius: 10px;
    margin-inline-end: 1rem;
}

.window-content .desktop-send i { color: white; }

.message-container { flex: 1; }

#message {
    border: none;
    width: 100%;
    height: 40vh;
    /* height: 68%; */
    resize: none;
    overflow-y: auto;
    padding-inline: 5px;
    margin-block-start: 1rem;
}

#message:focus,
input:focus {
    outline: none;
    box-shadow: none;
    border-color: transparent; 
}

.ri-delete-bin-6-line {
    position: fixed;
    right: 1rem;
}

@media screen and (max-width: 599px) {
    #gmail.window {
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100vh;
    }

    .window-header p { display: none; }

    #gmail.window .window-back span i,
    .mobile-header-actions i { font-size: 16px; }

    .mobile-send { display: block; }

    #gmail.window .window-header { flex-direction: row-reverse; }

    .emailWindowFooter { display: none; }

    .mobile-header-actions { 
        display: flex;
        margin-left: auto;
        gap: 10px;
    }

}

/*-----------------------------------*\
#FINDER WINDOW 
\*-----------------------------------*/

#finder.window {
    top: calc(.25rem * 80);
    left: calc(.25rem * 100);
    width: 40rem;
    /* height: 45vh; */
}

.finder-content {
    flex-direction: row;
    height: 100%;
}

.sidebar {
    width: calc(.25rem * 48);
    flex-direction: column;
    display: flex;
    border-right: 1px solid var(--window-header-border);
    background-color: var(--window-header);
    padding: calc(.25rem * 5);
}

.sidebar h3 {
    margin-bottom: calc(.25rem * 1);
    font-size: .75rem;
    font-weight: 500;
    color: rgb(153 161 175);;
}

.sidebar .sidebar-list { margin-bottom: 1rem; }

.sidebar .sidebar-list li {
    cursor: pointer;
    align-items: center;
    gap: calc(.25rem * 2);
    border-radius: calc(.625rem - 2px);
    padding-inline: calc(.25rem * 3);
    padding-block: calc(.25rem * 2);
    display: flex;
    flex-direction: row;
}

.sidebar .sidebar-list li img {
    width: calc(.25rem * 4);
}

.sidebar .sidebar-list .active,
.sidebar .projects-list .active {
    background-color: var(--list-item-bg);
    color: var(--list-item-hover);
    font-weight: 500;
}

.sidebar .sidebar-list .not-active,
.sidebar .projects-list .not-active {
    color: var(--text);
}

.projects-list li {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    align-items: center;
    gap: calc(.25rem * 2);
    border-radius: calc(.625rem - 2px);
    padding-inline: calc(.25rem * 3);
    padding-block: calc(.25rem * 2);
}

.projects-list li img { width: calc(.25rem * 4); }

.projects-list span {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.finder-content {
    max-width: 42rem;
    background-color: var(--background);
    color: var(--text);
    flex: 1;
    position: relative;
    width: 100%;
    height: 100%;
}

.finder-content .folder-content li {
    align-items: center;
    gap: calc(.25rem * 3);
    flex-direction: column;
    display: flex;
    /* position: absolute; */
}

/* .finder-content .folder-content li:nth-child(1) {
    left: calc(.25rem * 5);
    top: calc(.25rem * 10);
}

.finder-content .folder-content li:nth-child(2) {
    right: calc(.25rem * 60);
    top: calc(.25rem * 52);
}

.finder-content .folder-content li:nth-child(3) {
    top: calc(.25rem * 10);
    left: calc(.25rem * 80);
} */

.finder-content .folder-content li img {
    width: calc(.25rem * 16);
    height: calc(.25rem * 16);
    object-fit: contain;
    object-position: center;
    position: relative;
}

.folder-item {
    position: absolute;
    list-style: none;
}

/*-----------------------------------*\
#FILES WINDOW 
\*-----------------------------------*/
.files-header {
    display:flex;
    align-items:center;
    position:relative;
    padding:.75rem;
    border-bottom:1px solid var(--window-header-border);
}

.files-header h2 {
letter-spacing: 0.1rem;
    font-size: 18px;
    font-weight: 600;
    position: absolute;
    left: 78%;
    transform: translate(-50%);
    text-transform: uppercase;
    width: 100%;
}

.files-header .email-close { display: none; }

.files-content {
    flex:1;
    overflow-y:auto;
    background: var(--background);
    height: 100%;
}

.breadcrumb {
    border-bottom: 1px solid var(--window-header-border);
    border-color: var(--background);
    background-color: var(--window-header);
    padding-inline: calc(.25rem * 5);
    padding-block: calc(.25rem * 6);
    align-items: center;
    display: flex;
}

.breadcrumb button {
    border:none;
    background:none;
    color:#007aff;
    cursor:pointer;
    white-space:nowrap;
}

.files-list {
    list-style:none;
    margin:0;
    padding:0;
}

.files-item {
    display:flex;
    align-items:center;
    gap:1rem;
    padding:1rem;
    border-bottom:1px solid var(--window-header-border);
    cursor:pointer;
}

.files-item img {
    width:42px;
    height:42px;
    object-fit:contain;
}

.files-item span {
    flex:1;
    font-size:.95rem;
}

.files-item i {
    color:#999;
}

@media screen and (max-width: 599px) {
    #notes.window,
    #files.window {
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100vh;
    }
}

/*-----------------------------------*\
#RESUME WINDOW 
\*-----------------------------------*/

#resume {
    top: calc(.25rem * 98);
    right: calc(.25rem * -50);
    transform: translate(-50%, -50%);
    width: 28rem;
}

#resume .window-header h3 {
    font-weight: 500;
    font-size: 14px;
}

.resume-download svg { padding: calc(.25rem * 1); }

#resume .text-content { height: 630px; }

@media screen and (max-width: 599px) {
    #resume-preview-canvas { width: 100%; }
}

/*-----------------------------------*\
#IMAGE WINDOW 
\*-----------------------------------*/

#imgfile {
    top: calc(.25rem * 20);
    right: calc(.25rem * 70);
    width: 36rem;
    border-radius: calc(.625rem + 4px);
    background-color: var(--color-white);
    overflow: hidden;
}

#imgfile.about-image-window { 
    top: calc(.25rem * 30);
    right: calc(.25rem * 100);
    width: 25rem; 
}

.image-window-icons {
    display: flex;
    gap: 10px;
    align-items: center;
}

.image-window-icons svg { padding: calc(.25rem * 1); }

.image-content {
    background-color: var(--background);
    max-height: 70vh;
}

@media screen and (max-width: 599px) {
    .image-preview{
        display: flex;
        align-items: center;
        justify-content: center;
        padding-inline: calc(.25rem * 5);
        padding-block: calc(.25rem * 2);
        height: 50%;
    }

    .image-preview #profile-2\.img,
    .image-preview #profile-1\.img { margin-top: 5rem; }
}

/*-----------------------------------*\
#TEXT WINDOW 
\*-----------------------------------*/

#txtfile {
    top: calc(.25rem * 40);
    right: calc(.25rem * 12);
    width: 23rem;
}

.text-window-icons svg { color: rgb(153 161 175); }

.text-preview,
.text-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.text-preview {
    padding-inline: calc(.25rem * 5);
    padding-block: calc(.25rem * 4);
    align-items: center;
}

.text {
    display: flex;
    gap: 1rem;
    flex-direction: column;
    padding: calc(.25rem * 3);
}

@media screen and (max-width: 599px) {
    .text-preview {
        padding-bottom: calc(.25rem * 5);
        padding-top: calc(.25rem * 10);
        padding-inline: calc(.25rem * 5);
        align-items: start;
    }

    .text-preview-image {
        border-radius: 50%;
        width: 8rem;
    }
}

/*-----------------------------------*\
#TERMINAL WINDOWS 
\*-----------------------------------*/

#terminal.window {
    top: calc(.25rem * 20);
    left: calc(.25rem * 80);
    width: 36rem;
}

.terminal-content { padding: calc(.25rem * 5); }

.teach-prompt span {
    font-weight: 700;
    margin-right: 0.5rem;
    letter-spacing: 1px;
}

.label {
    margin-inline-start: calc(.25rem * 10);
    margin-top: calc(.25rem * 7);
    align-items: center;
    display: flex;
}

.label p:first-child { width: calc(.25rem * 32); }

.skills-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-block: calc(.25rem * 5);
    padding-block: calc(.25rem * 5);
    border-bottom: 1px dashed rgb(229 229 229);
    border-top: 1px dashed rgb(229 229 229);
}

.category {
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
}

.category-heading {
    display: flex;
    align-items: center;
}

.category svg:nth-child(1) { display: none; }

.category h4 {
    width: calc(.25rem * 32);
    font-weight: 500;
    color: rgb(0 161 84);
    margin-inline-start: calc(.25rem * 5);
}

.inner-list {
    display: flex;
    gap: 10px;
    align-items: center;
}

.footnote p {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.footnote p:first-child { 
    margin-block-end: calc(calc(.25rem * 2) * calc(1 - 0));
    color: rgb(0 161 84); 
    letter-spacing: 0.3px;
}

.footnote p svg {
    width: calc(.25rem * 5);
    margin-inline-end: calc(.25rem * 5);
}

@media screen and (max-width: 599px) {
    #terminal.window {
        height: 100vh;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .category {
        flex-direction: column;
        align-items: baseline;
        margin-block-end: calc(calc(.25rem * 5) * calc(1 - 0));
    }

    .category svg:nth-child(1) { display: flex; }

    .category svg:nth-child(2) { display: none; }

    .label { display: none; }

    .skills-list {
        border: none;
    }

    .inner-list {
        flex-direction: column;
        justify-content: flex-start;
        display: flex;
        gap: 10px;
        align-items: baseline;
        margin-top: calc(.25rem * 2);
        gap: calc(.25rem * 1);
    }

    .inner-list li { margin-inline-start: calc(.25rem * 7); }

    .inner-list li:before {
        content: "-";
        margin-right: calc(.25rem * 2);
    }

    .inner-list li:first-child::before {
        content: none;
    }

    .footnote { margin-top: -1.5rem; }

    .footnote p:first-child { font-size: 14px; }
}

/*-----------------------------------*\
#SOCIAL MEDIA WINDOW
\*-----------------------------------*/

#socialmedia.window {
    top: calc(.25rem * 5);
    right: calc(.25rem * 105);
    width: 30rem;
    /* height: 30vh; */
}

.social_media-content {
    align-items: center;
    justify-content: space-evenly;
    margin-block: 2rem;
}

.social_media-content p { 
    margin: 1.5rem 2rem;
    text-align: center;
}

.socials-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-inline: auto;
    gap: 10px;
 }

.socials-list li {
    /* width: calc(.25rem * 60); */
   width: calc(.25rem * 50);
    transform-origin: 50%;
    border-radius: .625rem;
    padding: calc(.25rem * 3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
}

.socials-list li:nth-child(1) { background-color: rgb(75, 203, 99); } 
.socials-list li:nth-child(2) { background-color: rgb(244, 101, 107); }
.socials-list li:nth-child(3)  { background-color: rgb(5, 182, 246); }
.socials-list li:nth-child(4)  { background-color: rgb(255 132 183); }
.socials-list li:nth-child(5)  { background-color: rgb(255, 134, 107); }
.socials-list li:nth-child(6)  { background-color: rgb(232 149 255); }

.socials-list li i { color: white; }

.socials-list #phone { display: block; }