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


body {
  font-family: sans-serif;
  background-image: url(immaginiprova/shrines/httyd-img/bg1.jpg);
  cursor: url("https://i.ibb.co/gb6kzRP3/cursor.png"), auto;
}

a, button, .clickable {
  cursor: url(), pointer;
}

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

.intro{
  background-image: url(immaginiprova/shrines/httyd-img/paper1.jpg);
  max-width: 250px;
  position: absolute;
  top: 20px;
  left: 170px;
  padding: 10px;
  text-align: center;
  border: outset, #c4b24a;
  border-radius: 15px;
}

#toothless{
  width: 270px;
  top: 40px;
  left: 490px;
  position: absolute;
  border: outset, black;
}

#cutie{
  position: absolute;
  width: 160px;
  top: 40px;
  right: 200px;
  border: outset, black;
}

#eyes{
  width: 140px;
  position: absolute;
  top: 80px;
  right: 370px;
}

#first1{
  width: 250px;
  position: absolute;
  top: 210px;
  left: 440px;
}
#cry{
  width: 270px;
  position: absolute;
  top: 320px;
  left: 220px;
  transform: rotate(-10deg);
}
#first2{
  width: 230px;
  position: absolute;
  top: 350px;
  left: 510px;
}

#disability{
  width: 150px;
  position: absolute;
  top: 290px;
  right: 430px;
  border: outset, black;
}

.about{
    background-image: url(immaginiprova/shrines/httyd-img/paper1.jpg);
  max-width: 250px;
  position: absolute;
  top: 240px;
  right: 160px;
  padding: 10px;
  text-align: center;
  border: outset, #c4b24a;
  border-radius: 15px;
}

.my-experience{
      background-image: url(immaginiprova/shrines/httyd-img/paper1.jpg);
  max-width: 400px;
  position: absolute;
  top: 550px;
  left: 390px;
  padding: 10px;
  text-align: center;
  border: outset, #c4b24a;
  border-radius: 15px;
}

#arena{
  width: 200px;
  position: absolute;
  top: 530px;
  left: 130px;
  border: outset, #3c2408;
}

#helmet{
  width: 170px;
  position: absolute;
  top: 760px;
  left: 190px;
  border: outset, #002901;
}

#falling{
  width: 200px;
  position: absolute;
  top: 580px;
  right: 330px;
  border: outset, orange;
}

#abshiccup{
  width: 170px;
  border: outset, black;
  position: absolute;
  top: 640px;
  right: 130px;
}

#dirt{
  width: 180px;
  position: absolute;
  top: 820px;
  right: 270px;
  border: outset, #3c2408;
}

#sketch{
  width: 210px;
  position: absolute;
  top: 940px;
  left: 420px;
  transform: rotate(-15deg);
}

#baby{
  width: 200px;
  position: absolute;
  top: 980px;
  left: 540px;
}

#book{
  width: 140px;
  position: absolute;
  top: 900px;
  right: 490px;
}

#trust{
  width: 160px;
  position: absolute;
  top: 1030px;
  right: 380px;
}
.trust-p{
      color: black;
  transform: translate(-50%, -50%);
  background-color: rgba(121, 229, 255, 0.59);
  padding: 10px;
  text-align: center;
  border: outset rgba(0, 174, 216, 0.59);
    transition: opacity 0.3s ease;
  pointer-events: none;
  top: 1180px;
  position: absolute;
  right: 330px;
  opacity: 0;
  z-index: 2;
}
.trust-text:hover .trust-p{
  opacity: 1;
}

#favdragon{
  width: 240px;
  position: absolute;
  top: 930px;
  left: 110px;
  
}

#nadder{
  width: 400px;
  position: absolute;
  top: 1070px;
  left: 140px;
}

#nadder2{
  width: 240px;
  position: absolute;
  left: 430px;
  top: 1200px;
}

#gronchio{
  width: 240px;
  position: absolute;
  top: 900px;
  right: 120px;
}

.growing-up{
        background-image: url(immaginiprova/shrines/httyd-img/paper1.jpg);
  max-width: 300px;
  position: absolute;
  top: 1210px;
  right: 370px;
  padding: 10px;
  text-align: center;
  border: outset, #c4b24a;
  border-radius: 15px;
}

#freedom{
  width: 170px;
  position: absolute;
  top: 1250px;
  right: 160px;
  border: outset, #b6ffff;
}

#goodbye{
  width: 250px;
  position: absolute;
  top: 1380px;
  left: 410px;
}

#king{
  width: 240px;
  top: 1400px;
  left: 140px;
  position: absolute;
  border: outset, pink;
}

#miomarito{
  width: 200px;
  position: absolute;
  top: 1450px;
  right: 450px;
}
#aura{
    color: black;
  transform: translate(-50%, -50%);
  background-color: rgba(255, 165, 0, 0.59);
  padding: 10px;
  text-align: center;
  border: outset #e67b0a;
    transition: opacity 0.3s ease;
  pointer-events: none;
  top: 1640px;
  position: absolute;
  right: 360px;
  opacity: 0;
  z-index: 2;
}
#aura-text:hover #aura{
  opacity: 1;
}

#incubo{
  width: 300px;
  top: 1460px;
  right: 160px;
  position: absolute;
  z-index: 2;
}

#classes{
  width: 160px;
  position: absolute;
  top: 1530px;
  right: 140px;
}

#bewilderbeast{
  width: 250px;
  position: absolute;
  top: 1510px;
  left: 430px;
  border: outset, white;
}

.grateful{
          background-image: url(immaginiprova/shrines/httyd-img/paper1.jpg);
  max-width: 300px;
  position: absolute;
  top: 1630px;
  left: 330px;
  padding: 10px;
  text-align: center;
  border: outset, #c4b24a;
  border-radius: 15px;
}

#thegang{
  width: 180px;
  position: absolute;
  top: 1620px;
  left: 130px;
}

#love{
  width: 180px;
  position: absolute;
  top: 1720px;
  right: 160px;
}

#bizzippo{
  width: 370px;
  position: absolute;
  top: 1720px;
  right: 350px;
  z-index: 1;
}

#friends{
  width: 150px;
  position: absolute;
  top: 1670px;
  right: 430px;
}

#stoic{
  width: 230px;
  position: absolute;
  top: 1810px;
  left: 370px;
}