/* ========================= */
/* 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,
    #26F596,
    #0499F2
  );

  border-style: outset;
  border-color: rgb(2, 197, 187);
  border-radius: 16px;
}

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

.page:active {
  background: linear-gradient(
    45deg,
    rgb(71, 188, 197),
    rgb(53, 179, 91)
  );

  border-color: hsl(212, 71%, 41%);
}


/* ========================= */
/* 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,
    #17f08a,
    #0499F2
    );

  border: 2px solid hsl(230, 93%, 72%);
  border-radius: 10px;

  transition: transform 0.5s ease;
}

.border-box {
  align-items: center;

  gap: 10px;
  padding: clamp(10px, 3vw, 20px);
  margin: 10px;
  
  width: clamp(300px, 3vw, 700px);
  height: auto;

  font-size: clamp(0.9rem, 2.5vw, 1.2rem);
}

.border-box-button {
  gap: 0px;
  padding: clamp(10px, 3vw, 20px);
  margin: 10px;

  width: clamp(300px, 3vw, 700px);
  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;
}

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