*{
    font-size: 2vh;
}
html{
    padding: 0;
}
#Display{
    display: flex;
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    position: relative;
    justify-content: center;    
    overflow: hidden;
}
#Desktop{
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to top, black, rgb(175, 90, 0));
    margin: 0;
    padding: 0;
    position: relative;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#Taskbar{
    display: flex;
    position: absolute;
    margin: 5vh;
    height: 7vh;
    padding: 1vh;
    width: 90%;
    border: 0.1vh rgba(255, 255, 255, 0.132) solid;
    border-radius: 9999999px;
    bottom: 0%;
    background-color: rgb(0, 0, 0);
    align-items: center;
    justify-content: space-between; 
    opacity: 0.4;
    z-index: 100000;
}
.FileExplorerIcon{
    position: relative;
    width: 5vh;
    height: 5vh;
    margin: 0%;
    z-index: 100001;
}
.FileExplorerSA{
    position: absolute;
    margin: 0.5vh;
    top: 0%;
    width: 3vh;
    height: 1vh;
    clip-path: polygon(0% 0%, calc(200%/3) 0%, 100% 100%, 0% 100%);
    background-color: rgb(112, 65, 0);
    border-radius: 1vh;  
}
.FileExplorerSB{
    position: absolute;
    margin: 0.5vh;
    bottom: 0%;
    width: 4vh;
    height: 4vh;
    clip-path: polygon(0% 20%, 50% 20%, 75% 0%, 100% 0%, 100% 100%, 0% 100%);
    background-color: rgb(191, 108, 0);  
    border-radius: 1vh;  
}
.CalculatorIcon{
    width: 5vh;
    height: 5vh;
    z-index: 100001;
}
.CalcBody{
    position: relative;
    width: 4vh;
    height: 4vh;
    border-radius: 1vh;
    background-color: rgb(169, 90, 0);
    margin: 0.5vh;
}
.CalcScreen{
    position: absolute;
    background-color: rgb(255, 238, 111);
    margin: 0.5vh;
    top: 0%;
    width: 3vh;
    height: 1vh;
    border-radius: 9999px;
}   
.CalcBGrid{
    position: absolute;
    bottom: 0%;
    align-items: center;
    margin: 0.5vh;
    transform: translateY(0.2vh);
}
.CalcBRow{
    display: flex;
    justify-content: space-between;
}
.CalcB{
    height: 0.8vh;
    width: 0.8vh;
    background-color: rgb(67, 44, 0);
    border-radius: 0.5vh;
    margin: 0.1vh;
}
.SettingsIcon{
    height: 5vh;
    width: 5vh;
    z-index: 100001;
}
.SettingsBody{
    display: flex;
    height: 4vh;
    width: 4vh;
    margin: 0.5vh;
    border-radius: 1vh;
    background-color: rgb(111, 61, 0);
    justify-content: space-around;
    flex-direction: column;
}
.SettingsSe1{
    position: relative;
    background-color: white;
    height: 1vh;
    width: 3vh;
    border-radius: 999px;
    margin-left: 0.5vh;
    margin-right: 0.5vh;
}
.SettingsSe2{
    position: relative;
    background-color: white;
    height: 1vh;
    width: 3vh;
    border-radius: 999px;
    margin-left: 0.5vh;
    margin-right: 0.5vh;
}
.SettingsSeDi1{
    position: absolute;
    height: 0.7vh;
    width: 0.7vh;
    right: 0%;
    margin: 0.15vh;
    background-color: rgb(144, 79, 0);
    border-radius: 9999px;
}
.SettingsSeDi2{
    position: absolute;
    height: 0.7vh;
    width: 0.7vh;
    left: 0%;
    margin: 0.15vh;
    background-color: rgb(144, 79, 0);
    border-radius: 9999px;
}
.TextEditorIcon{
    height: 5vh;
    width: 5vh;
    z-index: 100001;
}
.TextEditorBody{
    display: flex;
    height: 4vh;
    width: 4vh;
    background-color: rgb(182, 94, 0);
    color: white;
    font-size: 3vh;
    align-items: center;
    justify-content: space-around;
    border-radius: 1vh;
    margin: 0.5vh;
    user-select: none;
}
.ClockIcon{    
    position: relative;
    height: 5vh;
    width: 5vh;
    z-index: 100001;
}
.ClockBody{
    position: absolute;
    height: 4vh;
    width: 4vh;
    border-radius: 1vh;
    background-color: rgb(255, 166, 57);
    margin: 0.5vh;
}
.ClockLines{
    position: absolute;
    height: 3vh;
    width: 3vh;
    padding: 0.5vh; 
}
.TerminalIcon{
    height: 5vh;
    width : 5vh;
    z-index: 100001;
}
.TerminalBody{
    display: flex;
    height: 4vh;
    width : 4vh;
    background-color: rgb(128, 72, 0);
    margin: 0.5vh;
    font-size: 2vh;
    color: white;
    border-radius: 1vh;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    user-select: none;
}
.CalendarIcon{
    height: 5vh;
    width: 5vh;
    z-index: 100001;
}
.CalendarBody{
    height: 4vh;
    width: 4vh;
    margin: 0.5vh;
}
.CalendarIconTop{
    height: 1.5vh;
    width: 4vh;
    border-radius: 1vh 1vh 0 0;
    background-color: rgb(169, 99, 0);
}
.CalendarIconBottom{
    position: relative;
    height: 2.5vh;
    width: 4vh;
    border-radius: 0 0 1vh 1vh;
    background-color: rgb(255, 204, 133);
}
.CalendarIconRow{
    position: absolute;
    height: 2vh;
    width: 3vh;
    margin: 0.5vh;
    align-items: center;
}
.CalendarIconRow line{
    stroke: rgb(221, 129, 0);
}
#Blueprints{
    display: none;
}
#TaskApps{
    display: flex;
    position: absolute;
    left: 50%;
    transform: translateX(-50%) ;
}
#Date, #Time{
    color: rgba(255, 255, 255, 0.567);
    font-size: 2vh;
}
#TDInfo{
    display: flex;
    position: absolute;
    left: 5vh;
    flex-direction: column;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.Window{
    height: 75vh;
    width: 75vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 70vh;
    min-height: 70vh;
}
.TitleBar{
    display: flex;
    top: 0%;
    height: 6vh;
    width: 100%;
    background-color: rgba(255, 255, 255);
    border-radius: 1vh 1vh 0 0;
    border: 0.4vh solid white;
    box-sizing: border-box;
    justify-content: space-between;
    opacity: 0.83;
}
.AppArea{
    bottom: 0%;
    width: 100%;
    height: calc(100% - 6vh);
    background-color: rgb(255, 255, 255);
    border-radius: 0 0 1vh 1vh;
    overflow: hidden;
}
.Close{
    display: flex;
    height: 5.35vh;
    width: 7vh;
    font-size: 3vh;
    justify-content: center;
    user-select: none;
    border-radius: 0 0.6vh 0 0;
}
.Close:hover{
    background-color: rgba(255, 0, 0, 0.51);
    transition: 300ms;
}
.Title{
    display: flex;
    height: 5.35vh;
    width: calc(100% - 7vh);
    border-radius: 0.6vh 0 0 0;
    justify-content: left;
    align-items: center;
}
.TopHRL, .BottomHRL{
    position: absolute;
    height: 1vh;
    width: 100%;
    cursor: n-resize;
}
.RightVRL,.LeftVRL{
    position: absolute;
    height: calc(100% - 5vh);
    width: 1vh;
    cursor: e-resize;
}
.TopHRL{
    top: -1vh;
}
.BottomHRL{
    bottom: -1vh;
}
.RightVRL{
    right: -1vh;
    bottom: 0%;
}
.LeftVRL{
    left: -1vh;
    bottom: 0%;
}
.TitleText{
    font-size: 3vh;
    align-items: center;
    user-select: none;
}
.FileExplorerApp{
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: rgb(255, 255, 255);
    box-sizing: border-box;
}
.FileAddressBar{
    display: flex;
    width: 100%;
    height: 7.5vh;
    border: 0.2vh solid rgb(81, 81, 81);
    border-radius: 0 0 0.5vh 0.5vh;
    box-sizing: border-box;
    justify-content: right;
}
.FileMain{
    display: flex;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}
