#desktopPage {
    background-color: #004E98;
    width: 100%;
    height: 100%;

    >img {
        pointer-events: none;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 0;
        max-width: 5120px;
        max-height: 2880px;
        aspect-ratio: 16 / 9;
    }
    >img.portrait {
        height:100%
    }
    >img:not(.portrait) {
        width:100%
    }
}

#taskBar {
    background: rgb(25, 65, 165);
    background: linear-gradient(0deg, rgba(25, 65, 165, 1) 0%, rgba(38, 99, 224, 1) 10%, rgba(34, 87, 213, 1) 80%, rgba(73, 147, 230, 1) 100%);
    color: white;
    display: grid;
    grid-template-columns: auto 11vmin 1fr 11vmin;
    align-items: center;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 3.5vmin;
    z-index: 1;

    p {
        font-size: 1.5vmin;
    }
}

#startButton {
    background: rgb(33, 98, 34);
    background: linear-gradient(343deg, rgba(33, 98, 34, 1) 9%, rgba(61, 153, 61, 1) 74%, rgba(150, 196, 150, 1) 100%);
    -webkit-box-shadow: -0.1vmin 0.2vmin 0.6vmin 0.1vmin rgba(0, 0, 0, 0.75) inset;
    -moz-box-shadow: -0.1vmin 0.2vmin 0.6vmin 0.1vmin rgba(0, 0, 0, 0.75) inset;
    box-shadow: -0.1vmin 0.2vmin 0.6vmin 0.1vmin rgba(0, 0, 0, 0.75) inset;
    border-top-right-radius: 1vmin;
    border-bottom-right-radius: 1vmin;
    display: grid;
    grid-template-columns: 3.5vmin 4vmin;
    align-items: center;
    width: 10vmin;
    height: 100%;

    >img {
        padding-left: 0.8vmin;
        width: 2vmin;
        height: 2vmin;
        filter: drop-shadow(0.2vmin 0.2vmin 0.2vmin rgb(0 0 0 / 0.4));
    }

    >span {
        font-size: 2vmin;
        text-shadow: rgb(0 0 0 / 0.4) 0.2vmin 0.2vmin 0.2vmin;
    }
}
#startButton:hover {
    cursor: pointer;
}

#taskBarTime {
    -webkit-box-shadow: 0.3vmin 0vmin 0vmin -0.1vmin rgba(28, 200, 247, 1) inset;
    -moz-box-shadow: 0.3vmin 0vmin 0vmin -0.1vmin rgba(28, 200, 247, 1) inset;
    box-shadow: 0.3vmin 0vmin 0vmin -0.1vmin rgba(28, 200, 247, 1) inset;
    background: rgb(13, 146, 236);
    background: linear-gradient(315deg, rgba(13, 146, 236, 1) 0%, rgba(19, 152, 237, 1) 100%);
    border-bottom: 0.1vmin solid #095BC9;
    border-top: 0.3vmin solid #1CC8F7;
    border-left: 0.1vmin solid black;
    align-content: center;
    height: 100%;
    width: 11vmin;
    grid-column: 5;

    >span {
        font-size: 1vmin;
        padding-left: 1vmin;
    }
}
.maximized {
    width: 100.2% !important;
    height: 97% !important;
    top: -0.3vmin !important;
    left: -0.4vmin !important;
}

.idleWindow {
    /* will greyed out the window's header (including buttons) */
    filter: grayscale(100%);
}

.window:has(.toolbar) {
    .toolbar {
        grid-row: 3;
        grid-column: 2;
    }

    .windowContent {
        grid-row: 4;
        grid-column: 2;
    }
}

