.smash-button-border:hover {
    --border-color-1: yellow;
    --border-color-2: darkorange;

    background-image: linear-gradient(to right, var(--border-color-1), var(--border-color-2), var(--border-color-1), var(--border-color-2), var(--border-color-1));
    background-size: 400% 100%;
    animation: 3s linear infinite smash-button-background;

    box-shadow: 0 3px 10px 2px rgb(0 0 0 / 20%);
}

.smash-button-border:hover button {
    color: yellow;
}

.navmenu {
    transition: 0.6s max-height;
}

.hamburger-open {
    filter: invert(57%) sepia(77%) saturate(534%) hue-rotate(8deg) brightness(108%) contrast(94%);
}

.navmenu-open {
    max-height: calc(3 * calc(3.25rem));
}

.smash-button-border:hover .chevron::before {
    border-color: yellow;
}

.chevron {
    display: inline-flex;
    align-items: center;
}

.indicator-top, .indicator-bottom {
    border-width: 12px;
}

.indicator-top, .indicator-bottom, .indicator-bar {
    transition: 0.2s;
}

.tooltip::before {
    transition: opacity 0.2s;
}

.tooltip:hover::before {
    transition: opacity 0.2s;
    opacity: 100%
}

.tooltip::before {
    pointer-events: none;
    cursor: auto;
}

.indicator:hover .indicator-top {
    border-top-color: black;
}

.indicator:hover .indicator-bottom {
    border-bottom-color: black;
}

.indicator:hover .indicator-bar {
    background-color: black;
}

.index-effect-container {
    width: 350%;
    height: 100%;
    animation: 40s infinite linear index-effect
}

.index-effect-inner-container {
    transition: transform ease-out 500ms;
}

.index-effect-item {
    height: 100%;
}

.index-effect-item-alt {
    transition: opacity 2s;
}

.hide-with-opacity {
    opacity: 0;
}

.index-effect-item-1 {
    background-image: url("/images/stages/battlefield.jpg");
}

.index-effect-item-2 {
    background-image: url("/images/stages/castleSiege.jpg");
}

.index-effect-item-3 {
    background-image: url("/images/stages/finalDestination.jpg");
}

.index-effect-item-4 {
    background-image: url("/images/stages/kalosPokemonLeague.jpg");
}

.index-effect-item-alt-1 {
    background-image: url("/images/stages/northernCave.jpg");
}

.index-effect-item-alt-2 {
    background-image: url("/images/stages/pokemonStadium2.jpg");
}

.index-effect-item-alt-3 {
    background-image: url("/images/stages/smashville.jpg");
}

.index-effect-item-alt-4 {
    background-image: url("/images/stages/townAndCity.jpg");
}

/* chevron css by https://codepen.io/stepher/pen/yLOaEOP */
.chevron::before {
    border-color: white;
	border-style: solid;
	border-width: 0.12em 0.12em 0 0;
	content: '';
	display: inline-block;
	height: 0.45em;
	position: relative;
	vertical-align: top;
	width: 0.45em;
    transform: rotate(45deg);
}

@keyframes index-effect {
    0% {
        transform: translateX(calc(-900% / 14));
    }

    100% {
        transform: translateX(calc(-100% / 14))
    }
}

@keyframes smash-button-background {
    0% {
        background-position-x: 200%;
    }

    100% {
        background-position-x: 0%;
    }
}