/* ========================= */
/* IMAGES */
/* ========================= */

.profile-pic {
  width: clamp(80px, 20vw, 150px);
  height: auto;
  margin-top: 10px;
  border-radius: 50%;
}

.face-pic {
  width: clamp(40px, 12vw, 80px);
  height: auto;
  border-radius: 50%;
}


/* ========================= */
/* PAGE BUTTON */
/* ========================= */

.page {
  margin: 10px;
  padding: clamp(6px, 2vw, 12px);

  font-family: Comic Sans MS;
  font-weight: bold;
  font-size: clamp(14px, 2.5vw, 20px);

  background: linear-gradient(-130deg,
    rgb(158, 63, 248),
    rgb(48, 98, 236)
  );

  border-style: outset;
  border-color: #4854f8;
  border-radius: 16px;
}

.page:hover,
.logo:hover {
  opacity: 0.8;
  cursor: pointer;
}

.page:active {
  background: linear-gradient(
    45deg,
    #4e6df7,
    #5d28da
  );

  border-color: #2834da;
}


/* ========================= */
/* CARDS */
/* ========================= */

.border-box,
.border-box-button {
  display: flex;
  flex-direction: column;

  list-style-position: inside;
  font-family: Consolas;
  font-weight: bold;
  color: rgb(214, 203, 203);

  background: linear-gradient(
    130deg,
    rgb(154, 55, 247),
    rgb(62, 59, 238)
  );

  border: 2px solid hsl(286, 71%, 41%);
  border-radius: 10px;

  transition: transform 0.5s ease;
}

.border-box {
  align-items: center;
  gap: 10px;
  padding: clamp(10px, 3vw, 20px);
  margin: 10px;
  width: min(90%, 600px); /* better than max-width alone */
  font-size: clamp(0.9rem, 2.5vw, 1.2rem);
}

.border-box-button {
  gap: 0px;

  padding: clamp(15px, 4vw, 40px);

  max-width: 300%;
  height: auto;
}

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

  transition: transform 0.5s ease, box-shadow 0.5s ease;
}


/* ========================= */
/* FOOTER */
/* ========================= */

footer {
  width: 100%;
  height: 60px;

  margin-top: auto;
  margin-bottom: 0;

  padding: 10px;

  color: white;
  text-align: center;

  background: linear-gradient(
    45deg,
    #2c81b2,
    #7e1be0
  );

  border-top-left-radius: 40px;
  border-top-right-radius: 40px;

  animation: fadeUp 0.6s ease;
}

.footer-icon {
  color: rgb(106, 7, 159);
  font-size: 24px;

  transition: all 0.25s ease;
}

.footer-icon:hover {
  transform: translateY(-3px) scale(1.1);
  color: white;
  cursor: pointer;
}

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