.hotbar{
    overflow: clip;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 10;
    left: 0;
    width: 100vw;
    height: 5vh;
    background: #0e4044;
    transition: ease-in-out .5s;
    box-shadow: #051a1c 0px 5px 10px;
}
.hotbarGradientEnd{
    transform: translate(-60%, -6%);
    position: fixed;
    left:100vw;
    top: 0;
    width: 370%;
    height: auto;
    transition: ease-in-out .5s;
    filter: invert(100%);
}
.hotbarGradient{
    transform: translate(-25%, -6%);
    position: fixed;
    left: 0;
    top: 0;
    width: 250%;
    height: auto;
    transition: ease-in-out .5s;
    z-index: -1;
    filter: invert(100%);
}
.coralPixels{
    user-select: none;
    font-family: "Coral Pixels", serif;
    font-weight: 400;
    font-style: normal;
    color: white;
    font-size: xx-large;
    filter: invert(100%);
}
.hotbarButton{
    font-size: large;
    transition: ease-in-out .5s;
    margin: 1em;
    border-bottom: black solid 4px;
    border-bottom-width: 0;
}
.ButtonContainer{
    margin-right: 1em;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}
.Title{
    transition: ease-in-out .5s;
    margin-left: 2em;
}

@media only screen and (max-aspect-ratio: 4.99/4) {
    .hotbarButton:hover{
        cursor: pointer;
        transform: translateY(-25%);
        border-bottom: black solid 4px;
    }
    .hotbar:hover {
        box-shadow: #051a1c 0px 15px 10px;

        .Title {

            .hotbarGradientEnd:hover {
                transform: translate(-80%, -7%);
            }

            .hotbarGradientEnd.active {
                transform: translate(-80%, -7%);
            }
        }
    }
}
@media only screen and (min-aspect-ratio: 5/4) {
    .hotbarButton:hover{
        cursor: pointer;
        font-size: xxx-large;
        transform: translateY(-25%);
        border-bottom: black solid 4px;
    }
    .hotbar:hover{
        box-shadow: #051a1c 0px 15px 10px;
        height: 10vh;
        .Title{
            margin-left: 1em;
            font-size: xxx-large;
            .hotbarGradient{
                width: 200%;
            }
            .hotbarGradientEnd{
                width: 370%;
                transform: translate(-55%, -7%);
            }
            .hotbarGradientEnd:hover{
                transform: translate(-80%, -7%);
            }
            .hotbarGradientEnd.active{
                transform: translate(-80%, -7%);
            }
        }
        .ButtonContainer{
            .hotbarButton{
                margin: 1.5em;
                font-size: xx-large;
            }
        }

    }
}