@import url('https://fonts.cdnfonts.com/css/w95fa');
@import "https://cdn.jsdelivr.net/npm/95css@latest/css/95css.min.css";

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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: w95fa;

    scrollbar-width: none
}

body {
    background-color: #386ca0;
}

.screen {
    display: flex;
    flex-direction: column;

    position: relative;
}

.desktop {
    max-height: 100dvh;
    min-height: 100dvh;

    position: relative;
}

.taskbar {
    background-color: #D0CCC0;
    height: 5dvh;
    box-shadow: inset -2px -2px 0 black,
        inset 2px 2px 0 #f0f4ef,
        inset -4px -4px 0 gray;
    display: flex;

    min-height: 40px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.btn {
    border-radius: none;
    border: none;
    background-color: #D0CCC0;
    box-shadow: inset -2px -2px 0 black,
        inset 2px 2px 0 #f0f4ef,
        inset -4px -4px 0 gray;
    padding: 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 6px;
    cursor: pointer;
}

.btn:active,
.btn-active {
    font-weight: 900;
    box-shadow: inset -2px -2px 0 #f0f4ef,
        inset 2px 2px 0 black,
        inset -4px -4px 0 #dedede,
        inset 4px 4px 0 #c3c3c3;
    background-color: white;
    background-image: repeating-linear-gradient(45deg, #c3c3c3 25%,
            transparent 25%, transparent 75%,
            #c3c3c3 75%,
            #c3c3c3),
        repeating-linear-gradient(45deg,
            #c3c3c3 25%,
            white 25%,
            white 75%,
            #c3c3c3 75%,
            #c3c3c3);
    background-position: 0 0, 3px 3px;
    background-size: 2px 2px
}

.opened-windows {
    display: flex;
    flex-direction: row;
    flex-shrink: 0;
}

.task {
    min-width: 200px;
    justify-content: start;
}

.time {
    display: flex;
    flex-grow: 1;
    justify-content: end;

    width: 25%;
}

.time-box {
    box-shadow: inset -2px -2px 0 #f0f4ef,
        inset 2px 2px 0 gray,
        inset -4px -4px 0 #c3c3c3;
    display: flex;
    padding: 0 10px;
    margin: 5px;
    gap: 5px;
    justify-content: end;
    align-items: center;
}

.taskbar img {
    box-shadow: none;
    width: 20px;
    height: 20px;
    margin-right: 5px;
}

.desktop {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-wrap: wrap;
}

.desktop-icon {
    height: 90px;
    width: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    cursor: pointer;
    color: white;
}

.desktop-icon-image {
    height: 40px;
    width: 40px;
}

.desktop-icon-name {
    margin: 5px;
    padding: 2px;
    border: 1px dashed transparent;
    text-align: center;
}

.desktop-icon:active .desktop-icon-name,
.desktop-icon-active {
    background-color: #002060;
    border-color: #f0f4ef;
}

.window {
    position: absolute;
    left: 5%;
    top: 5%;
    right: 15%;

    background-color: var(--color-gray-200);
    border: none;
    box-shadow: var(--shadow-outer-3);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    min-width: 250px;
    width: fit-content;
    padding: var(--spacing-3);
}

.dialog-body {
    max-height: 78dvh;
    overflow: scroll;
}

.slot {
    display: flex;
    align-items: center;
}

.white-bg{
    background-color: var(--color-white);
    padding: 10px;
    box-shadow: var(--shadow-inner-3);
    width: 100%;
}

.window-menu {
    text-align: right;
}

.pfp {
    margin: 20px;
    max-width: 190px;
    max-height: 190px;
    border-radius: 100%;
}

.window-buttons button {
    padding: 2px;
    width: 27px;
    height: 27px;

    font-weight: 900;
}

#project {
    max-height: 60dvh;
    overflow: scroll;
}

#select {
    height: 50dvh;
    min-height: 100px;
    max-height: 300px;
}

@media (max-width: 800px) {
    .opened-windows {
        width: 50%;
        overflow-x: scroll;
    }

    .window {
        left: 5px;
        top: 70px;
        right: 5px;
    }

    .slot {
        flex-direction: column;
        align-items: center;
    }
}