h1 {
  font-size: 30px;
  text-align: center;
}
@media (max-width: 767px) {
  h1 {
    font-size: 15px;
  }
}

.container {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}

h2 {
  margin: 14px;
  color: white;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.card {
  background-color: rgba(28, 11, 88, 0.65);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: calc(33.333% - 20px);
  box-sizing: border-box;
  text-align: center;
}

.cardstatic {
  background-color: rgba(28, 11, 88, 0.65);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: calc(75% - 20px);
  box-sizing: border-box;
  text-align: center;
}

@media (max-width: 767px) {
  .card {
    width: calc(100% - 20px);
  }
  .cardstatic {
    width: calc(100% - 20px);
  }
}
.card img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.cardstatic img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}
.invite-button {
  align-items: center;
  background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
  border: 0;
  border-radius: 8px;
  box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
  box-sizing: border-box;
  color: #FFFFFF;
  display: flex;
  font-family: Phantomsans, sans-serif;
  font-size: 20px;
  justify-content: center;
  line-height: 1em;
  max-width: 100%;
  min-width: 140px;
  padding: 3px;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  cursor: pointer;
  margin: 0 auto; 
}
.invite-button:active,
.invite-button:hover {
  outline: 0;
}
.invite-button span {
  background-color: rgb(5, 6, 45);
  padding: 16px 24px;
  border-radius: 6px;
  width: 100%;
  height: 100%;
  transition: 300ms;
}
.invite-button:hover span {
  background: none;
}
@media (min-width: 768px) {
  .invite-button {
    font-size: 24px;
    min-width: 196px;
  }
}
.unlock-button {
  align-items: center;
  background-image: linear-gradient(144deg,#b80000, #b94a00 50%,#eb2300);
  border: 0;
  border-radius: 8px;
  box-shadow: rgba(252, 65, 65, 0.2) 0 15px 30px -5px;
  box-sizing: border-box;
  color: #FFFFFF;
  display: flex;
  font-family: Phantomsans, sans-serif;
  font-size: 20px;
  justify-content: center;
  line-height: 1em;
  max-width: 100%;
  min-width: 140px;
  padding: 3px;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  cursor: pointer;
  margin: 0 auto; 
}
.unlock-button:active,
.unlock-button:hover {
  outline: 0;
}
.unlock-button span {
  background-color: rgb(45, 5, 5);
  padding: 16px 24px;
  border-radius: 6px;
  width: 100%;
  height: 100%;
  transition: 300ms;
}
.unlock-button:hover span {
  background: none;
}
@media (min-width: 768px) {
  .unlock-button {
    font-size: 24px;
    min-width: 196px;
  }
}
.modal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0, 0, 0, 0.863); 
}
.modal-content {
  background-image: linear-gradient(144deg,#37154e, #211858 50%,#1e585c);
  margin: 15% auto; 
  padding: 50px;
  border: 1px solid #888;
  width: 80%; 
}
#confirmButton, #denyButton {
  align-items: center;
  background-color: #afafaf;
  border: 2px solid #111;
  border-radius: 8px;
  box-sizing: border-box;
  color: #000000;
  cursor: pointer;
  display: flex;
  font-family: Inter,sans-serif;
  font-size: 24px;
  height: 48px;
  justify-content: center;
  line-height: 24px;
  max-width: 100%;
  padding: 0 25px;
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  margin: 45px;
}
#confirmButton:after, #denyButton:after {
  background-color: #ffffff;
  border-radius: 8px;
  content: "";
  display: block;
  height: 48px;
  left: 0;
  width: 100%;
  position: absolute;
  top: -2px;
  transform: translate(8px, 8px);
  transition: transform .2s ease-out;
  z-index: -1;
}
#confirmButton:hover:after, #denyButton:hover:after {
  transform: translate(0, 0);
}
#confirmButton:active {
  background-color: #93ff7d;
  outline: 0;
}
#denyButton:active {
  background-color: #ff6464;
  outline: 0;
}
#confirmButton:hover, #denyButton:hover {
  outline: 0;
}
@media (min-width: 768px) {
  #confirmButton, #denyButton {
    padding: 0 40px;
  }
}
h3 {
  color: white;
  font-size: 50px;
  margin: 10px;
  text-align: center;
}

h4 {
  color: rgb(85, 193, 255);
  margin: 10px;
}

li {
  color: rgb(250, 27, 27);
  font-size: 30px;
}

.button-container {
  display: flex;
  justify-content: center;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.hidden {
  display: none;
}

.message {
  text-align: center;
  max-width: 80%;
  margin: 0 auto;
}

.message h1 {
  margin-bottom: 20px;
  font-size: 2em;
}

.message p {
  margin: 10px 0;
  font-size: 1.2em;
}