/* Shared Box Style */
.box-base {
  display: flex;
  flex-direction: column;

  background: linear-gradient(130deg,  #26F596,  #0499F2  );

  border-radius: 10px;
  border: 2px solid var(--borderBlurple);

  color: var(--greyWhite);
  font-weight: bold;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Button Cards */
.buttonCardParent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  gap: clamp(10px, 2vw, 20px);

  margin: clamp(10px, 2vw, 20px);
  width: 100%;
}
.buttonCard {
  display: flex;
  flex-direction: column;

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

  width: 100%;

  box-sizing: mainCard;

  align-items: center;
}
.buttonCard:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.buttonCard p, .buttonCard h2 {
  flex-grow: 1;
}

/* Page Buttons */
.newPage {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;

  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: clamp(10px, 2vw, 20px);
  width: clamp(150px, 20vw, 300px);

  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.newPage:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.subtext {
  margin: 0;
  font-size: 10px;
}

/* Standard Box */
.mainCardParent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;

  gap: 20px;
  margin: 20px;
}

.mainCard {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

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

.mainCard,
.buttonCard,
.equalCard {
  display: flex;
  flex-direction: column;
  font-weight: bold;
  background: linear-gradient(
    130deg,
    #13cb75,
    #0382cc
    );
  border-radius: 10px;
  border: 2px solid var(--borderBlurple);
  color: var(--greyWhite);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.equalCard {
  align-items: center;
  text-align: center;

  padding: clamp(15px, 4vw, 40px);
  width: clamp(300px, 30vw, 500px);
}

/* ID stuff */
#originsImg { width: clamp(40px, 40vw, 100px); }

/* Minecraft Profiles */
.mcProf {
  max-width: clamp(40px, 40vw, 200px);
}

/* Logos */
.logo {
  size: clamp(20px, 4vw, 100px);
  margin: auto;
}

.society-Logo {
  border-radius: 10px;
  max-width: clamp(15px, 40vw, 100px);
  height: auto;
}

/* Apply Form */
.applyForm {
  width: clamp(400px, 10vw, 700px);
}

/* General Button */
.generalButton {
  display: flex;
  flex-direction: column;

  font-weight: bold;
  font-size: clamp(14px, 2vw, 20px);

  background: linear-gradient(
    130deg,
    #13cb75,
    #0382cc
    );
  color: var(--greyWhite);

  border-radius: 10px;
  border: 2px solid var(--borderBlurple);

  transition: transform 0.4s ease, box-shadow 0.4s ease;
  margin: 15px;

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

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

/* More button stuff */
.buttonIcon {
  color: var(--greyWhite);
}

.buttonLink, .generalButton {
  text-decoration: none;
}

.buttonLink {
  display: flex;
  flex: 0 1 300px;
  max-width: 300px;
}

/* Images */
.galImgParent {
  display: flex;

  border: solid;
  border-radius: 45px;
  border-color: rgb(64, 90, 255);

  margin: 15px;
  margin-bottom: 1px;
  padding: 0;
  overflow: hidden;
}

.galImg {
  border-radius: 45px;
  width: clamp(700px, 4vw, 2500px);
  margin: 0px;

  object-fit: cover;
  object-position: center;
}

/* Info */
.playerBoxInfo,
.mainCard * {
  color: var(--greyWhite);
}

.classicLink {
  font-size: clamp(10px, 1vw, 50px);
}

.active {
  text-decoration: underline;
  font-weight: bold;
}