.window {
    display: grid;
    min-width: 200px;
    grid-template: 0.2vmin 2vmin 2vmin auto 0.2vmin/ 0.2vmin auto 0.2vmin;
    background: rgb(61,149,255);
    background: linear-gradient(135deg, rgba(61,149,255,1) 0%, rgb(3, 104, 250) 50%, rgba(0,30,160,1) 100%);
    position: absolute;
    border-top-right-radius: 0.4vmin;
    border-top-left-radius: 0.4vmin;
    border-top: 0.1vmin solid #004E98;
    border-left: 0.1vmin solid #004E98;
    border-right: 0.1vmin solid #00138C;
    border-bottom: 0.1vmin solid #00138C;

    header {
        grid-row: 2;
        grid-column: 2;
        background: rgb(3, 104, 250);
        background: linear-gradient(0deg, rgba(3, 104, 250) 30%, rgba(0, 85, 229) 100%);
        color: white;
        border-top-right-radius: 0.4vmin;
        border-top-left-radius: 0.4vmin;

        .windowButtonContainer {
            display: inline-flex;
            flex-direction: row-reverse;
            
            position: absolute;
            right: 0.3vmin;
            top: 0.3vmin;
            img {
                width: 1.6vmin;
                height: 1.6vmin;
                border: 0.1vmin solid white;
                border-radius: 0.2vmin;
                margin: 0.1vmin;
                cursor:pointer;
                pointer-events: auto;
            }

        }
        >img {
            padding-left: 0.5vmin;
            width: 1.5vmin;
            height: 1.5vmin;
        }
        span {
            display: inline-block;
            padding-bottom: 0.25vmin;
            padding-left: 0.25vmin;
            padding-top: 0.25vmin;
        }

        svg {
            width: 2vmin;
            height: 2vmin;
            border-radius: 0.1vmin;
            border: 0.1vmin solid white;
        }

        cursor:grab;
    }

    header:active {
        cursor: grabbing;
    }

    .windowContent {
        grid-row: 3/5;
        grid-column: 2;
        background-color: white;
        color: black;
        border: 0.1vmin solid #004E98;
        border-radius: 0.2vmin;
        padding: 1vmin;
        overflow: auto;
    }

    .windowUp {
        background-color: #3D95FF;
        grid-row: 1;
        grid-column: 2;
        height: 0.2vmin;
    }

    .windowUp.resizer:hover {
        cursor: n-resize;
    }

    .windowDown {
        background-color: #001EA0;
        grid-row: 5;
        grid-column: 2;
        height: 0.2vmin;
    }

    .windowDown.resizer:hover {
        cursor: s-resize;
    }

    .windowLeft {
        grid-row: 2/5;
        grid-column: 1;
        width: 0.2vmin;
        background-color: #3D95FF;
    }

    .windowLeft.resizer:hover {
        cursor: w-resize;
    }

    .windowRight {
        background: rgb(0, 30, 160);
        background: linear-gradient(180deg, rgba(0, 30, 160, 1) 0%, rgba(0, 38, 172, 1) 100%);
        grid-row: 2/5;
        grid-column: 3;
        width: 0.2vmin;
    }

    .windowRight.resizer:hover {
        cursor: e-resize;
    }
}

#loginWindow {
    width: -moz-fit-content;
    width:fit-content;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    grid-template: 0.2vmin 2vmin auto auto 0.2vmin/ 0.2vmin auto 0.2vmin;

    .toolbar {
        display: grid;
        grid-template: 3vmin 2.5vmin 3.5vmin 1.5vmin 1vmin/ 10vmin 10vmin 10vmin 12vmin;
        align-items: center;
        justify-items: center;
        /* top | right | bottom | left */
        padding:0 0.5vmin 0 0.5vmin;
        background: rgb(161,190,247);
        background: radial-gradient(circle at 60%, rgba(161,190,247,1) 0%, rgba(98,134,225,1) 100%);        
        color: white;
        >*{
            width: 100%;
            height: 100%;
        }

        img {
            grid-column: 2;
            grid-row: 1/5;
        }

        p:nth-child(1) {
            grid-column: 1;
            grid-row: 3;
            font-size: 1vmin;
            align-content: end;
        }
        p:nth-child(2) {
            grid-column: 1;
            grid-row: 4;
            font-size: 1vmin;
        }
        p:nth-child(4) {
            grid-column: 3;
            grid-row: 1;
            font-size: 1vmin;
            align-content: end;
        }
        p:nth-child(5) {
            grid-column: 3;
            grid-row: 2;
            font-size: 2.5vmin;
            font-weight: bold;
        }
        p:nth-child(6) {
            grid-column: 4;
            grid-row: 1/3;
            font-size: 1vmin;
            padding-top: 2vmin;
            color:orangered;
            align-content: center;
        }
        p:nth-child(7) {
            grid-column: 3;
            grid-row: 3;
            padding-left: 1vmin;
            font-size: 1.5vmin;
        }

        p:last-of-type {
            grid-column: 4;
            grid-row: 4;
            font-size: 1.5vmin;
            text-align: end;
            align-content: end;
            width: 90%;
            height: 90%;
        }
        >div {
            margin-top: 0.5vmin;
            grid-column: 1/5;
            grid-row: 5;
            background: rgb(98,134,225);
            background: linear-gradient(90deg, rgba(98,134,225,0) 0%, rgba(255,155,58,1) 50%, rgba(98,134,225,0) 100%);
        }
    }

    .windowContent {
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        height:100%;
        background-color: #EFEBDE;
        border:0

    }
}

#loginForm {
    padding:1vmin;
    display: grid;
    grid-template: 3vmin 3vmin 3vmin/11vmin 10vmin 8vmin 9vmin;
    label {
        grid-column:1;
    }
    input {
        grid-column:2/4;
        border: 0.1vmin solid #7B9EBD;
        border-radius: 0.3vmin;
        height:1.8vmin;
        align-content: end;
    }
    button {
        grid-row:3;
        border: 0.1vmin solid #828c95;
        border-radius: 0.3vmin;
        width: 8vmin;
        align-self: center;
        height: 2vmin;

    }
    button:nth-of-type(1) {
        grid-column:3;


    }
    button:nth-of-type(2) {
        grid-column:4;
        margin-left: 1vmin;
    }
}

.selected {
    border: 0.1vmin dashed grey !important;
}

#desktopIcons {
    position: absolute;
    z-index: 1;
    width: -moz-fit-content;
    width: fit-content;
}

