.upgrade-container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-start;
}

body {
    font-family: Arial;
    text-align: center;
}

.upgrades {
    position: relative;
    background: transparent;
    padding: 3px;
    cursor: pointer;
    outline-offset: 4px;
    background: hsl(267deg, 29%, 60%);
    border-radius: 4px;
    color: #D3D3D3;
    filter: brightness(108%);
}

/* big button styles */
    .pushable {
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
    transition: filter 250ms;
    }
    .shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100.3%;
    height: 100%;
    border-radius: 12px;
    background: hsl(0deg 0% 0% / 0.25);
    will-change: transform;
    transform: translateY(2px);
    transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
    }
    .edge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100.5%;
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(
      to left,
      hsl(267deg, 29%, 16%) 0%,
      hsl(267deg, 29%, 32%) 8%,
      hsl(267deg, 29%, 32%) 92%,
      hsl(267deg, 29%, 16%) 100%
    );
    }
    .front {
    display: block;
    position: relative;
    padding: 12px 42px;
    border-radius: 12px;
    font-size: 1.25rem;
    color: #D3D3D3;
    background: hsl(267deg, 29%, 60%);
    will-change: transform;
    transform: translateY(-4px);
    transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
    }
    
    .pushable:hover {
    filter: brightness(110%);
    }
    
    .pushable:hover .front {
    transform: translateY(-6px);
    transition: transform 350ms linear(0, 0.003 0.3%, 0.011 0.6%, 0.024 0.9%, 0.049 1.3%, 0.11 2%, 0.192 2.7%, 0.275 3.3%, 0.383 4%, 0.788 6.4%, 0.949 7.4%, 1.092 8.4%, 1.202 9.3%, 1.289 10.2%, 1.32 10.6%, 1.347 11%, 1.368 11.4%, 1.389 11.9%, 1.401 12.3%, 1.409 12.8%, 1.41 13.1%, 1.409 13.5%, 1.405 13.8%, 1.397 14.2%, 1.376 14.9%, 1.34 15.7%, 1.301 16.4%, 1.258 17.1%, 1.084 19.6%, 1.019 20.6%, 0.96 21.6%, 0.916 22.5%, 0.88 23.4%, 0.857 24.2%, 0.841 25%, 0.836 25.4%, 0.833 25.9%, 0.832 26.6%, 0.836 27.3%, 0.845 28%, 0.859 28.8%, 0.875 29.5%, 0.895 30.3%, 0.993 33.8%, 1.017 34.8%, 1.035 35.7%, 1.048 36.5%, 1.058 37.3%, 1.065 38.1%, 1.069 39%, 1.068 40.2%, 1.061 41.6%, 1.047 43.1%, 1.007 46.6%, 0.99 48.3%, 0.977 50.2%, 0.972 52%, 0.972 53.3%, 0.975 54.7%, 1.004 61.4%, 1.009 63.2%, 1.011 65%, 1.01 67.9%, 0.999 74.4%, 0.995 77.9%, 0.996 81%, 1.002 90.6%, 1);
    }
    
    .pushable:focus-visible {
    filter: brightness(110%);
    }
    
    .pushable:focus-visible .front {
    transform: translateY(-6px);
    transition: transform 350ms linear(0, 0.003 0.3%, 0.011 0.6%, 0.024 0.9%, 0.049 1.3%, 0.11 2%, 0.192 2.7%, 0.275 3.3%, 0.383 4%, 0.788 6.4%, 0.949 7.4%, 1.092 8.4%, 1.202 9.3%, 1.289 10.2%, 1.32 10.6%, 1.347 11%, 1.368 11.4%, 1.389 11.9%, 1.401 12.3%, 1.409 12.8%, 1.41 13.1%, 1.409 13.5%, 1.405 13.8%, 1.397 14.2%, 1.376 14.9%, 1.34 15.7%, 1.301 16.4%, 1.258 17.1%, 1.084 19.6%, 1.019 20.6%, 0.96 21.6%, 0.916 22.5%, 0.88 23.4%, 0.857 24.2%, 0.841 25%, 0.836 25.4%, 0.833 25.9%, 0.832 26.6%, 0.836 27.3%, 0.845 28%, 0.859 28.8%, 0.875 29.5%, 0.895 30.3%, 0.993 33.8%, 1.017 34.8%, 1.035 35.7%, 1.048 36.5%, 1.058 37.3%, 1.065 38.1%, 1.069 39%, 1.068 40.2%, 1.061 41.6%, 1.047 43.1%, 1.007 46.6%, 0.99 48.3%, 0.977 50.2%, 0.972 52%, 0.972 53.3%, 0.975 54.7%, 1.004 61.4%, 1.009 63.2%, 1.011 65%, 1.01 67.9%, 0.999 74.4%, 0.995 77.9%, 0.996 81%, 1.002 90.6%, 1);
    }
    
    .pushable:active .front {
    transform: translateY(-2px);
    transition: transform 34ms;
    }
    
    .pushable:hover .shadow {
    transform: translateY(4px);
    transition: transform 350ms linear(0, 0.003 0.3%, 0.011 0.6%, 0.024 0.9%, 0.049 1.3%, 0.11 2%, 0.192 2.7%, 0.275 3.3%, 0.383 4%, 0.788 6.4%, 0.949 7.4%, 1.092 8.4%, 1.202 9.3%, 1.289 10.2%, 1.32 10.6%, 1.347 11%, 1.368 11.4%, 1.389 11.9%, 1.401 12.3%, 1.409 12.8%, 1.41 13.1%, 1.409 13.5%, 1.405 13.8%, 1.397 14.2%, 1.376 14.9%, 1.34 15.7%, 1.301 16.4%, 1.258 17.1%, 1.084 19.6%, 1.019 20.6%, 0.96 21.6%, 0.916 22.5%, 0.88 23.4%, 0.857 24.2%, 0.841 25%, 0.836 25.4%, 0.833 25.9%, 0.832 26.6%, 0.836 27.3%, 0.845 28%, 0.859 28.8%, 0.875 29.5%, 0.895 30.3%, 0.993 33.8%, 1.017 34.8%, 1.035 35.7%, 1.048 36.5%, 1.058 37.3%, 1.065 38.1%, 1.069 39%, 1.068 40.2%, 1.061 41.6%, 1.047 43.1%, 1.007 46.6%, 0.99 48.3%, 0.977 50.2%, 0.972 52%, 0.972 53.3%, 0.975 54.7%, 1.004 61.4%, 1.009 63.2%, 1.011 65%, 1.01 67.9%, 0.999 74.4%, 0.995 77.9%, 0.996 81%, 1.002 90.6%, 1);
    }
    
    .pushable:focus-visible .shadow {
    transform: translateY(4px);
    transition: transform 350ms linear(0, 0.003 0.3%, 0.011 0.6%, 0.024 0.9%, 0.049 1.3%, 0.11 2%, 0.192 2.7%, 0.275 3.3%, 0.383 4%, 0.788 6.4%, 0.949 7.4%, 1.092 8.4%, 1.202 9.3%, 1.289 10.2%, 1.32 10.6%, 1.347 11%, 1.368 11.4%, 1.389 11.9%, 1.401 12.3%, 1.409 12.8%, 1.41 13.1%, 1.409 13.5%, 1.405 13.8%, 1.397 14.2%, 1.376 14.9%, 1.34 15.7%, 1.301 16.4%, 1.258 17.1%, 1.084 19.6%, 1.019 20.6%, 0.96 21.6%, 0.916 22.5%, 0.88 23.4%, 0.857 24.2%, 0.841 25%, 0.836 25.4%, 0.833 25.9%, 0.832 26.6%, 0.836 27.3%, 0.845 28%, 0.859 28.8%, 0.875 29.5%, 0.895 30.3%, 0.993 33.8%, 1.017 34.8%, 1.035 35.7%, 1.048 36.5%, 1.058 37.3%, 1.065 38.1%, 1.069 39%, 1.068 40.2%, 1.061 41.6%, 1.047 43.1%, 1.007 46.6%, 0.99 48.3%, 0.977 50.2%, 0.972 52%, 0.972 53.3%, 0.975 54.7%, 1.004 61.4%, 1.009 63.2%, 1.011 65%, 1.01 67.9%, 0.999 74.4%, 0.995 77.9%, 0.996 81%, 1.002 90.6%, 1);
    }
    
    .pushable:active .shadow {
    transform: translateY(1px);
    transition: transform 34ms;
    }
    
    .pushable:focus:not(:focus-visible) {
    outline: none;
    }