.content{
  margin-bottom: 10vh;
}

.content a{
  width: auto; 
  color: #ea00a0;
  text-decoration: underline;
  font-style:italic;
  font-weight: 400;
}

.italic{
  font-style: italic;
}

.Art-title{
  text-align: center;
  font-size: 3rem;
  color: #f0e1ff;
  font-weight: 400;
  margin-top: 20px;
}

  .Art-title {
    font-family: monospace, sans-serif;
    white-space: pre; /* preserve spaces if needed */
    margin-bottom: 30px;
  }

  .Art-title::selection{
  color: rgb(7, 0, 19);
  background-color: white;
}

  .subtitle{
     color: #fdd1ff;
  }

  .subtitle::selection{
  color: rgb(7, 0, 19);
  background-color: white;
}

  .ligma{
    color: rgb(37, 255, 211);
  }

.description{
  width: 80%;
  margin: auto;
  font-size: 1.2rem;
  color: #fdd1ff;
  /* font-weight: 400; */
  margin-bottom: 20px;
}

.description::selection{
  color: rgb(7, 0, 19);
  background-color: white;
}

.second-description{
  width: 80%;
  margin: auto;
  font-size: 1.2rem;
  color: #fdd1ff;
  /* font-weight: 400; */
  margin-bottom: 20px;
  margin-top: 20px;
  margin-left: 20vw;
}

.stickersflex{
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin-top: 10px;
}

.webflex{
  display: flex;
  flex-wrap: wrap;
}

.webgif{
  width: 33vw;
  height: 20vw;
   /* border: 1px solid #fdd1ff; */
}

.womgif{
  width: 49vw;
  height: 20vw;
   /* border: 1px solid #fdd1ff; */
}

.webgif:hover{
  /* filter: opacity(0.8); */
  filter:  sepia(70%) saturate(4450%) hue-rotate(179deg) brightness(101%) contrast(101%);
   border: 1px solid #fdd1ff;
}

.stickersflex-long{
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  margin-top: 20px;
}

.sticker{
  width: 19%;
  border: 1px solid #fdd1ff;
}

.stickerlong{
  width: 40%;
  height: auto;
  border: 1px solid #fdd1ff;
}

.highlight{
  color: #fbff00;
  font-weight: 400;
}


.bold{
  font-weight: 600;
}

.separator{
  border: 1px solid #fdd1ff;
  width: 80%;
  opacity: 0.5;
  margin: auto;
  /* margin: 10px; */
  /* margin-top: -2rem; */
  margin-top: 4vw;
  margin-bottom: 4vw;
}

.coversflex{
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: space-evenly;

}

.cover{
  width: 30%;
  border:1px solid rgb(216, 197, 250);
}

.bean-box{
  width: 90%;
  margin: auto;
}

.bean{
  width: 10%;
  margin-top: 10px;
  border:1px solid rgb(216, 197, 250);
}

.legendary-bean-box{
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: space-evenly;
}

.megaBean{
  margin-top: 10px;
  border:1px solid rgb(216, 197, 250);
  width: 10%;
}

.discharflex{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.dischar{
  width: 20%;
  margin: 1%;
  border: 1px solid rgb(216, 197, 250);
}

.randflex-squares{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 25px;
  margin-top: 25px;
}

.randflex-a4{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 25px;

  /* gap: px; */
}

.randcontent{
  width: 90%;
  margin: auto;

}

.randimg{
  width: 31%;
  border: 1px solid rgb(216, 197, 250);
  /* margin: 20px; */
}

.randa4{
  width: 24%;
  border: 1px solid rgb(216, 197, 250);
}

.randimg-long{
  width: 100%;
  margin: auto;
  margin-top: 25px;
  /* border: 1px solid rgb(216, 197, 250); */
}
/* .bean-box{
  margin: auto;
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
} */


@media (max-width: 900px) {
  html, body {
    overflow-x: hidden;
  }

  .Art-title{
    margin-top: 25px;
    font-size: 5vw;
  }

  .content {
    column-count: 1; /* Switch to a single column on smaller screens */
  }

  .cover{
    width: 43%;
  }

  .webflex{
    justify-content: space-evenly;
  }

  .webgif{
    width: 48vw;
    height: 33vw;
  }

  .randimg{
    width: 45%;
  }

  .womgif{
    width: 99%;
    height: auto;
  }
}