@font-face {
    font-family: "MS Sans Serif";
    src: url(../fonts/ms-sans-serif-1.otf);
}

.hidden{
    display: none !important;
}

*{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    box-sizing: border-box;
}
html, body{

    --blue-bar-gradient: linear-gradient(0deg, rgba(25,65,165,1) 0%, rgba(30,80,196,1) 5%, rgba(35,91,217,1) 9%, rgba(35,92,219,1) 81%, rgba(36,93,215,1) 83%, rgba(40,106,221,1) 87%, rgba(48,123,229,1) 89%, rgba(73,147,230,1) 92%, rgb(32, 82, 184) 100%);
    --tab-gradient: linear-gradient(0deg, #4992F7 0%, #3b7bd5 30%, #3b7bd5 70%, #3980F4 100%);
    --tool-bar-gradient: linear-gradient(0deg, rgba(56,136,233,1) 0%, rgba(22,173,240,1) 3%, rgba(25,185,243,1) 6%, rgba(21,154,232,1) 9%, rgba(19,153,235,1) 12%, rgba(13,140,234,1) 15%, rgba(13,140,234,1) 85%, rgba(19,153,235,1) 88%, rgba(21,154,232,1) 91%, rgba(25,185,243,1) 94%, rgba(22,173,240,1) 97%, rgb(24, 63, 141) 100%);
    
    width: 100%;
    height: 100vh;

    background: url("../assets/background.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    
    /* background: none;
    background-color: rgb(21, 126, 34); */

    overflow: hidden;

}

/* ############### TASK BAR ############### */
/* #region */
.task-bar{

    /* SIZING */
    width: 100%;
    height: 3vw;
    /* max-height: 7%;
    min-height: 5%; */

    /* POSITION */
    position: relative;
    top: calc(100vh - 3vw);
    z-index: 2;

    /* STYLING */
    background: var(--blue-bar-gradient);
    box-shadow: inset 0px -2px 3px 0px rgba(0,0,0,0.75);

    /* ALIGNMENT */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .start-button{

        /* SIZING */
        height: 100%;
        width: fit-content;
        
        /* STYLING */
        border: none;
        outline: none;
        background: none;
    }
        .start-button-img{
            /* SIZING */
            height: 100%;
            width: fit-content;
        }

    .tool-bar{
        /* SIZING */
        width: 10%;
        height: 100%;

        /* STYLING */
        background: var(--tool-bar-gradient);
        box-shadow: inset 0px -2px 4px 0px rgba(0,0,0,0.75), inset 4px 0px 3px 0px rgb(9, 192, 238);;

        /* BORDER */
        border: 1.5px solid #0955b9;
        border-left: 1.5px solid #092e51;
        border-right: 0;

        /* POSITION */
        padding: 0vw 1vw;
        display: flex;
        align-items: center;
        justify-content: end;
    }
        #tool-bar-time{

            /* FONT */
            font-size: .75vw;
            font-family: "MS Sans Serif";
            font-weight: 100;

            /* COLOR */
            color: white;
        }

    .tab-wrapper{
        width: 100%;
        height: 100%;
        padding: 0 1vw;
        display: flex;
        align-items: center;

    }

    .tab-item{

        --tab-hover-gradient: linear-gradient(0deg, #4c94ed 0%,  #55A1FF 100%);

        background: var(--tab-gradient);
        width: 19%;
        margin-top: .3vw;
        margin-left: .2vw;
        height: 83%;
        padding: 0 1vw;
        display: flex;
        align-items: center;
        justify-content: start;
        color: white;
        border-radius: .3vw;

        border: 1px solid #0955b9;
        border-left: 1px solid #092e51;
        border-right: 0;
        border-bottom: 0;
        box-shadow: inset .2vw .2vw .3vw -.3vw rgba(255,255,255,0.75), inset -.2vw -.3vw .3vw -.3vw rgba(5, 0, 0, 0.97), .1vw .08vw .1vw .01vw rgba(0,0,0,0.50);
    }
        .tab-item-active{
            background: #2E50B0;
            box-shadow: inset .2vw .2vw .3vw -.3vw rgba(5, 0, 0, 0.97), inset -.2vw -.2vw .3vw -.3vw rgba(255,255,255,0.50), .1vw .08vw .1vw .01vw rgba(0,0,0,0.50);
        }

        .tab-item-active-hover{
            background: #326EE9;
            box-shadow: inset .2vw .2vw .3vw -.3vw rgba(5, 0, 0, 0.97), inset -.2vw -.2vw .3vw -.3vw rgba(255,255,255,0.50), .1vw .08vw .1vw .01vw rgba(0,0,0,0.50);
        
        }

        .tab-item-hover{
            background: var(--tab-hover-gradient);
            box-shadow: inset .2vw .2vw .3vw -.3vw rgba(5, 0, 0, 0.97), inset -.2vw -.2vw .3vw -.3vw rgba(255,255,255,0.50), .1vw .08vw .1vw .01vw rgba(0,0,0,0.50);
        }

    .tab-icon{
        height: 70%;
    }

    .tab-name{
        padding-left: .5vw;
        font-family: "MS Sans Serif";
        width: 100%;
        height: 50%;
        font-size: .9vw;
        letter-spacing: .05vw;
        white-space: nowrap;
        text-overflow: clip;

        display: flex;
        align-items: center;
        justify-content: start;
    }

/* #endregion */

/* ############### START MENU ############### */
/* #region */
.start-wrapper{

    /* POSITION */
    position: relative;
    top: 100vh;
    /* top: 10vh;
    left: 50vh; */
    z-index: 1;

    /* SIZING */
    width: 22vw;
    height: 30vw;

    /* ALIGNMENT */
    display: flex;
    flex-direction: column;
}

    @keyframes openStartMenu{
        0%{
            top: 100vh;
        }
        100%{
            top: calc(100vh - 36vw);
        }
    }

    @keyframes closeStartMenu{
        0%{
            top: calc(100vh - 36vw);
        }
        100%{
            top: 100vh;
        }
    }

    .start-top{

        /* COLOR */
        background: linear-gradient(180deg,#63baf8,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%);
        
        /* BORDER */
        border-top: .15vw solid #0050ee;
        border-left: .15vw solid #0050ee;
        border-right: .15vw solid #0050ee;
        border-top-left-radius: .8vw;
        border-top-right-radius: .8vw;

        /* SIZING */
        width: 100%;
        height: 13%;

        /* ALIGNMENT */
        display: flex;
        align-items: center;
    }

        #start-pfp{
            height: 70%;

            margin: 0 .5vw;

            border-radius: .4vw;
        }

        #start-username{
            /* FONT */
            font-family: 'Trebuchet MS';
            font-size: 1vw;
            font-weight: 700;
            text-shadow: .075vw .075vw #0f1089;

            /* COLOR */
            color: white;
        }

    .start-bottom{

        /* COLOR */
        background: linear-gradient(0deg,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 100%);
        
        /* BORDER */
        border-left: .15vw solid #0050ee;
        border-right: .15vw solid #0050ee;

        /* SIZING */
        width: 100%;
        height: 10%;

        /* POSITION */
        display: flex;
        align-items: center;
        justify-content: end;
    }

        .start-bottom-login{
            /* SIZING */
            height: 70%;
            width: 22%;

            /* POSITION */
            display: flex;
            align-items: center;
            margin-right: .2vw;

            /* FONT */
            font-size: .6vw;
            font-family: "MS Sans Serif";
            letter-spacing: .05vw;

            /* COLOR */
            color: white;
        }
        .start-bottom-login:hover, .start-bottom-power:hover{
            background-color: #316AC5;
            cursor: pointer;
            border-radius: .2vw;
        }
        .start-bottom-icon{
            height: 75%;
            margin: 0 .4vw;
        }
        .underline{
            text-decoration: underline;
            text-underline-offset: .1rem;
        }

        .start-bottom-power{
            /* SIZING */
            height: 70%;
            width: 38%;

            /* POSITION */
            display: flex;
            align-items: center;
            margin-right: .5vw;

            /* FONT */
            font-size: .6vw;
            letter-spacing: .05vw;
            font-family: "MS Sans Serif";

            /* COLOR */
            color: white;
        }

    .start-top-line{
        /* SIZING */
        width: 100%;
        height: .15vw;

        /* STYLING */
        background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(228,165,14,1) 40%, rgba(228,165,14,1) 60%, rgba(210,229,250,1) 100%);
        
        /* BORDER */
        border-left: .15vw solid #0050ee;
        border-right: .15vw solid #0050ee;
    }

    .start-middle{

        /* SIZING */
        width: 100%;
        height: 77%;

        /* ALIGNMENT */
        display: flex;

        /* BORDER */
        border-left: .15vw solid #0050ee;
        border-right: .15vw solid #0050ee;

    }

        #start-menu-info{
            /* SIZING */
            height: fit-content;
            max-width: 15vw;
            /* FONT */
            overflow-wrap: break-word;
            font-size: .4vw;
            font-family: "MS Sans Serif";
            letter-spacing: .04vw;
            font-weight: 600;
            /* STYLING */
            border: .07vw solid black;
            background-color: #FFFFE1;
            color: black;
            /* POSITION */
            position: fixed;
            padding: .3vw;
            z-index: 1;
            left: 5vw;
        }

        @keyframes fade-in{
            from{
                opacity: 0%;
            }
            to{
                opacity: 100%;
            }
        }

        .start-middle-line{
            width: 90%;
            height: .05vw;

            margin-top: 5%;

            background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(166,166,166,1) 30%, rgba(166,166,166,1) 70%, rgba(210,229,250,0) 100%);
        }

        .start-left{

            /* COLOR */
            background-color: #FFFFFF;

            /* SIZING */
            width: 52%;
            height: 100%;

            /* BORDER */
            border-right: .1vw solid #A7BCD9;

            /* POSITION */
            display: flex;
            flex-direction: column;
            align-items: center;

        }

            .start-left-item{
                /* SIZING */
                width: 95%;
                height: 2vw;

                /* POSITION */
                margin-top: 5%;
                display: flex;
                align-items: center;
                
            }

                .start-left-item:hover{
                    background-color: #316AC5;
                    color: white;

                    cursor: pointer;

                    border-radius: .1vw;
                }

                .start-left-item-icon{
                    height: 90%;

                    margin-right: .4vw;
                    margin-left: .1vw;
                }

                .start-left-text-wrapper{
                    width: calc(100% - 2vw);

                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                }

                    .start-left-title{
                        font-size: .7vw;
                        font-family: "MS Sans Serif";
                        letter-spacing: .04vw;
                        font-weight: 600;

                        margin-bottom: .2vw;
                    }
                    .start-left-desc{
                        font-size: .5vw;
                        font-family: "MS Sans Serif";
                    }
                
        .start-right{

            /* COLOR */
            background-color: #D2E5FA;

            /* SIZING */
            width: 48%;
            height: 100%;

            /* BORDER */
            border-left: 1px solid #A7BCD9;

            display: flex;
            flex-direction: column;
            align-items: center;
        }

            .start-right-item{
                /* SIZING */
                width: 95%;
                height: 1.5vw;

                /* POSITION */
                margin-top: 5%;
                display: flex;
                align-items: center;
            }
                .start-right-item-icon{
                    height: 90%;

                    margin-right: .3vw;
                    margin-left: .1vw;
                }

                .start-right-item:hover{
                    background-color: #316AC5;
                    color: white;

                    cursor: pointer;

                    border-radius: .1vw;
                }

                .start-right-title{
                    font-size: .6vw;
                    font-family: "MS Sans Serif";
                    letter-spacing: .04vw;
                }
