html * {
    font-family: 'Segoe UI Variable Static Text', sans-serif ;
    color: white;
}

html {
    height: 100%;
    overflow: hidden;

    body {
        height: 100%;
        display: flex;
        align-items: center;
        background-image: radial-gradient(circle, #666697, #585881, #4b4b6b, #3e3e56, #323242);

        .window {
            background: url("background.jpg");
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            width: 1920px;
            max-width: 90vw;
            max-height: 90vh;
            aspect-ratio: 16/9;
            margin: 0 auto;
            border: .5rem solid black;
            border-radius: 0.5rem;
            display: flex;
            flex-direction: column-reverse;

            .exe {
                width: 40%;
                height: 30%;

                position: absolute;
                cursor: move;
                border-radius: 0.5rem;

                .header {
                    background-color: #333333;
                    width: 100%;
                    height: 30px;
                    display: flex;
                    justify-content: space-between;
                    padding-left: 5px;
                    padding-top: 5px;

                    .title {
                        font-family: 'Segoe UI Variable Static Text', sans-serif ;
                        font-size: .8rem;
                        padding: .3rem;
                        padding-left: 1rem;
                        padding-right: 2rem;
                        background: black;
                        border-radius: .4rem .4rem 0 0 ;
                    }

                    .buttons {
                        display: flex;
                        flex-direction: row;
                        > div {
                            background-size: contain;
                            background-repeat: no-repeat;
                        }

                        .close {
                            height: 100%;
                            width: 40px;
                            background-image: url("window-close.svg");
                        }

                        .min {
                            height: 100%;
                            width: 20px;
                            background-image: url("window-minimize.svg");
                            background-size: contain;
                        }
                    }
                }




                background: black;

                .screen {
                    padding: 0.5rem;
                    font-family: 'Consolas', serif;
                }
            }

            .taskbar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                position: relative;
                height: 39px;
                backdrop-filter: blur(25px) saturate(180%);
                -webkit-backdrop-filter: blur(25px) saturate(180%);
                background-color: rgba(20, 20, 20, 0.3);
                border-top: 1px solid rgba(209, 213, 219, 0.3);
                text-align: center;
                vertical-align: middle;
                font-family: cursive;
                gap: 0.4rem;
                padding: 4px 1rem;

                .item {
                    height: 100%;
                    border-radius: 0.2rem;
                    display: inline-flex;
                    &:hover {
                        background-color: rgba(100, 100, 100, 0.4) !important;
                    }
                }

                .programs {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;

                    .program {
                        width: 39px;
                        height: 39px;
                        border: none !important;
                        transition: 0.1s ease-in-out;
                    }

                    .program__start {
                        background: url("start.webp");
                        background-size: 26px;
                        background-repeat: no-repeat;
                        background-position: center;
                        display: block;
                        position: relative;

                        &:active {
                            background-size: 22px;
                        }
                    }

                    .program__explorer {
                        background: url("Explorer.ico");
                        background-size: 26px;
                        background-repeat: no-repeat;
                        background-position: center;
                        display: block;
                        position: relative;

                        &:active {
                            background-size: 22px;
                        }
                    }

                    .program__chrome {
                        background: url("chrome.ico");
                        background-size: 30px;
                        background-repeat: no-repeat;
                        background-position: center;
                        display: block;
                        position: relative;


                        &:active {
                            background-size: 26px;
                        }
                    }

                    .program__terminal {
                        background: url("terminal.ico");
                        background-size: 26px;
                        background-repeat: no-repeat;
                        background-position: center;
                        display: block;
                        position: relative;


                        &:active {
                            background-size: 26px;
                        }
                    }
                }

                .system {
                    display: flex;

                    .notifications {
                        align-content: center;
                        padding-left: .5rem;
                        padding-right: .5rem;
                        border-radius: 0.2rem;
                        height: 39px;
                        .datetime {
                            font-size: 12px;
                            line-height: 14px;
                            text-align: right;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;

                            span {
                                display: block;
                                padding-bottom: 2px;
                            }
                        }

                        &:hover {
                            background-color: rgba(100, 100, 100, 0.4);
                        }
                    }
                }
            }
        }
    }
}