.headerbg {
  background-color: rgb(224, 218, 230);

  /* border-radius: 15px; */
  /* margin-bottom: 2rem; */
  min-width: 100%;
  border-style: groove;
  border-width: 0px 0px 1px 0px;
}

.quicksand-font {
  font-family: "Quicksand", serif;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
}
.sheysLogo {
  display: block;
  width: min(15vw, 574px);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  background-color: rgba(158, 151, 151, 0);
  padding: 0.5vh;
}
a {
  color: rgb(74, 49, 97);
  text-decoration: none;
}

html,
body {
  height: 100%;
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(10, 10, 10);
  background:
    url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.60%22%20numOctaves%3D%223%22%20stitchTiles%3D%22stitch%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23n)%22%20opacity%3D%220.10%22%2F%3E%3C%2Fsvg%3E"),
    linear-gradient(77deg, #000000, #000000);
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  height: 90%;
  overflow-y: auto;
  overflow-x: hidden;
  width: 90%;
  background-color: rgba(245, 243, 243, 0.219);
  border: #faf8f8 inset 1px;
  border-style: inset;
  color: rgb(223, 223, 223);
  clip-path: polygon(
    50px 0%,
    calc(100% - 5px) 0%,
    100% 5px,
    100% calc(100% - 50px),
    calc(100% - 50px) 100%,
    5px 100%,
    0% calc(100% - 5px),
    0% 50px
  );
  @media (max-width: 768px) {
    clip-path: polygon(
      5px 0%,
      calc(100% - 5px) 0%,
      100% 5px,
      100% calc(100% - 5px),
      calc(100% - 5px) 100%,
      5px 100%,
      0% calc(100% - 5px),
      0% 5px
    );
  }
}

.footer {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 6vh;
  background-color: rgb(126, 126, 126) !important;
  border-style: groove;
  border-width: 1px 0px 0px 0px;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.labelbutton {
  background-color: rgb(162, 125, 197);
  color: white;
  width: 100%;
  border-radius: 10px 10px 0px 0px !important;
}

.expanded-image {
  max-width: 0;
  overflow: hidden;
  transition: max-width 1s ease;
}

.expanding-wrapper:hover .expanded-image {
  max-width: 100vw;
}

.hh {
  border-style: dashed;
}

.logos {
  height: 5vh;
}
.logosText {
  height: 3vh;
}

.homeText {
  display: flex;
}

.homeBody {
  height: 90vh;
  background-color: rgb(38, 32, 43);
  justify-content: center;
  text-align: center;
  justify-self: center;
  margin-left: 3vw;
  margin-right: 3vw;
  border-radius: 5px;
  padding: 1vw;
}

.discord {
  background-color: #2e2e34;
  height: 30vh;
  width: 30vw;
  position: relative;
}

.card.discord {
  margin-left: auto;
  margin-right: auto;
}

/* Center the profile picture container inside its parent */
.pfp-container {
  position: absolute;
  top: 100%;
  left: 25%;
  transform: translate(-50%, -50%);
}

.card-header {
  position: relative;
}

.pfpcircle {
  color: #2e2e34;
}

.discord-icon {
  background-color: red;
}

.card-body {
  width: 30vw;
}

.card-header {
  height: 10vh;
  width: 30vw;
  background-color: #372b44;
  position: relative;
}

.dscard {
  color: white;
  font-size: 3vh;
}
.card-text {
  color: white !important;
}

.buttonhouse {
  background-color: rgba(219, 219, 219, 0.062);
  border-style: inset;
  border-width: 1px;
  border-radius: 5px;
  filter: drop-shadow(2px 2px rgba(128, 128, 128, 0.418));
}

h1 {
  font-family: Arial, Helvetica, sans-serif;
}

.skillsList {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  justify-content: space-evenly;
}

.skillsList li {
  flex: 0 0 auto;
  width: 90%;
  border-style: inset;

  border-radius: 0px 5px 0px 5px;
  border-width: 1px;

  background-color: rgba(219, 219, 219, 0.062);
  margin-right: 0rem;
  margin-top: 0.25rem;
  padding-left: 1rem;
  filter: drop-shadow(2px 2px rgba(128, 128, 128, 0.418));
}
@media (min-width: 768px) {
  .skillsList li {
    width: 41.66666667%;
    margin-right: 0.5rem;
  }
}