.MainFolders{
    width: 40%;
    height: calc(100% - 9.5vh);
    max-width: 30vh;
    border: 0.2vh solid rgb(81, 81, 81);
    border-radius:0.5vh;
    margin: 1vh;
    box-sizing: border-box;
    padding: 1vh;
    overflow: hidden;
}
.FolderView{
    width: 100%;
    height: calc(100% - 9.5vh);
    box-sizing: border-box;
    border: 0.2vh solid rgb(81, 81, 81);
    border-radius: 0.5vh;
    padding: 1vh;
    margin: 1vh;
}
.PreviousFolder{
    display: flex;
    height: 5vh;
    width: 8vh;
    border:0.2vh solid rgb(81, 81, 81);
    border-radius: 0.5vh;
    margin: 1.25vh;
    align-items: center;
    justify-content: center;
}
.Desktop, .Documents, .CDrive, .System, .Notes, .Projects{
    height: 3vh;
    align-content: center;
    color: rgb(124, 124, 124);
    border-radius: 0.5vh;
}
.Desktop:hover, .Documents:hover, .CDrive:hover, .System:hover, .Notes:hover, .Projects:hover{
    color: black;
    background-color: rgb(214, 214, 214);
}
.CreationButtons{
    height: 100%;
    width: 40vh;
    display: flex;
    justify-content: center;
    gap: 1vh;
}
.NewTextFile, .NewFolder{
    width: 15vh;
    height: 5vh;
    border-radius: 0.5vh;
    border: 0.1vh solid rgb(81, 81, 81);
    padding: 0%;
    margin: 1.25vh 0 1.25vh 0;
}
.FileAddress{
    display: flex;
    width: calc(100% - 52.5vh);    
    height: 5vh;
    border-radius: 0.5vh;
    border: 0.1vh solid rgb(81, 81, 81);
    box-sizing: border-box;
    max-width: 50vw;
    padding: 1vh 1vh 1vh 5vh;
    align-content: center;
    justify-content: left;
    margin: 1.25vh;
}
input[type="range"]{
    appearance: none;
    -webkit-appearance: none;
    height: 1vh;
    width: 30vh;
    border-radius: 9999px;
}
input[type="range"]::-webkit-slider-thumb{
    appearance: none;
    -webkit-appearance: none;
    height: 2vh;
    width: 2vh;
    background-color: wheat;
    border:0.2vh solid rgb(139, 139, 139);
    border-radius: 99999px;
}
.TaskTransparencySetting, .BackgroundSetting, .TitleColorSetting, .TitleTransparencySetting, .TDSetting, .TaskPositionSetting, .ResetSettings{
    display: flex;
    background-color: rgb(197, 132, 72);
    padding: 5vh;
    width: calc(100% - 10vh);
    margin: 5vh;
    border-radius: 5vh;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
}
.SettingsApp{
    background-color: rgb(108, 73, 40);
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}
.TaskColorSet{
    display: flex;
    flex-direction: column;
}
.TaskRedSlider{
    background: linear-gradient(to right, black, red);
}
.TaskGreenSlider{
    background: linear-gradient(to right, black, green);
}
.TaskBlueSlider{
    background: linear-gradient(to right, black, blue);
}
.TaskTransparencySlider{
    background-image: linear-gradient(to right, rgb(221, 111, 0),rgb(100, 50, 0) );
}
.TDCheck{
    appearance: none;
    height: 2vh;
    width: 2vh;
    border-radius: 999999999px;
    background-color: rgb(108, 73, 40);
    position: relative;
    margin: 1vh;
}
.TDCheck::after{
    content: "";
    height: 60%;
    width: 60%;
    position: absolute;
    background-color: rgb(197, 132, 72);
    opacity: 0;
    border-radius: 999999999px;
    margin: 20%;
}
.TDCheck:checked::after{
    opacity: 1;
}
.TerminalApp{
    background-color: black;
    color: rgb(255, 255, 255);
    height: 100%;
    width: 100%;
}
.TerminalInstructions{
    color: goldenrod;
    margin: 1vh;
}
.TerminalIO{
    margin: 1vh;
    white-space: pre-wrap;
}
.TerminalInputSection{
    color: rgb(133, 133, 255);
    margin: 1vh;
}
.TerminalInput{
    appearance: none;
    background-color: black;
    width: auto;
    border: none;
    border-radius: 0;
    outline: none;
    color: rgb(133, 133, 255);
}
.ClockApp{
    background-color: goldenrod;
    color: black;
    height: 100%;
    width: 100%;
}
.ClockInfo{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.ClockTime{
    font-size: 20vh;
}
.ClockDate{
    font-size: 12vh;
}
.CalculatorApp{
    background-color: antiquewhite;
    height: 100%;
    width: 100%;
    position: relative;
}
.CalculatorGrid{
    position: absolute;
    display: grid;
    width: 100%;
    height: 60%;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 25% 25% 25% 25%;
    bottom: 0;
}
.CalculatorGrid div{
    display: flex;
    border: 0.05vh solid black;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0);
}
.CalculatorGrid div:hover{
    background-color: rgba(0, 0, 0, 0.186);
    transition: 200ms;
}
.Result{
    font-weight: bold;
    font-size: 10vh;
}