/* #endregion */

/* ################################# WINDOW ################################# */
/* #region */
.window{
    /* POSITION */
    position: absolute;
    top: calc(75% - 30vw);
    left: calc(75% - 50vw);
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* SIZING */
    width: 50vw;
    height: 30vw;

    /* BORDER */
    box-shadow:inset -.1vw -.1vw #0a0a0a,inset .1vw .1vw #dfdfdf,inset -.2vw -.2vw grey,inset .2vw .2vw #fff;
    box-shadow:inset -.1vw -.1vw #00138c,inset .1vw .1vw #0831d9,inset -.2vw -.2vw #001ea0,inset .2vw .2vw #166aee,inset -3px -3px #003bda,inset 3px 3px #0855dd;
    border-top-left-radius: .8vw;
    border-top-right-radius: .8vw;

    background-color: #FFFFE1;
}
    .window-title-bar{
        /* SIZING */
        height: 2.5vw;
        width: 100%;

        /* COLOR */
        background: linear-gradient(180deg,#63baf8,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%);
        
        /* BORDER */
        border-top: .15vw solid #0050ee;
        border-left: .15vw solid #0050ee;
        border-right: .15vw solid #0050ee;
        border-top-left-radius: .8vw;
        border-top-right-radius: .8vw;

        /* POSITION */
        display: flex;
        align-items: center;
        justify-content: left;
        padding: 0 .5vw;

        cursor: pointer;

        container-type: size;

    }
    #window-title-icon{
        height: 70%;
    }
    .window-title-text{
        /* FONT */
        font-family: 'Trebuchet MS';
        text-shadow: .1vw .1vw #0f1089;
        overflow: hidden;
        text-wrap: nowrap;
        font-size: 1.1vw;

        width: 85%;

        margin-left: .4vw;

        color: white;
    }
    .window-title-controls{
        /* SIZING */
        height: 100%;
        width: 13%;

        /* POSITION */
        display: flex;
        align-items: center;
        justify-content: end;
    }
        .window-control-button{
            height: 80%;

            margin-left: .2vw;
        }
            .window-control-button:active{
                transform: scale(0.90);
            }
    .window-content{

        /* SIZING */
        width: calc(100% + .02vw);
        height: 100%;

        /* POSITION */
        display: flex;
        justify-content: center;
        padding: 0 .25vw;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;

    }
    .greeting{
        font-size: 2vw;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .window-option-bar{
        /* SIZING */
        width: 100%;
        height: 4%;

        /* BORDER */
        border-bottom: .10vw solid #c7c3b1;
        box-shadow: 0 .03vw 0 #ebe9e0;

        /* POSITION */
        display: flex;
        justify-content: left;
        align-items: center;
        container-type: size;
    }

    .window-option-tab{
        width: .3%;
        height: 75%;
        background-color: #fafaf1;
        margin-left: 25cqh;
        border: 1px solid rgb(231, 230, 230);
        border-bottom: .10vw solid #c7c3b1;
        box-shadow: .1vw .1vw 0 #cccac2;
    }

    .window-option-item{
        height: 75%;

        width: fit-content;

        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 20cqh;
        font-family: "MS Sans Serif";
        font-size: 60cqh;

        margin: 20cqh;
        cursor: pointer;
    }

    .window-option-item:hover{
        box-shadow: .1vw .1vw 0 #cccac2;
        border-bottom: .10vw solid #c7c3b1;
    }

    @keyframes maximizeWindow {
        from{
            top: calc(75% - 30vw);
            left: calc(75% - 50vw);
            width: 50vw;
            height: 30vw;
        }
        to{
            width: 100vw;
            height: calc(100vh - 3vw);
            top: 0px;
            left: 0px;
        }
    }
    @keyframes restoreDownWindow{
        from{
            width: 100vw;
            height: calc(100vh - 3vw);
            top: 0px;
            left: 0px;
        }
        to{
            top: calc(75% - 30vw);
            left: calc(75% - 50vw);
            width: 50vw;
            height: 30vw;
        }
    }

/* #endregion */