.DesktopIcon{
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: fixed;
    top: 50vh;
    left: 50vw;
    width: 5em;
    height: 5em;
    background-image: linear-gradient( to bottom right, RGBA(151,195,195,0.2), RGBA(179,234,234,0.2), RGBA(151,195,195,0.2), RGBA(123, 151, 151,0.2)),
    linear-gradient(to top,rgba(255,255,255, 0.1),rgba(255,255,255, 0),  rgba(255,255,255, 0), rgba(255,255,255, 0), rgba(255,255,255, 0.1), rgba(255,255,255, 0.2));
    border-radius: 10%;
}
.DesktopIcon:hover{
    background-image: linear-gradient( to bottom right, RGBA(151,195,195,0.5), RGBA(179,234,234,0.5), RGBA(151,195,195,0.5), RGBA(123, 151, 151,0.5)),
    linear-gradient(to top,rgba(255,255,255, 0.2),rgba(255,255,255, 0),  rgba(255,255,255, 0), rgba(255,255,255, 0), rgba(255,255,255, 0.2), rgba(255,255,255, 0.4));
}
.DesktopIcon:active{
    background-image: linear-gradient( to bottom right, RGBA(151,195,195,0.8), RGBA(179,234,234,0.8), RGBA(151,195,195,0.8), RGBA(123, 151, 151,0.85)),
    linear-gradient(to top,rgba(255,255,255, 0.4),rgba(255,255,255, 0),  rgba(255,255,255, 0), rgba(255,255,255, 0), rgba(255,255,255, 0.4), rgba(255,255,255, 0.8));
}
.DekstopIconText{
    user-select: none;
    color: white;
    font: 0.8em "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.DesktopIconImage{
    width: 4em;
    height: 4em;
    background-size: contain;
}
.AppIcon{
    background-image: url("Assets/AppIcon.png");
}


