:root {
    --dark: #2F323A;
    --darker-dark: #222328;
    --dark-accent: #77567A;
    --pink: #C47AC0;
    --light-pink: #E39EC1;
    --grey: #CED3DC
}

body {
    background-color: var(--darker-dark);
}

.taskbar {
    width: 100%;
    background-color: aliceblue;
    height: 3.5rem;
    position: absolute;
    bottom: 0;
    
    
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;

    border-top: #b4b4b4 solid 1px;
}



.desktop {

    display: flex;
    padding: 1rem;
    gap: 1rem;
    flex-wrap: wrap;
    height: 100%;
}
.row {
    gap: 1em;
}



.window {
    position: absolute;
    

    min-height: 100px;
    background-color: #fff;

    border-radius: 3px;
    border: #b4b4b4 solid 1px;

}

.window.maximized {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.window.maximizing {
    transition: all 0.5s;
}


.window-bar {
    width: 100%;
    height: 1.5rem;

    background-color: #b4b4b4;
    overflow-x: initial;
    
    display: flex;
    flex-wrap: nowrap;
    
    align-items: center;
    justify-content: space-between;
}


.control-btn {
    height: 100%;
    display: flex;
    gap: 0;
}
rect {
    justify-self: center;

}

.window-bar .control-btn svg {
    align-items: center;
    justify-self: center;
}

.window-title {
    padding-left: 5px;
    padding-bottom: 1px;
}

.window-bar svg {
    height: 100%;
    padding: 0 0.5rem;

    transition: 
        background-color 0.15s,
        fill 0.15s;

}
 
.window-bar .control-btn svg:hover{
    background-color: darkgray;
    fill: #fff;
    stroke: #fff;
    transition: 
        background-color 0.15s,
        fill 0.15s;
}

.window-bar .control-btn svg:hover rect{
    background-color: darkgray;
    fill: 0;
    stroke: #fff;

}


.window-bar .control-btn .cancel-btn:hover {
    background-color: red;
    fill: #fff;
    transition: 
        background-color 0.15s,
        fill 0.15s;

}

.window-content {
    padding: 0.25rem;
    width: calc(100% - (0.25rem * 2));
    height: calc(100% - (0.25rem * 2) - 1.5rem);
}


/*#region Window Control */

.window-top-control {
    width: 95%;
    height: 5px;
    position: absolute;
    left: 2.5%;
    top: -2px;
}
.window-top-control, 
.window-bottom-control {
    cursor: ns-resize;
}
.window-bottom-control {
    width: 95%;
    height: 5px;
    position: absolute;
    left: 2.5%;
    bottom: -2px;
}

.window-left-control,
.window-right-control {
    cursor: ew-resize;
}

.window-left-control {
    height: 95%;
    width: 5px;
    position: absolute;
    left: -2px;
    top: 2.5%;
}

.window-right-control {
    height: 95%;
    width: 5px;
    position: absolute;
    right: -2px;
    top: 2.5%;
}

/* #region CORNER CONTROLERS */
.window-top-left-control,
.window-top-right-control,
.window-bottom-left-control,
.window-bottom-right-control {
    width: 7px;
    height: 7px;
    position: absolute;
}
.window-top-left-control,
.window-bottom-right-control {
    cursor: nwse-resize;
}
.window-top-right-control,
.window-bottom-left-control {
    cursor: nesw-resize;
}


.window-top-left-control {
    left: -4px;
    top: -4px;
}

.window-top-right-control {
    right: -4px;
    top: -4px;
}

.window-bottom-left-control {
    left: -4px;
    bottom: -4px;
}

.window-bottom-right-control {
    right: -4px;
    bottom: -4px;
}



/*#endregion  */


/* #endregion */


.shortcut {
    width: 100%;
    height: 100%;
    border: rgba(1, 1, 1, 0) solid 1px;
}
.shortcut:not(.shortcut.focused:hover):hover  {
    background-color: rgba(124, 124, 124, 0.5);
    border-radius: 5px;
    height: 100%;
}

.shortcut.selected {
    background-color: rgba(185, 185, 185, 0.5);
    border-radius: 5px;
} 

.shortcut:focus,
.shortcut.focused {
    border: #fff dashed 1px;
}

.shortcut img {
    width: 80%;
    max-height: 80%;
    margin: 0 auto;
    user-select: none;
    image-rendering: pixelated;
}
.shortcut p {
    text-align: center;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 0.75rem;
    color: #fff;
    width: 56px;
    max-height: 25px;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    user-select: none;
}
.shortcut.focused p,
.shortcut.selected p {
    white-space: unset;
    text-overflow: unset;
    overflow-wrap: break-word;
    max-height: unset;

}

.taskbar .taskbar-item {
    width: 40px;
    padding: 4px;
    height: 40px;
    border-radius: 0.25rem;
}

.taskbar .clicked {
    background-color: rgb(184, 185, 186);
}

.bomb {
    width: 100%;
    image-rendering: pixelated;
}

.dragging {
    width: 70px;
    height: 80px;
}