* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body {
  font-family: sans-serif;
  background-image: url(immaginiprova/shrines/ateezimg/bg3.gif);
  cursor: url(immaginiprova/shrines/ateezimg/lightstick.png), auto;
}

a, button, .clickable {
  cursor: url(immaginiprova/shrines/ateezimg/pointer.gif), pointer;
}

.bouncy{
  display: flex;
  flex-direction: column;
max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
    border: groove, black;
}


.intro{
/* From https://css.glass */
background: rgba(202, 245, 255, 0.13);
border-radius: 1px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(6.1px);
-webkit-backdrop-filter: blur(6.1px);

    max-width: 300px;
     position: absolute;
  inset: 0;
  width: 16rem;
  height: 400px;
  margin: auto;
    left: -550px;
    top: -80px;
    border: groove #0c0c4d;
}
.intro p{
 padding: 10px;
    text-align: center;
    color: white ;
}

#wonderland{
  width: 300px;
  position: absolute;
  top: 100px;
  right: 180px;
  border: ridge;
}
#wonderlandtext{
  position: absolute;
  width: 250px;
  top: 3px;
  right: 130px;
}

#captain{
  width: 100px;
  top: 40px;
  right: 450px;
  position: absolute;
}
#captaintext{
  position: absolute;
  width: 150px;
  top: 10px;
  right: 550px;
  transform: rotate(-15deg);
}

#newworld{
  position: absolute;
  width: 200px;
  top: 160px;
  left: 570px;
  border: ridge #920000;
}
#lightstick{
  position: absolute;
  width: 100px;
  top: 10px;
  left: 150px;
}
#lightiny{
  position: absolute;
  width: 150px;
  top: 190px;
  left: 140px;
    transform: rotate(2deg);
}

#player{
  position: absolute;
  top: 500px;
  left: 150px;
}

.about{
  /* From https://css.glass */
background: rgba(202, 245, 255, 0.13);
border-radius: 1px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(6.1px);
-webkit-backdrop-filter: blur(6.1px);

    max-width: 300px;
    position: absolute;
  width: 16rem;
  height: 380px;
    right: 280px;
  top: 300px;
  margin: auto;
    border: groove #0c0c4d;
}

.about p{
  text-align: center;
  color: white;
  padding: 10px;
}


#jongbear{
  position: absolute;
  width: 150px;
  right: 100px;
  top: 350px;
  border: ridge #933920;
}
.jongbear-p{
  color: white;
  transform: translate(-50%, -50%);
  background-color: rgba(147, 57, 32, 0.68);
  padding: 5px;
  text-align: center;
  border: ridge #542b00;
    transition: opacity 0.3s ease;
  pointer-events: none;
  top: 630px;
  position: absolute;
  right: -40px;
  opacity: 0;
}
.jongbear-text:hover .jongbear-p{
  opacity: 1;
}

#ateezformation{
  position: absolute;
  width: 300px;
  top: 720px;
  right: 220px;
  border: ridge white;
}
#formation-text{
  position: absolute;
  z-index: 1;
  width: 300px;
  top: 840px; 
  right: -5px;
  transform: rotate(65deg);
}

#ateezposter{
  width: 200px;
  position: absolute;
  top: 800px;
  right: 570px;
  border: ridge black;
} 

.lore{
    /* From https://css.glass */
background: rgba(202, 245, 255, 0.13);
border-radius: 1px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(6.1px);
-webkit-backdrop-filter: blur(6.1px);
  
      max-width: 600px;
    position: absolute;
  width: 25rem;
  height: 600px;
  top: 830px;
  left: 130px;
  margin: auto;
    border: groove #0c0c4d;
}

.lore p{
    text-align: center;
  color: black;
  padding: 10px;
}

#thisworld{
  width: 200px;
  position: absolute;
  top: 980px;
  right: 170px;
  border: ridge purple;
}

#cromer{
  position: absolute;
  width: 200px;
  top: 1130px;
  left: 560px;
  border: ridge black;
}
#cromer-text{
  position: absolute;
  width: 300px;
  top: 1210px;
  right: 500px;
  z-index: 1;
  transform: rotate(-5deg);
}

#logo{
  position: absolute;
  width: 150px;
  top: 1020px;
  right: 395px;
}

.more-facts{
      /* From https://css.glass */
background: rgba(202, 245, 255, 0.13);
border-radius: 1px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(6.1px);
-webkit-backdrop-filter: blur(6.1px);
  
      max-width: 600px;
    position: absolute;
  width: 16rem;
  height: 400px;
  top: 1280px;
  right: 200px;
  margin: auto;
    border: groove #0c0c4d;
}

.more-facts p{
      text-align: center;
  color: black;
  padding: 10px;
}

#wave{
  position: absolute;
  width: 300px;
  top: 1350px;
  right: 480px;
  border: ridge orange;
}

#rings{
    position: absolute;
  width: 150px;
  top: 1550px;
  left: 500px;
  border: ridge grey;
}

#cult{
  position: absolute;
  width: 300px;
  top: 1450px;
  left: 150px;
  border: ridge black;
}
.woo-p{
    color: white;
  transform: translate(-50%, -50%);
  background-color: black;
  padding: 5px;
  text-align: center;
  border: ridge grey;
    transition: opacity 0.3s ease;
  pointer-events: none;
  top: 1660px;
  position: absolute;
  left: 170px;
  opacity: 0;
}
.woo-cult:hover .woo-p{
  opacity: 1;
}


