/* Reset default browser padding/margin */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body {
  font-family: sans-serif;
  background-image: url("http://media.tumblr.com/tumblr_matzpqY3fx1qid2nw.png");
  cursor: url(immaginiprova/cursor/cursor.gif), auto;
}

a, button, .clickable {
  cursor: url(immaginiprova/cursor/cursor2.png), pointer;
}

.floating-image1{
  position: absolute;
  left: 900px;
  top: -70px;
  z-index: 1000;
  pointer-events: none;
}

.floating-image2{
  position: absolute;
  right: 900px;
  top: -70px;
  z-index: 1000;
}

.container1{
  margin: 0 auto;
    height: 149px;
  width: 600px;
}

.container {
  max-width: 1000px;
  height: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #ffdcec;
  background-image: url(immaginiprova/postbg3.gif);
  border: 2px solid #BDB2FF;
}

/* Header / Banner */
.banner {
  background-image: url(immaginiprova/Moony-s-Corner-.png);
  color: white;
  padding: 20px;
  height: 149px;
  width: 600px;
  align-self: center;
}

/*Nav Bar*/
.navbar {
  background-color: #BDB2FF;
  padding: 10px 0;
}

.navbar ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
  gap: 30px;
}

.navbar li a {
  color: #9BF6FF;
  text-decoration: none;
  font-weight: bold;
  padding: 8px 12px;
  transition: background-color 0.3s ease;
}


