spa-js/css/style.css

 * {
     font-family: Bahnschrift, sans-serif;
 }

 main {
     display: flex;
     width: 100%;
     gap: 1rem;
 }

 #app {
     display: flex;
     flex: 90%;
     flex-direction: column;
     gap: 1rem;
     overflow: hidden;
     padding: 10vh;
 }


 router-link {
     cursor: pointer;
     font-family: Bahnschrift, sans-serif;
     color: #252525;
     padding: 1vh;
     min-width: 100px;
     transition: .2s;
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
     border: #252525 1px solid;
     position: relative;
     overflow: hidden;
     z-index: 0;
 }


 router-link::before {
     content: "";
     position: absolute;
     width: 110px;
     height: 110px;
     border-radius: 50%;
     top: -3vh;
     left: -1vw;
     transform: scale(0);
     background: #0080ff;
     transition: .4s;
     z-index:-1;
 }
 router-link:hover::before {
     transform: scale(2);
 }


 router-link:hover {
     color: #eeeeee;
 }

 #header {
     display: flex;
 }

 .message {
     padding: 1vh;
     color: white;
     margin-bottom: 2vh;
 }

 input {
     font-size: 20px;
 }

 .button {
     width: 100px;
     height: 100px;
     padding: 1vh;
     background: #0080ff;
     color: white;
     text-decoration: none;
     cursor: pointer;
 }

 /* Basic Card */
 .basic-card {
     width: 100vw;
     position: relative;
     overflow: hidden;
     padding: 1vh;
 }

 .basic-card .card-content {
     padding: 10px;
 }

 .basic-card .card-title {
     font-size: 15px;
     font-family: 'Open Sans', sans-serif;
 }

 .basic-card .card-text {
     line-height: 1.6;
 }

 .basic-card .card-link {
     padding: 15px;
     width: -webkit-fill-available;
 }

 .basic-card .card-link a {
     text-decoration: none;
     position: relative;
     padding: 10px 0px;
 }

 .basic-card .card-link a:after {
     top: 30px;
     content: "";
     display: block;
     height: 2px;
     left: 50%;
     position: absolute;
     width: 0;


 }

 .basic-card .card-link a:hover:after {
     width: 100%;
     left: 0;
 }

 .basic-card-aqua {
     position: relative;
     overflow: hidden;
 }

 .basic-card-aqua::before {
     background-image: linear-gradient(to bottom right, #26313c, #0080ff);
     content: "";
     position: absolute;
     width: 90vh;
     height: 90vh;

     z-index: -1;
 }

 .basic-card-aqua .card-content, .basic-card .card-link a {
     color: #fff;
 }

 .basic-card-aqua .card-link {
     border-top: 1px solid #82c1bb;
 }

 .basic-card-aqua .card-link a:after {
     background: #fff;
 }

 .disabled {
     pointer-events: none;
     cursor: default;
     background: #eeeeee;
     color: #252525;
 }
 .disabled-block {
     display: none;
 }