body {

    margin:0;

    background-image:url("https://wallpaperaccess.com/full/234994.jpg");

    background-size:cover;

    background-position:center;

    height:100vh;

    overflow:hidden;

    transition:.5s;

}




/* TOP BAR */

.topbar {

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:55px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 20px;

    box-sizing:border-box;

    background:rgba(20,20,40,.85);

    border-bottom:2px solid var(--accent,#4da6ff);

    z-index:1000;

}



.os-name,
.time {

    color:white;

    font-family:"Lucida Console";

    margin:0;

}



.open-button {

    display:none;

    background:rgba(77,166,255,.3);

    border:1px solid var(--accent,#4da6ff);

    color:white;

    border-radius:8px;

    padding:5px 12px;

    cursor:pointer;

}






/* DESKTOP */


#desktopApps {

    padding-top:75px;

    padding-left:15px;

}



.icon {

    width:100px;

    text-align:center;

    padding:15px;

    cursor:pointer;

    border-radius:15px;

    transition:.2s;

}



.icon img {

    width:64px;

    height:64px;

}



.icon p {

    color:white;

    font-family:"Space Mono",monospace;

    margin-top:8px;

}



.icon:hover,
.icon.selected {

    background:rgba(77,166,255,.25);

    box-shadow:0 0 15px var(--accent,#4da6ff);

}







/* WINDOWS */


.window {

    position:absolute;

    width:500px;

    padding:20px;

    background:rgba(20,20,40,.9);

    border:2px solid var(--accent,#4da6ff);

    border-radius:20px;

    color:white;

    text-align:center;

    box-shadow:0 0 25px rgba(0,0,0,.5);

}



.window-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:move;

}



.drag-icon {

    width:30px;

    height:30px;

}



.window-title {

    font-family:"Lucida Console";

}



.close-button {

    width:20px;

    height:20px;

    cursor:pointer;

}





/* TEXT */


.main-title {

    font-family:"Space Mono",monospace;

}


.subtitle,
.description {

    font-family:"Lucida Console";

}






/* NOTES */


.note-content {

    margin-top:20px;

    padding:20px;

    min-height:250px;

    text-align:left;

    background:rgba(0,0,0,.3);

    border-radius:15px;

}



.note-content h2 {

    font-family:"Space Mono",monospace;

}



.note-content p,
.note-content li {

    font-family:"Lucida Console";

}





.note-nav {

    display:flex;

    gap:10px;

    margin-top:15px;

    padding:10px;

    background:rgba(77,166,255,.2);

    border-radius:15px;

    overflow-x:auto;

}



.note-card {

    min-width:120px;

    padding:12px;

    background:rgba(255,255,255,.15);

    border-radius:12px;

    cursor:pointer;

    text-align:center;

    color:white;

    font-family:"Lucida Console";

    transition:.2s;

}



.note-card:hover {

    background:var(--accent,#4da6ff);

    transform:translateY(-5px);

}







/* SETTINGS */


.settings-content {

    text-align:center;

    font-family:"Lucida Console";

}



.settings-content h2 {

    font-family:"Space Mono",monospace;

}



.setting-button,
.color-button,
.reset-button {

    padding:10px 18px;

    margin:5px;

    border-radius:12px;

    border:1px solid white;

    color:white;

    background:rgba(255,255,255,.15);

    cursor:pointer;

    transition:.2s;

}



.setting-button:hover,
.color-button:hover,
.reset-button:hover {

    transform:scale(1.05);

    background:var(--accent,#4da6ff);

}




.blue {

    background:#4da6ff;

}


.purple {

    background:#9b59ff;

}


.green {

    background:#35d05b;

}


.reset-button {

    background:rgba(255,0,0,.3);

}