.hotbar{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: end;
    position:fixed;
    bottom:0px;
    Z-index: 100;
    left:0px;
    width:100vw;
    height:6vh;
    box-shadow: #4a7ba1 0px -10px 30px;
    transition: 0.5s;
    background-image: linear-gradient( to bottom right, RGBA(151,195,195,0.5), RGBA(179,234,234,0.5), RGBA(151,195,195,0.5), RGBA(123, 151, 151,0.5)),
    linear-gradient(to top,rgba(255,255,255, 0.2),rgba(255,255,255, 0),  rgba(255,255,255, 0), rgba(255,255,255, 0), rgba(255,255,255, 0.2), rgba(255,255,255, 0.4));
}
.hotbar:hover{
    .StartButton {
        transform: translate(0, 0);
        width: 7vh;
        height: 7vh;
    }
    .StartButton:hover{
        transform: translate(0,-10px);
    }
    .StartButton:active {
        transform: translate(0, -5px);
    }
    .ResetButton {
        transform: translate(0, 0);
        width: 7vh;
        height: 7vh;
    }
    .ResetButton:hover{
        transform: translate(0,-10px);
    }
    .ResetButton:active {
        transform: translate(0, -5px);
    }
    .hotbarPrograms{
        padding-bottom: 5px;
        height:6.5vh;
    }
    .hotbarEssentialButtons{
        padding-bottom: 5px;
        height:7vh;
    }
    height:8vh;
    box-shadow: #a2d6ff 0px -10px 30px;
    background-image: linear-gradient( to bottom right, RGBA(151,195,195,0.5), RGBA(179,234,234,0.5), RGBA(151,195,195,0.5), RGBA(123, 151, 151,0.5)),
    linear-gradient(to top,rgba(255,255,255, 0.4),rgba(255,255,255, 0),  rgba(255,255,255, 0), rgba(255,255,255, 0), rgba(255,255,255, 0.4), rgba(255,255,255, 0.9));
}
.nonDraggableImage{
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.BackgroundImage{
    filter: drop-shadow(0px 5px 20px rgba(188, 242, 255,1)) opacity(80%);
    bottom:-10%;
    transition: .3s;
    user-select: none;
    position: Fixed;
    height:100vh;
    width: auto;
    left:40vw;
    transform: scaleX(100%) translateX(-50%);
    }
.MelonaBGWrapper{
    z-index: 3;
    user-select: none;
    position: Fixed;
    Width:70vh;
    height: 70vh;
    transition: .3s;
    Top: 20vh;
    left: 0vw;
}
.MelonaBGWrapper:active{
    .MelonaBackgroundImage {
        filter: drop-shadow(0px 15px 20px rgba(188, 242, 255,1)) opacity(100%) blur(0px);
        z-index: 2;
    }
    .BackgroundImage{
        z-index: 1;
        filter: drop-shadow(0px 0px 30px rgba(158, 212, 253,1)) opacity(70%) blur(3px);
    }
}
.MelonaBackgroundImage{
    user-select: none;
    position: Fixed;
    Width:70vh;
    height: auto;
    transition: .3s;
    Top: 20vh;
    left: 0vw;
    filter: drop-shadow(0px 0px 20px rgba(158, 212, 253,1)) opacity(70%) blur(3px);
    /*filter: sepia(100%) hue-rotate(180deg) opacity(0.3) saturate(300%);*/
}
.commentedout-MelonaBackgroundImage:hover {
    filter: sepia(100%) hue-rotate(180deg) opacity(0.5) saturate(300%);
}
.MelonaBackgroundImage:active {
    user-input: none;
    /*filter: sepia(0%) hue-rotate(0deg) opacity(1) saturate(100%);*/
    filter: drop-shadow(0px 15px 20px rgba(158, 212, 253,1)) opacity(100%) blur(0px);
}
.ResetButton{
    margin-left: 10px;
    transform: translate(7px, -5px);
    width: 5vh;
    transition:.5s;
    height: 5vh;
    background-image: url("Assets/ResetButton.png");
    background-size: cover;
}
.ResetButton:hover{
    transform: translate(7px, -10px);
    cursor: pointer;
    background-image: url("Assets/ResetButtonHover.png");
}
.ResetButton:active{
    transform: translate(7px, -5px);
    cursor: grabbing;
    background-image: url("Assets/ResetButtonClicked.png");
}
.StartButton{
    transform: translate(7px, -5px);
    width: 5vh;
    transition:.5s;
    height: 5vh;
    background-image: url("Assets/HomeButton.png");
    background-size: cover;
}
.StartButton:hover{
    transform: translate(7px, -10px);
    cursor: pointer;
    background-image: url("Assets/HomeButtonHover.png");
}
.NoAA{
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}
.StartButton:active{
    transform: translate(7px, -5px);
    cursor: grabbing;
    background-image: url("Assets/HomeButtonClicked.png");
}
.hotbarPrograms:hover{
    background-image: linear-gradient(to top,rgba(255,255,255, 0.4),rgba(255,255,255, 0.2),  rgba(255,255,255, 0.2), rgba(255,255,255, 0.2), rgba(255,255,255, 0.5), rgba(255,255,255, 0.7));
}
.hotbarPrograms{
    margin-bottom: 3px;
    border-radius: 15px;
    background-image: linear-gradient(to top,rgba(255,255,255, 0.2),rgba(255,255,255, 0.1),  rgba(255,255,255, 0.1), rgba(255,255,255, 0.1), rgba(255,255,255, 0.2), rgba(255,255,255, 0.4));
    transition:.5s;
    width:70vw;
    height:5vh;
}
.hotbarEssentialButtons{
    display: flex;
    justify-content: left;
    position:fixed;
    bottom: 0px;
    left:2vw;
    transition:.5s;
    width:24vh;
    height:5vh;
}
.Logo{

}
.TitleText{
    z-index: 5;
    position: fixed;
    color: transparent;
    left: 1vw;
    top: 0;
    font-size: 10em;
    transition: .3s;
    user-select: none;
    background-image: linear-gradient(to top right, rgba(158, 212, 253,0.05), rgba(158, 212, 253,0.4), rgba(158, 212, 253,0.25),rgba(158, 212, 253,0.1) );
    background-clip: text;
    text-shadow: rgba(158, 212, 253,0.8) 0px 10px 15px;
}
.TitleText:hover{
    background-image: linear-gradient(to top right, rgba(158, 212, 253,1), rgba(158, 212, 253,0.5), rgba(158, 212, 253,0.4),rgba(158, 212, 253,0.2) );
    text-shadow: rgba(158, 212, 253,1) 0px 10px 10px;
}
.backgroundRadial{
    position: fixed;
    background-image: radial-gradient(rgba(158, 212, 253,0.75),rgba(158, 212, 253,0),rgba(158, 212, 253,0));
    width: 60vw;
    height: 60vw;
    right: 0vw;
    top: -20vh;
}
.background{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    Z-index: 0;
    background-image: linear-gradient(to top right, #2d5371, #308dd5, #5fabe6, #308dd5);
}
body{
    background-color: #3c83a6;
    margin: 0px;
    padding: 0px;
}