
.start-menu{
    display: none;
    position: absolute;
    height: 36vw;
    width: 25vw;
    background-color: #101010;
    z-index: 5;
    transition: opacity .3s ease-in-out,
                margin .3s ease-in-out;
    opacity: 0;
    box-sizing: border-box;
}

.start-menu-main{
    display: flex;
    height: 100%;
    width: 10%;
    justify-content: space-between;
    flex-direction: column;
    box-sizing: border-box;

    & span{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
        & span{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            aspect-ratio: 1;
        }
        & span:hover{
            background-color: #414141;
        }
    }
}

.start-menu-apps{
    display: flex;
    flex-direction: column;
    /*background-color: rgba(0,0,0,0.7);*/
    height: 100%;
    width: 90%;
    box-sizing: border-box;
    padding: .75vw .5vw 1vw .5vw;
    gap: .2vw;
}

.start-menu-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(1, 1fr);
    gap: .2vw;
    overflow: hidden;
}

.start-menu-app{
    display: flex;
    position: relative;
    aspect-ratio: 1;
    background-color: #353535;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: end;
    box-sizing: border-box;
    padding: 5%;
    user-select: none;

    & span{
        display: flex;
        height: 60%;
        width: 60%;
        align-self: center;
        position: absolute;
        background-size: 90% 90%;
        background-position: 50% 50%;
        background-repeat: no-repeat;
    }
    &:hover{
        cursor: pointer;
        border: .15vw solid #9A9A9A;
    }
}

.start-menu-apps-name{
    display: flex;
    width: 100%;
    font-family: Arial;
    font-size: .8vw;
    margin-top: .6vw;
}

.start-menu-app-title{
    color: white;
    font-size: .75vw;
    font-family: Arial;
    position: absolute;
    text-shadow: -.04vw -.04vw 0 #000, .04vw -.04vw 0 #000, -.04vw .04vw 0 #000, .04vw .04vw 0 #000;
}

#start-menu-icon{
    width: 60%;
}

#start-menu-app-vegas span{
    background-image: url('../../static/Icons/Vegas.svg');
}

#start-menu-app-audacity span{
    background-image: url('../../static/Icons/Audacity.svg');
}

#start-menu-app-streamlabs span{
    background-image: url('../../static/Icons/StreamlabsOBS.svg');
}

#start-menu-app-obs span{
    background-image: url('../../static/Icons/OBS-Studio.svg');
}

#start-menu-app-paint span{
    background-image: url('../../static/Icons/Paintnet.svg');
}

#start-menu-app-photoshop span{
    background-image: url('../../static/Icons/Photoshop.svg');
}

#start-menu-app-gimp span{
    background-image: url('../../static/Icons/GIMP.svg');
}

#start-menu-app-inkscape span{
    background-image: url('../../static/Icons/Inkscape.svg');
}

#start-menu-app-vsc span{
    background-image: url('../../static/Icons/VisualStudioCode.svg');
}

#start-menu-app-notepad span{
    background-image: url('../../static/Icons/Notepad.svg');
}

#start-menu-app-cmd span{
    background-image: url('../../static/Icons/CMD.svg');
}

#start-menu-app-github span{
    background-image: url('../../static/Icons/GithubDesktop.svg');
}

#start-menu-app-steam span{
    background-image: url('../../static/Icons/Steam.svg');
}

#start-menu-app-epic span{
    background-image: url('../../static/Icons/EpicGames.svg');
}

#start-menu-app-afterburner span{
    background-image: url('../../static/Icons/Afterburner.svg');
}

#start-menu-app-minecraft span{
    background-image: url('../../static/Icons/Minecraft.svg');
}

#start-menu-app-live2d span{
    background-image: url('../../static/Icons/Live2D.svg');
}

#start-menu-app-unity span{
    background-image: url('../../static/Icons/UnityHub.svg');
}

#start-menu-app-blender span{
    background-image: url('../../static/Icons/Blender.svg');
}

#start-menu-app-cloudflare span{
    background-image: url('../../static/Icons/Cloudflare.svg');
}