.header-bg {
  background-color: rgb(53, 46, 46);
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: rgb(156, 153, 153);
}

.footer-bg {
  background-color: rgb(53, 46, 46);
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: rgb(156, 153, 153);
}

.portrait-container {
  width: 10rem;
  margin: 1px;
  border-left: 2px;
  border-right: 2px;
  border-left-style: solid;
  border-right-style: solid;
  border-radius: 5px;
  border-color: rgba(23, 29, 94, 0.75);
}

.button1 {
  text-decoration: none !important;
  background-image: url("/images/diamond.png"),
    linear-gradient(to right, rgb(28, 36, 85), rgba(83, 1, 109, 0.75));
  border-radius: 100px 2px 2px 2px;
}

.button2 {
  text-decoration: none !important;
  background-image: url("/images/diamond.png"),
    linear-gradient(to right, rgba(28, 36, 85, 0.5), rgba(28, 36, 85, 0.5));
  border-radius: 2px 100px 2px 2px;
}

.button3 {
  text-decoration: none !important;
  background-image: url("/images/diamond.png"),
    linear-gradient(to right, rgba(97, 26, 67, 0.75), rgba(97, 26, 67, 0.75));
  border-radius: 5px 2px 2px 5px;
}

.button4 {
  text-decoration: none !important;
  background-image: url("cirrus6hub/images/diamond.png"),
    linear-gradient(
      to right,
      rgba(139, 148, 157, 0.75),
      rgba(139, 148, 157, 0.75)
    );
  border-radius: 2px 5px 5px 2px;
}

.button5 {
  text-decoration: none !important;
  background-image: url("/cirrus6hub/images/diamond.png"),
    linear-gradient(
      to right,
      rgba(235, 220, 86, 0.75),
      rgba(235, 220, 86, 0.75)
    );
  border-radius: 2px 2px 2px 100px;
}

.button6 {
  text-decoration: none !important;
  background-image: url("/cirrus6hub/images/diamond.png"),
    linear-gradient(
      to right,
      rgba(235, 220, 86, 0.75),
      rgba(235, 220, 86, 0.75)
    );
  border-radius: 2px 2px 100px 2px;
}

/* Heroes viewport */

.buttons {
  /* border-style:solid; */
  border-radius: 100px;
  width: 51rem;
  margin: 0 auto;
  padding: 5px;
  border-style: solid;
  border-width: 2px;
  background-image: url("/cirrus6hub/images/diamond.png"),
    linear-gradient(to right, rgba(53, 46, 46, 0.9), rgba(53, 46, 46, 0.9));
  div {
    .a1 {
      width: 25rem;

      border-style: ridge;
      border-width: 2px 0px 2px 2px;
      border-color: rgba(23, 29, 94, 1);
      transition: transform 0.3s ease; /* Smooth transition */
      margin-right: 1px;
    }

    .a1:hover {
      transform: scale(0.95); /* Grows by 10% */
    }
  }
  .a2 {
    width: 25rem;

    border-style: ridge;
    border-width: 2px 2px 2px 0px;
    border-color: rgba(23, 29, 94, 1);
    transition: transform 0.3s ease; /* Smooth transition */
    margin-left: 1px;
  }

  .a2:hover {
    transform: scale(0.95); /* Grows by 10% */
  }
}

h2 {
  font-family: "Zen Dots", serif;
  font-weight: 400;
  border-style: solid;
  border-width: 0px 0px 1px 0px;
  border-color: rgb(53, 46, 46);
}

h1,
h2 {
  font-family: "Zen Dots", serif;
  font-weight: 400;
  color: rgb(172, 174, 201);
}

.bdy {
  background-image: url("/images/skyline.png");
  background-size: cover;
  height: auto 100%;
  margin: 0;
}

/* .titl {
  background-color: rgba(23, 29, 94, 0.4);
  border-width: 2px;
  margin-left: 25%;
  margin-right: 25%;
} */

.tag-3 {
  width: 10rem;
  border-radius: 20px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 3px;
  border-style: solid;
  border-width: 2px;
  border-color: rgba(23, 29, 94, 1);
  background-image: url("/images/diamond.png"),
    linear-gradient(to right, rgba(53, 46, 46, 0.9), rgba(53, 46, 46, 0.9));
}

.secondary-btns {
  color: rgb(172, 174, 201);
}

.copyright {
  color: rgb(172, 174, 201);
  font-size: 10px;
}

.main {
  height: 100%;
}

.hero-info {
  font-family: "Zen Dots", serif;
  font-size: 25px;
  color: rgb(208, 208, 212);
  text-decoration: none !important;
}

.hero-nameplate {
  font-family: "Zen Dots", serif;
  border-style: ridge;
  border-radius: 5px 25px 0px 0px;
  border-width: 3px 3px 0px 3px;
  font-size: 100px;
  margin: 1% 10% 0% 1%;
}
.hero-card-info {
  border-style: solid;
  margin: 1% 8% 1% 8%;
  border-radius: 5px 100px 5px 5px;
  background-image: url("/images/diamond.png"),
    linear-gradient(
      to right,
      rgba(103, 106, 119, 0.9),
      rgba(103, 106, 119, 0.9)
    );

    
}

.portrait {
  margin: 0.5% 0.5% 0.5% 0.5%;
  width: 200px;
  height: 200px;
  border-style: solid;
  border-radius: 5px 15px 5px 5px;
  background-color: rgba(223, 223, 223, 0.185);
}

.info-text {
  margin: 0% 1% 1% 1%;
  border-style: ridge;
  border-radius: 0px 100px 100px 0px;

  min-height: 200px;
  p {
    font-size: 25px;
    color: rgb(0, 0, 0);
  }
  p.bio {
    font-family: "Zen Dots", serif;
    color: rgb(0, 0, 0);
    font-size: 20px;
    margin-left: 1%;
    margin-right: 1%;
  }
}

.comments {
  border-style: ridge;
  border-top-right-radius: 5px;
  .name {
    border-style: ridge;
    border-radius: 5px 5px 0px 0px;
    border-width: 3px 3px 0px 3px;
    background-color: rgba(238, 238, 238, 0.5);
    padding: 0px 4px 0px 2px;
    margin: 0px 1% 0px 1%;
  }

  .comment {
    border-style: ridge;
    border-radius: 0px 5px 5px 5px;
    background-color: rgba(238, 238, 238, 0.5);
    padding: 0px 2px 0px 2px;
    margin: 0px 1% 0px 1%;
  }
}

.hero-info2 {
  font-family: "Zen Dots", serif;
  font-size: 15px;
  color: rgb(208, 208, 212);
  text-decoration: none !important;
}

.comment-input {
  margin: 0px 1% 0px 1%;
  width: 98%;

  border-color: black;
  border-width: 3px;
  border-radius:0px 5px 0px 5px;
}

.comment-name {
  width: 15%;
  border-color: black;
  border-width: 3px 3px 0px 3px;
  margin: 0px 1% 0px 1%;
  border-radius:5px 5px 0px 0px;
}
.comment-button {
  margin: 3px;
  border-style: solid;
  border-width: 2px;
  border-color: black;
  background-color: rgba(255, 255, 255, 0.9);
  
}

.age {
  font-family: "Zen Dots", serif;
  font-weight: bold;
}

.hci1 {
  border-radius: 5px 5px 50px 5px;
}

.shrink {
  font-size: 75px !important; /* Adjust to fit your design */
  color: red; /* Optional: Add visual distinction */
}