#action-wrapper.hidden {
    opacity: 0%;
    display: block !important;
    transition: all .1s;

    transform: translate(0, 100%);
}

#action-wrapper {
    
    bottom: 0%;

    height: 150px;

    position: fixed;

    display: grid;
    grid-auto-flow: row;
    align-items:start;
    gap: 40px;

    text-align: center;

    color: var(--skill);

    opacity: 100%;
    transition: all .1s;
}

#action-wrapper > div {
    position: relative;

    padding: 5px;
    padding-left: 20px;
    padding-right: 20px;

    transition: all .2s;
}

#action-wrapper h1 {
    margin: 10px;
}

#actions-used {
    border: 3px solid var(--style);
    padding: 10px;
    margin-left: 10px;
    margin-right: -5px;
    border-radius: 20px;
    background-color: var(--style);
    color: antiquewhite;
    display: inline-grid;
}

#end-button {
    position: absolute;
    display: grid;
    align-items: center;

    bottom: -35px;
    left: 48%;
    transform: translate(-50%);

    border-radius: 20px;
    margin-left: 10px;
    color: antiquewhite;

    padding-left: 20px;
    padding-right: 20px;

    background-color: var(--skill);

    height: 50px !important;
    border: none;
}

#end-button h1 {
    margin: 0;
    text-wrap: nowrap;
}