#name-box {
    display: none;
}

.button-duration {
    border-width: 2px;
    border-radius: 0.5rem;
    font-weight: bolder;
}

    .button-duration.on {
        color: #FFF;
        background-color: #695dfb;
    }

        .button-duration.on:hover {
            color: #695dfb;
            background-color: #FFF;
        }

    .button-duration:disabled {
        filter: grayscale(1);
    }

        .button-duration:disabled:hover {
            background-color: #FFF;
            color: #505050;
        }


.Sport-Button {
    height: 300px;
    width: 580px;
    position: absolute;
    top: -1rem;
    left: 50%;
    transform: translateX(-50%);
    background-image: url('/Images/Sport-Button.png');
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    transition: transform 0.3s ease;
}

    .Sport-Button:not(.off):hover {
        animation: jelly 0.6s ease;
    }

    .Sport-Button.off,
    .Swim-Button.off,
    .Game-Button.off {
        filter: grayscale(1);
    }


.sport-masked-image {
    margin-top: 20px;
    height: 340px;
    width: 580px;
    position: absolute;
    background-repeat: no-repeat;
    background-image: url(/Images/Sport-Button_1.png);
    background-size: contain;
    background-position-x: 40px;
    mask-image: url(/Images/Sport-Button.png);
    mask-repeat: no-repeat;
    mask-size: 559px 275px;
}

.sport-masked-font {
    top: 95px;
    left: 206px;
    height: 18%;
    width: 78%;
    position: absolute;
    background-repeat: no-repeat;
    background-image: url(/Images/Sport-Button_2.png);
    background-size: contain;
    background-position: 165px 0px;
    mask-image: url(/Images/Sport-Button.png);
    mask-repeat: no-repeat;
    mask-size: 375px 65px;
}

.Sport-Button:not(.off):hover .sport-masked-font {
    animation: slide-in 0.6s ease-in-out forwards;
}

.Swim-Button {
    height: 300px;
    width: 580px;
    position: absolute;
    top: -1rem;
    left: 55%;
    transform: translateX(-50%);
    background-image: url('/Images/Swim-Button.png');
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    transition: transform 0.3s ease;
}

    .Swim-Button:not(.off):hover {
        animation: jelly 0.6s ease;
    }

.swim-masked-image {
    margin-top: 32px;
    height: 330px;
    width: 409px;
    position: absolute;
    background-repeat: no-repeat;
    background-image: url(/Images/Swim-Button_1.png);
    background-size: contain;
    background-position-x: 0px;
    mask-image: url(/Images/Swim-Button.png);
    mask-repeat: no-repeat;
    mask-size: 559px 261px;
}

.swim-masked-font {
    top: 95px;
    left: 163px;
    height: 18%;
    width: 78%;
    position: absolute;
    background-repeat: no-repeat;
    background-image: url(/Images/Swim-Button_2.png);
    background-size: contain;
    background-position: 165px 0px;
    mask-image: url(/Images/Swim-Button.png);
    mask-repeat: no-repeat;
    mask-size: 375px 65px;
}

.Swim-Button:not(.off):hover .swim-masked-font {
    animation: slide-in 0.6s ease-in-out forwards;
}

.Game-Button {
    height: 300px;
    width: 580px;
    position: absolute;
    top: -1rem;
    left: 54%;
    transform: translateX(-50%);
    background-image: url('/Images/Game-Button.png');
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    transition: transform 0.3s ease;
}

    .Game-Button:not(.off):hover {
        animation: jelly 0.6s ease;
    }

.game-masked-image {
    margin-top: -22px;
    height: 360px;
    width: 414px;
    position: absolute;
    background-repeat: no-repeat;
    background-image: url(/Images/Game-Button_1.png);
    background-size: contain;
    background-position: 50px 40px;
    mask-image: url(/Images/Game-Button.png);
    mask-repeat: no-repeat;
    mask-size: 388px 317px;
}

.game-masked-font {
    top: 95px;
    left: 98px;
    height: 18%;
    width: 78%;
    position: absolute;
    background-repeat: no-repeat;
    background-image: url(/Images/Game-Button_2.png);
    background-size: contain;
    background-position: 200px 0px;
    mask-image: url(/Images/Game-Button.png);
    mask-repeat: no-repeat;
    mask-size: 490px 58px;
}

.Game-Button:not(.off):hover .game-masked-font {
    animation: game-slide-in 0.6s ease-in-out forwards;
}

@keyframes slide-in {
    from {
        background-position: 165px 0px;
    }

    to {
        background-position: 138px 0px;
    }
}

@keyframes game-slide-in {
    from {
        background-position: 200px 0px;
    }

    to {
        background-position: 165px 0px;
    }
}

@keyframes jelly {
    0% {
        transform: translateX(-50%) scale(1, 1);
    }

    25% {
        transform: translateX(-50%) scale(1.03, 0.97);
    }

    50% {
        transform: translateX(-50%) scale(0.97, 1.03);
    }

    75% {
        transform: translateX(-50%) scale(1.02, 0.98);
    }

    100% {
        transform: translateX(-50%) scale(1, 1);
    }
}