#desktopIcons>div {
    display: grid;
    grid-template: 8vmin 2vmin/ 10vmin;
    align-items: center;
    justify-items: center;
    border:0.1vmin solid #FFFFFF00;
    margin:1vmin;

    >img {
        width: 5vmin;
        height: 5vmin;
    }

    >span {
        font-size: 1.5vmin;
        color: white
    }
}

#taskBarIcons {
    padding-left: 1vmin;
    display: grid;
    grid-template-columns: 34% 33% 33%;

    >img {
        width: 2vmin;
        height: 2vmin;
    }
}

#startMenu {
    position: absolute;
    display: grid;
    grid-template: 7vmin 50vmin 5vmin / 19vmin 20vmin;
    bottom: 3.5vmin;
    left: 0;
    font-size: 1vmin;
    font-family: 'Tahoma', sans-serif;
    -webkit-box-shadow: 0.5vmin 0.4vmin 0.3vmin -0.1vmin rgba(0,0,0,0.5);
    -moz-box-shadow: 0.5vmin 0.4vmin 0.3vmin -0.1vmin rgba(0,0,0,0.5);
    box-shadow: 0.5vmin 0.4vmin 0.3vmin -0.1vmin rgba(0,0,0,0.5);
    border-top-left-radius: 1vmin;
    border-top-right-radius: 1vmin;
    border-left: 0.3vmin solid #1854C2;
    border-right: 0.3vmin solid #1854C2;
    img {
        width: 2.5vmin;
        height: 2.5vmin
    }
    button {
        background-color: rgb(0,0,0,0);
        border: 0;
        cursor: pointer;
        text-align: start;
        span {
            display:inline-block;
            padding-bottom: 0.4vmin;
        }
    }
    button:hover {
        background-color: #004E98;
        span {
            color:white !important;
        }
    }

    #startMenuTop {
        display: grid;
        background: rgb(71,146,236);
        background: linear-gradient(0deg, rgba(71,146,236,1) 0%, rgba(20,100,205,1) 100%);
        grid-template: 5.6vmin auto/ max-content auto;
        padding-top: 0.6vmin;
        border-top: 0.2vmin solid linear-gradient(0deg, rgba(116,171,232,1) 0%, rgba(34,92,197,1) 100%);
        img {
            margin-left: 0.6vmin;
            width: 5vmin;
            height: 5vmin;
            border: 0.2vmin solid white;
            border-radius: 0.2vmin;
            margin-right: 0.5vmin;
            box-shadow: 0.2vmin 0.2vmin 0.2vmin rgb(0 0 0 / 0.4);
        }
        span{
            font-size: 2.5vmin;
            align-content: center;
            text-shadow: 0.2vmin 0.2vmin 0.2vmin rgb(0 0 0 / 0.4);
        }
    }
    #startMenuTop>div {
        border-top: 0.2vmin solid #1B6BD1;
        background: rgb(98,134,225);
        background: linear-gradient(90deg, white 0%, #FF8E24 50%, #D3E5FA 100%);
        grid-column: 1/3;
        height: 0.2vmin;
        align-self: end;
    }
    #startMenuRight>div {
        height: 0.1vmin;
        width: 100%;
        background-color: grey;
        border: 0.1vmin solid #95BDEE;
    }

    #startMenuLeft {
        background-color: white;
        display:flex;
        flex-direction: column;
        span {
            font-size: 1.1vmin;
            padding-left: 0.5vmin;
            color: #000000;
        
        }

    }

    #startMenuRight {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 3.5vmin 3.5vmin 3.5vmin 3.5vmin 0.4vmin 3.5vmin 3.5vmin 3.5vmin 0.4vmin 3.5vmin 3.5vmin;
        background-color: #D3E5FA;
        border-left: 0.1vmin solid #95BDEE;
        img {
            padding-left: 0.5vmin;
            align-self: center;
            filter: drop-shadow(0.2vmin 0.2vmin 0.2vmin rgb(0 0 0 / 0.4));
        }
        span {
            color:#0A246A;
            font-size: 1.2vmin;
            font-weight: bold;
        }
        div ~ button span {
            font-weight: normal;
            font-size: 1vmin;
            padding-bottom: 0.7vmin;
        }
    }

    #startMenuTop,
    #startMenuBottom {
        grid-column: 1/3;
        color: white;
    }
    #startMenuBottom {
        display: flex;
        background: rgb(13,91,199);
        background: linear-gradient(0deg, rgba(13,91,199,1) 0%, rgba(66,138,227,1) 100%);
        justify-content: flex-end;
        align-items: center;
        align-content: center;
        img {
            width: 3vmin;
            height: 3vmin;
        }
        button {
            height:80%;
            margin-right:0.2vmin;
            width:-moz-fit-content;
            width:fit-content;
        }
        button:hover {
            background-color: rgb(242, 10, 10);
            border-radius: 0.5vmin;
        }
        span{
            display:inline-block;
            padding-bottom: 0.4vmin;
            font-size: 1.2vmin;
            color:white;
        }
    }
}
img {
    pointer-events: none;
}