#group-pic{
  position: absolute;
  width: 170px;
  top: 1570px;
  left: 690px;
  border: ridge grey;
}

#atiny{
  position: absolute;
  width: 160px;
  top: 1700px;
  right: 130px;
  border: ridge pink;
}
#atiny-text{
  position: absolute;
  width: 150px;
  top: 1700px;
  right: 300px;
}

#aniteez{
  position: absolute;
  width: 300px;
  top: 1700px;
  left: 100px;
  border: ridge pink;
}
#aniteez-text{
  position: absolute;
  width: 200px;
  top: 1890px;
  left: 150px;
  transform: rotate(-10deg);
}
.aniteez-p{
    /* From https://css.glass */
background: rgba(202, 245, 255, 0.13);
border-radius: 1px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(6.1px);
-webkit-backdrop-filter: blur(6.1px);

    max-width: 300px;
    position: absolute;
  width: 13rem;
  height: 490px;
    left: 440px;
  top: 1730px;
  margin: auto;
    border: groove #0c0c4d;
}
.aniteez-p p{
        text-align: center;
  color: black;
  padding: 10px;
  font-weight: bold;
}

#sandeoki{
  position: absolute;
  width: 190px;
  top: 1850px;
  right: 480px;
  border: ridge violet;
}

#sandeoki-p{
      color: white;
  transform: translate(-50%, -50%);
  background-color: violet;
  padding: 5px;
  text-align: center;
  border: ridge blueviolet;
    transition: opacity 0.3s ease;
  pointer-events: none;
  top: 2030px;
  position: absolute;
  right: 370px;
  opacity: 0;
}
.sandeoki-text:hover #sandeoki-p{
  opacity: 1;
}

#silly{
  position: absolute;
  width: 240px;
  top: 1940px;
  right: 150px;
  border: ridge lightblue;
}

#behave{
  position: absolute;
  width: 150px;
  top: 2040px;
  left: 260px;
  border: ridge #fff5a2;
}

#hetmongi{
  position: absolute;
  width: 150px;
  top: 2150px;
  left: 160px;
}

#loser{
  position: absolute;
  width: 210px;
  top: 2070px;
  right: 430px;
  border: ridge white;
}

#hetmongifam{
  position: absolute;
  width: 230px;
  top: 2160px;
  right: 130px;
}

#yeosangwmongi{
  position: absolute;
  width: 180px;
  top: 2260px;
  left: 290px;
  border: ridge #fff5a2;
}

#yeosang{
  position: absolute;
  width: 150px;
  top: 2300px;
  left: 120px;
  border: ridge #290000;
}

#mongimeme{
  position: absolute;
  width: 150px;
  top: 2580px;
  left: 200px;
  border: ridge pink;
}

#dobersang{
  position: absolute;
  width: 150px;
  top: 2280px;
  left: 510px;
  border: ridge #361300;
}

#yeomeme{
  position: absolute;
  width: 160px;
  top: 2610px;
  left: 380px;
  border: ridge #c5a603;
}

#yeotext{
  position: absolute;
  width: 230px;
  top: 2410px;
  left: 310px;
}

#rockyeo{
  position: absolute;
  width: 180px;
  top: 2470px;
  left: 580px;
  border: ridge #361300;
}

#jonghobaby{
  position: absolute;
  width: 250px;
  top: 2290px;
  right: 400px;
  border: ridge silver;
}

#concert{
  position: absolute;
  transform: rotate(-90deg);
  width: 210px;
  top: 2380px;
  right: 250px;
  border: ridge lightblue;
}

.my-experience{
      /* From https://css.glass */
background: rgba(202, 245, 255, 0.13);
border-radius: 1px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(6.1px);
-webkit-backdrop-filter: blur(6.1px);

    
    position: absolute;
  width: 25rem;
  height: 600px;
    right: 160px;
  top: 2700px;
  margin: auto;
    border: groove #0c0c4d;
}

.my-experience p{
  color: white;
  text-align: center;
  padding: 10px;
}

#seonghwa{
  position: absolute;
  width: 160px;
  top: 2780px;
  left: 150px;
  border: ridge pink;
}

#seonghwa-p{
  position: absolute;
  background-color: rgba(250, 235, 215, 0.77);
  padding: 5px;
  border: solid pink;
  top: 2930px;
  left: 190px;
  color: blueviolet;
  opacity: 0;
  transition: ease-in-out 0.3s;
  z-index: 1;
}

.seonghwa-text:hover #seonghwa-p{
  opacity: 1;
}

#towards-the-light{
  position: absolute;
  width: 230px;
  top: 2820px;
  left: 530px;
  border: ridge #00003e;
}
#concert-text{
  position: absolute;
  width: 200px;
  top: 2820px;
  left: 335px;
}

#hongjoong{
  position: absolute;
  width: 180px;
  top: 3000px;
  left: 170px;
  border: ridge white;
}
#inspiration{
  position: absolute;
  width: 180px;
  top: 3190px;
  left: 170px;
}

#halazia-poster{
  position: absolute;
  width: 170px;
  top: 3070px;
  left: 400px;
}

#guerrilla{
  position: absolute;
  width: 180px;
  top: 3100px;
  left: 595px;
}