/* Shared Box Style */
.box-base {
  display: flex;
  flex-direction: column;
  font-weight: bold;
  background: linear-gradient(130deg,
  #26F596,
  #0499F2
  );
  border-radius: 10px;
  border: 2px solid hsl(230, 93%, 72%);
  color: rgb(214, 203, 203);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Hover Effect */
.border-box-button:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.page:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

/* Button Box */
.border-box-button {
  margin: 15px;
  padding: clamp(15px, 4vw, 40px);
  gap: 0;
}

.page {
  background: linear-gradient(
    130deg,
    #26F596,
    #0499F2
  );
  font-size: large;
  font-family: Consolas;
  color: white;

  border-color: rgb(2, 197, 187);
  border-radius: 145px;

  padding: 10px 16px;
  margin: 10px;
}

/* Parent Layout */
.border-box-button-parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 10px;
}

/* Info Title */
.border-box-info {
  font-size: 30px;
  text-align: center;
  text-decoration: none;
}

/* Standard Box */
.border-box {
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin: 20px auto;
  max-width: 600px;
  font-size: 1.2em;
}
.border-box,
.border-box-button {
  display: flex;
  flex-direction: column;
  font-weight: bold;
  background: linear-gradient(
    130deg,
    #17f08a,
    #0499F2
    );
  border-radius: 10px;
  border: 2px solid hsl(230, 93%, 72%);
  color: rgb(214, 203, 203);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Name Colors */
#dyball { color: #674F9D; }
#aiden  { color: hsl(291, 77%, 71%); }
#lewis  { color: #351563; }
#liam   { color: #00b300; }
#kade   { color: #747a61; }
#jaali  { color: #554aec; }