@import url('https://fonts.googleapis.com/css2?family=Archivo&family=Lexend+Deca&family=Raleway:ital,wght@0,100;0,200;0,500;1,100;1,300&display=swap');


body {
  background-color: rgb(28, 28, 28);
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  font-size: 2em;
  cursor: pointer;
  font-family: 'Lexend Deca', sans-serif;
  backdrop-filter: blur(10px);
}



.bonj {
  color: white;
  background-color: rgb(12, 12, 12);
  border-radius: 9px;
  height: 70px;
  width: 70px;
  border: none;
  cursor: pointer;
  opacity: 0.8; /* Adds transparency */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 1); /* Adds a shadow effect */
  transition: background-color 0.3s ease;
  box-shadow: 0.3s ease; /* Smooth transition for background color and box shadow */
}

.bonj:hover {
  background-color: rgb(20, 20, 20);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 1); /* Adjusted shadow effect on hover */
}

.bonj:active {
  background-color: rgb(40, 40, 40);
}


.bonjpic {
  height: 20px;
  width: 20px;
}

.unmute-button {
  color: white;
  background-color: rgb(12, 12, 12);
  border-radius: 9px;
  height: 50px;
  width: 50px;
  border: none;
  cursor: pointer;
  opacity: 0.8; /* Adds transparency */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 1); /* Adds a shadow effect */
  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for background color and box shadow */
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 999;
}

.unmute-button:hover {
  background-color: rgb(20, 20, 20);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 1); /* Adjusted shadow effect on hover */
}

.unmute-button:active {
  background-color: rgb(40, 40, 40);
}

/* Adjust the size of the icon */
.unmute-button img {
  height: 20px;
  width: 20px;
}


.container {
  margin-top: 100px;
  width: 450px;
  height: 500px;
  border-radius: 20px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: 0.3s;
  background-color: rgba(10, 10, 10, 0.5); /* Adjust the alpha value for transparency */
  backdrop-filter: blur(10px); /* Apply blur effect */
  -webkit-backdrop-filter: blur(10px); /* Safari support */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 1); /* Adds a shadow effect */
  
}
.container:hover {
  transform: translateX(-50%) scale(1.05); /* Scales the container and its contents */
}

.center {
  text-align: center;
  position: center;
}

.sparkle {
  background-image: url(imgs/sparkle.gif)
}

.flower {
  background-image: url(imgs/flower.gif)
}

.diamond {
  background-image: url(imgs/diamond.gif)
}

.rank {
  font-family: 'Lexend Deca', sans-serif;
  color: rgb(202, 229, 255);
  font-size: 20px;
}

.username {
  color: white;
  font-family: 'Lexend Deca', sans-serif;
  font-size: 20px;
  margin-top: 0px;
}

.pfp {
  height: 200px;
  width: 200px;
  border-color: black;
  margin-bottom: 0px;  
  border-radius: 999px;
  margin-top: 35px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 1); /* Adds a shadow effect */
}

.bio {
  font-family: 'Lexend Deca', sans-serif;
  font-size: 15px;
  color: rgb(168, 168, 168);
}

#bgvideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  filter: blur(9px);
}