body {
    background-size: 20%;
}
* {
    scrollbar-width: none;
    transition: background-color 400ms, color 400ms, border-color 400ms;
}
.panel {
    height: 2.5rem;
    .widget {
        margin: 1rem;
    };
}

#settings {
    font-size: 1.5rem;
}

.desktop {
    gap: 5rem;
    width: 4rem;
    margin: 2rem;
    justify-content: center;
}

.projects-window .content .app-icon, .socials-window .content .app-icon {
    width: 5rem;
    height: 5rem;
    font-size: 2rem;
}

#projects, #socials {
    transform: translate(-25%, 0%);
}



.app-icon#connect4 i {
    top: 5%;
    transform: translate(-50%, 0);
}

.windows { 
    position: absolute;
    left: 0;
    top: 0;
}

.window {
    width: 50rem;
    height: 30rem;
    position: absolute;
    left: calc(50% + 30rem);
    top: calc(50% + 15rem);

}

.popup-window {
    width: 20rem;
    height: 15rem;
    backdrop-filter: unset;
    transform: scale(1);
    left: calc(50vw - 20rem);
    top: calc(50vh - 5rem);
}

.popup-window .content {
    height: 10rem;
    gap: 0;
    p {
        width: 90%;
        padding: 1ch 0;
    };
    button {
        position: relative;
        top: -1rem;
    }
    
}

.popup-window .titlebar .close-btn {
    display: none;
}



.content {
    height: 100%;
    overflow-y: auto;
}

.content * {
    margin: 1;    
}
.close-btn {
    height: 1rem;
    width: 1rem;
    left: 100%;
    transform: translate(-150%, 10%);
    background: rgb(var(--red));
    border: none;
    border-radius: 50%;

    span {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        
        color: transparent;
        transition-duration: 0ms;
    }
}
.close-btn:hover {
    span {
        color: rgb(var(--bg1));
    }
}


.resizer {
    position: absolute;
    z-index: 10000;
}
.resizer.nw,
.resizer.ne,
.resizer.sw,
.resizer.se {
    width: 12px;
    height: 12px;

}
.resizer.n,
.resizer.s {
    height: 8px;
    width: 100%;
    left: 0;
    right: 0;
}

.resizer.s,
.resizer.se,
.resizer.sw {
    top: calc(100% + 2rem)
}

.resizer.e,
.resizer.w {
    width: 8px;
    height: calc(100% + 2rem);
    top: 0;
    bottom: 0;
}
.resizer.n   { top: -4px; cursor: n-resize; }
.resizer.s   { bottom: -4px; cursor: s-resize; }
.resizer.e   { right: -4px; cursor: e-resize; }
.resizer.w   { left: -4px; cursor: w-resize; }

.resizer.nw  { top: -6px; left: -6px; cursor: nw-resize; }
.resizer.ne  { top: -6px; right: -6px; cursor: ne-resize; }
.resizer.sw  { bottom: -6px; left: -6px; cursor: sw-resize; }
.resizer.se  { bottom: -6px; right: -6px; cursor: se-resize; }



.settings-window {
    width: 300px;
}