.navbar li a:hover {
    background: linear-gradient(90deg, #FFADAD, #FFD6A5, #FDFFB6, #CAFFBF, #9BF6FF, #A0C4FF, #BDB2FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text text-decoration;
}

.floating-image-note{
  position: absolute;
  width: 450px;
  transform: rotate(11deg);
  left: 400px;
  top: 90px;
  pointer-events: none;
}

.note-paragraph{
  position: absolute;
  width: 450px;
  transform: rotate(11deg);
  left: 490px;
  top: 350px;
  pointer-events: none;
}

.note-paragraph .p{
  position: absolute;
  width: 450px;
  transform: rotate(11deg);
}

.p-font{
  font-family: 'times new roman';
  font-size: large;
}

.floating-image-washi1{
  position: absolute;
  width: 150px;
  transform: rotate(-11deg);
  left: 450px;
  top: 240px;
  z-index: 2;
  pointer-events: none;
}

.floating-image-washi2{
  position: absolute;
  width: 150px;
  transform: rotate(-20deg);
  left: 640px;
  top: 500px;
  z-index: 2;
  pointer-events: none;
}

.sticker-1{
  position: absolute;
  width: 150px;
   left: 785px;
  top: 220px;
}

.sticker-2{
  position: absolute;
  width: 120px;
   left: 785px;
  top: 380px;
}
.sticker-3{
  position: absolute;
  left: 720px;
  top: 230px;
  transform: rotate(20deg);
}

.sticker-4{
  position: absolute;
  width: 120px;
  left: 815px;
  top: 490px;
}

.sticker-5{
  position: absolute;
  left: 690px;
  top: 250px;
}

.sticker-6{
  position: absolute;
}

.sticker-7{
  position: absolute;
  top: 167px;
}

.sticker-8{
  position: absolute;
   left: 640px;
  top: 230px;
}

.sticker-9{
  position: absolute;
  left: 1080px;
  top: 153px;
}

.sticker-10{
  position: absolute;
  left: 1000px;
  top: 153px;
}


.tama{
  position: absolute;
  left: 440px;
  top: 537px;
  transform: rotate(-15deg)
}

.tama-p-paragraph{
  position: absolute;
  left: 530px;
  top: 537px;
  transform: rotate(-15deg);
}

.tama-p{
  filter: drop-shadow(1px 1px 0 #9BF6FF) drop-shadow(-1px 1px 0 #CAFFBF) drop-shadow(0 -1px 0 #BDB2FF) drop-shadow(1px 0 #A0C4FF);
color: #FFFFFC;
font-size: 1.5em;
z-index: 10;
  text-decoration: underline wavy;
}

/* Main content area */
.main-content {
  display: flex;
  flex: 1;
  padding: 20px;
  gap: 20px;
}

/* Sidebars */
.sidebar {
  width: 20%;
  background-color: #ffe3ec;
  background-image: url(immaginiprova/sidebar1copia.png);
  padding: 15px;
  border-radius: 15px;
  border: solid 2px #8EECF5;
}

.left-sidebar {
  order: 1;
}

.status-box{
  position: absolute;
  box-sizing: border-box;
  border-width: 10px;
  border-style: solid;
  border-image: url("https://files.catbox.moe/05dnpe.png") 7 fill round;
  padding: 10px;
  left: 205px;
  overflow-y: scroll;
  height: 170px;
}

.status-box::-webkit-scrollbar{
  display: none;
}

.status-text-p{
  font-family: 'Pacifico';
  max-width: 125.75px;
  max-height: 152px;
}

.status{
  font: bold;
  font-size: larger;
  color: #CAFFBF;
  -webkit-text-stroke: 1px #A0C4FF;
}

.status-time{
  font-family: 'Pacifico';
}

.dream-stamp{
  position: absolute;
  left: 240px;
  top: 450px;
}

.update-log{
  position: absolute;
  background-image: url(immaginiprova/updatelogbg.gif);
  padding: 10px;
  top: 530px;
  border: groove, #CAFFBF;
  width: 155px;
  height: 155px;
}

.flash-news{
  background-color: #CAFFBF;
  border: double;
  align-self: center;
  text-align: center;
  color: #5696ff;
}

.updates{
  padding-top: 10px;
  overflow-y: scroll;
  height: 100px;
  font-family: 'times new roman', serif;
}

.updates::-webkit-scrollbar{
  display: none;
}

.gay{
  position: absolute;
  top: 700px;
  left: 220px;
}

.daydreamer{
  position: absolute;
  top: 725px;
  left: 220px;
}

.faerie-dust{
  position: absolute;
  top: 750px;
  left: 220px;
}

.nobility{
  position: absolute;
  font-family: 'Times New Roman', serif;
  font-size: medium;
  color: #7760ff;
  top: 790px;
  left: 220px
}

.fluttershy{
  position: absolute;
  width: 150px;
  top: 840px;
  left: 220px;
}

.angelic{
  position: absolute;
  top: 865px;
  left: 220px;
}

.bunnies{
  position: absolute;
  top: 900px;
  left: 240px;
}

.bottom-div{
  margin-top: 720px;
}

.blog-posts {
  flex: 1;
  background-image: url(immaginiprova/postbg4.png);
  border: solid 2px #BDB2FF;
  border-radius: 12px;
  padding: 15px;
  order: 2;
}

.guest-book{
  position: absolute;
  width: 200px;
  bottom: -160px;
  left: 710px;
  border: groove #ff4949;
  transition: box-shadow 0.3s ease;
}

.guest-book:hover{
  box-shadow: 0 0 20px 10px rgba(255, 0, 56, 0.6);
}

.sticker-13{
  position: absolute;
  bottom: 3px;
  left: 700px;
}

.sticker-14{
  position: absolute;
  bottom: 1px;
  left: 870px;
  transform: rotate(10deg)
}

.ogcat{
  position: absolute;
  top: 780px;
  left: 730px;
}

.princess{
  position: absolute;
  top: 780px;
  left: 770px;
}

.stamp-marquee {
  overflow: hidden;
  width: 500px;
  height: 60px; /* Adjust to fit your stamps */
  position: absolute;
  top: 840px;
}

.stamp-track {
  display: flex;
  width: max-content;
  animation: scroll-stamps 30s linear infinite;
}

.stamp-track .stamp {
  margin-right: 10px;
  height: 31px; /* adjust as needed */
  width: auto;
}

@keyframes scroll-stamps {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.stamp-marquee:hover .stamp-track {
  animation-play-state: paused;
}

.blinkie-marquee {
  overflow: hidden;
  width: 500px;
  height: 20px; /* Adjust to fit your stamps */
  position: absolute;
  top: 885px;
}

.blinkie-track {
  display: flex;
  width: max-content;
  animation: scroll-blinkie 30s linear infinite;
}

.blinkie-track .blinkie {
  margin-right: 10px;
  height: 20px; /* adjust as needed */
  width: auto;
}

@keyframes scroll-blinkie {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

.blinkie-marquee:hover .blinkie-track {
  animation-play-state: paused;
}


.stamp-marquee2 {
  overflow: hidden;
  width: 500px;
  height: 60px; /* Adjust to fit your stamps */
  position: absolute;
  top: 930px;
}

.stamp-track2 {
  display: flex;
  width: max-content;
  animation: scroll-stamp2 30s linear infinite;
}

.stamp-track2 .stamp2 {
  margin-right: 10px;
  height: 31px; /* adjust as needed */
  width: auto;
}

@keyframes scroll-stamp2 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.stamp-marquee2:hover .stamp-track2 {
  animation-play-state: paused;
}


.rabbit-hearted{
  position: absolute;
  top: 650px;
  left: 500px;
}

.moon-protection{
  position: absolute;
  top: 600px;
  left: 620px;
}

.id-card{
  position: absolute;
  width: 190px;
  top: 680px;
  left: 470px;
  border: groove #BDB2FF;
  transition: box-shadow 0.3s ease rotate;
}

.id-card:hover{
  box-shadow: 0 0 20px 10px #9BF6FF;
  transform: rotate(15deg);
}

.right-sidebar {
  order: 3;
}

.sticker-11{
  position: absolute;
  width: 190px;
  left: 963px;
  top: 255px
}

.sticker-12{
  position: absolute;
  width: 100px;
  left: 1010px;
  top: 268px;
}

.scroll-box{
  position: absolute;
  height: 120px;
  width: 170px;
  top: 300px;
  overflow-y: scroll; 
  padding: 10px;
  border-radius: 12px;
  background: none;
  font-family: 'Pacifico';
}

.scroll-box::-webkit-scrollbar {
  display: none;              
}

.to-do{
  font-size: larger;
  color: #CAFFBF;
  -webkit-text-stroke: 1px #A0C4FF;
}

.barbie{
  position: absolute;
  left: 990px;
  top: 450px;
}

.barbie-tagline{
  position: absolute;
  font-family: 'Times New Roman', serif;
  font-size: medium;
  color: #FFFFFC;
  top: 490px;
  left: 990px;
}

.cinnamo{
  position: absolute;
  top: 460px;
  left: 1090px
}

.teddy-stamp{
  position: absolute;
  top: 540px;
  left: 1010px;
}

.bookcollector{
  position: absolute;
  top: 610px;
  left: 983px;
}

.cats{
  position: absolute;
  top: 635px;
  left: 983px;
}

.creative{
  position: absolute;
  top: 660px;
  left: 983px;
}

.book-club{
  position: absolute;
  overflow: hidden;
  width: 150px;
  top: 700px;
  left: 983px;
  border: groove #3d86ff;
}

.book-club:hover {
  animation: wiggle infinite 0.4s ease-in-out;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(2deg); }
  75% { transform: rotate(-2deg); }
}

.choco{
  position: absolute;
  top: 850px;
  left: 983px;
}

.eat-the-rich{
  position: absolute;
  top: 875px;
  left: 983px;
}

.fuck-fascists{
  position: absolute;
  top: 900px;
  left: 983px;
}

.made-by-a-girl{
  position: absolute;
  top: 925px;
  left: 983px;
}

.tinyfrog{
  position: absolute;
  top: 950px; 
  left: 1060px;
}

.tinyfish{
  position: absolute;
  top: 940px;
  left: 1090px;
}

.tinyunicorn{
  position: absolute;
  top: 950px;
  left: 1120px;
}

/* Footer */
.footer {
  background-color: #BDB2FF;
  border: 2px solid #BDB2FF;
  color: #FDFFB6;
  text-align: center;
  padding: 10px;
}





/*MOBILE RESPONSIVNESS*/