@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hi+Melody&display=swap');
@import url(fonts.css);


body {
  background-color: rgb(192, 225, 252);
}

header {
  width: 100%;
  height: 100px;
  background-image: url('https://i.pinimg.com/1200x/ef/7b/db/ef7bdb4e6466b925ba7e790488ac3537.jpg');
  background-size: 100%;
  display: flex;
  border: #49385f 2px dashed;
  border-radius: 10px;
  background-position: center;

}

header p {
  font-family: "basic", sans-serif;
  align-content: end;
  margin-left: 70%;
}

footer {
  background-image: url(https://i.pinimg.com/originals/55/e4/14/55e41441164dffc32eb685f4a3579849.gif);
  background-size: 100%;
  height: 150px;
  display: flex;
  text-align: center;
  margin-top: 70px;
  border: rgb(118, 90, 221) 5px solid;
  border-radius: 10px;
  align-content: center;
  justify-content: center;
  background-position: center;
}

footer p {

  font-family: basic;
  color: #fcec78;
  font-size: 30px;
}

.menu {
  margin-left: 60px;
  width: 500px;
  height: 500px;
  background-image: url('/patterns/untitled.png');
  min-width: 500px;
  min-height: 500px;

}

li {
  margin-top: 50px;
  font-size: 20px;


}

li a {
  text-decoration: none;
  font-family: basic;
  color: rgb(176, 191, 240);
}

nav {

  padding-top: 2px;

}

ul {

  list-style: none;
}

.texto {
  margin-left: 30%;
  margin-top: 80px;
  width: 507px;
  height: 605px;
  background-image: url('/patterns/paintlong.png');
  background-size: contain;
  min-width: 507px;
  min-height: 605px;
}

.texto p {
  padding-left: 150px;
  padding-top: 90px;
  width: 300px;
  font-family: basic;
  color: #231a2e;
  font-size: 17px
}

.texto2 {

  width: 900px;
  height: 540px;
  background-image: url('patterns/wordpadbooks.png');
  background-size: contain;
  margin-left: 60px;
  margin-top: -150px;
}

.texto2 p {
 margin-left: 30px;
  padding-top: 0px;
  width: 500px;
  font-family: basic;
  color: #231a2e;
  font-size: 17px
} 

#blink-hard {
  padding-top: 230px;
  margin-left: 30px;
  animation: piscar-seco 0.5s step-start infinite;
}

@keyframes piscar-seco {
  50% {
    visibility: hidden;
  }
}

#navtexto2{
  margin-top: -25px;
  height: 0%;
}

#ultexto2{
 margin: 0%;
  height: 0%;
}

#litexto2{
  font-family: basic;
  margin-top: 1%;
  font-size: 17px;
  height: 20px;
}
/* -----------------------------------books---------------------------- */
.books {
  width: 1334px;
  height: 1200px;
  background-image: url('/patterns/bookstab2.png');
  margin-top: 30px;
  min-width: 1000px;
  min-height: 900px;

}



.books-top {

  width: 91%;
  height: 275px;
  margin-left: 41px;

  background-color: rgb(243, 191, 250);
  scrollbar-color: rgb(115, 255, 241)rgb(127, 100, 181);
  scrollbar-width: thin;
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;

}


.books-center {
  width: 91%;
  height: 275px;
  margin-left: 41px;

  background-color: rgb(243, 191, 250);
  scrollbar-color: rgb(115, 255, 241)rgb(127, 100, 181);
  scrollbar-width: thin;
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;

}




.books-bottom {
  margin-left: 41px;
  width: 91%;
  height: 275px;
  background-color: rgb(243, 191, 250);
  overflow-y: hidden;
  scrollbar-color: rgb(115, 255, 241)rgb(127, 100, 181);
  scrollbar-width: thin;
  overflow-x: scroll;
  display: flex;
}





#titulo {
  height: 30px;
  margin-left: 41px;
  letter-spacing: 1px;
  border: 1px solid #188ebd;
  background-color: #5ec2e9;
  width: 91%;
  font-family: web;
  text-align: center;
  font-size: 30px;
  margin-bottom: 5px;
  margin-top: 0%;


}




.book {
  height: 230px;
margin-top: 0%;
margin-left: 5px;
margin-right: 20px;
border: 2px solid #ba8fff;
    box-shadow: 10px 10px #09fc9f8c;
    transition: transform 0.5s ease;

}
.book:hover{
  box-shadow: 15px 15px #09fc9f8c;
   transform: scale(1.04);
   position: relative;
 z-index: 1;

}
.text{
    margin-top: 7px;
  visibility: hidden;
    font-family: basic;
    text-align: center;
}
.book:hover + .text{
    position: relative;
    visibility: visible;
    font-family: basic;
    text-align: center;
    z-index: 5;
    
}






/* -------------------STICKERS----------------- */
@keyframes sway {
  0% {
    transform: rotate(-5deg);
  }

  50% {
    transform: rotate(5deg);
  }

  100% {
    transform: rotate(-5deg);
  }
}

.stickers-menu {
  position: relative;
  inset: 0;
  height: 0;
}

.stickers-texto12{
    position: relative;
    inset: 0;
    height: 0;
  
}
.stickers-texto22{
    position: relative;
    inset: 0;
    height: 0;
  
}
.stickers-books{
    position: relative;
    inset: 0;
    height: 0;
  
}

.plant {
  position: absolute;
  top: -444px;
  margin-left: 320px;
  animation: sway 3s ease-in-out infinite;
  transform-origin: top right;
  z-index: 10;
}

.coluna1 {
  position: absolute;
  top: -248px;
  margin-left: 280px;
  z-index: 2;

}

.david {
  position: absolute;
  top: -255px;
  margin-left: 320px;
  z-index: 4;

}

.lost {
  position: absolute;
  top: -260px;
  margin-left: 500px;
  z-index: 1;
}
.moon {
  position: absolute;
  top: -440px;
  margin-left: 150px;
  z-index: 1;
  opacity: 0.30;
}

.tvbeach {
    position: absolute;
    top: -280px;
    margin-left: 660px;
}


.palmtrees {
    position: absolute;
    top: -670px;
    margin-left: 660px;
}

.tvpixelbeach {
    position: absolute;
    top: -374px;
    margin-left: 720px;
}

.womanstatue {
    position: absolute;
    top: -196px;
    margin-left: 870px;
}

.tvmtv {
    position: absolute;
    top: -196px;
    margin-left: 1050px;
}

.clippy {
    position: absolute;
    top: -5px;
    margin-left: 1150px;
}

.tvmax {
    position: absolute;
    top: -345px;
    margin-left: 1040px;
}

.cdcup {
    position: absolute;
    top: -315px;
    margin-left: 1230px;
}

.hangingflowers {
    position: absolute;
    top: -30px;
    margin-left: 1190px;
}

.coluna {
  position: absolute;
  top: -120px;
  margin-left: 670px;
  z-index: 2;

}

.coluna3 {
  position: absolute;
  top: -60px;
  margin-left: 590px;
  z-index: 2;

}

.sim {
  position: absolute;
  top: -200px;
  margin-left: 693px;
  z-index: 1;

}

.blueerror {
  position: absolute;
  top: -120px;
  margin-left: 620px;
  z-index: 2;

}

.pixelpalmtree {
  position: absolute;
  top: -110px;
  margin-left: 470px;
  z-index: 2;

}
.godzilla {
  position: absolute;
  top: 300px;
  margin-left: 470px;
  z-index: 2;

}
.skeleton {
  position: absolute;
  top: -250px;
  margin-left: 130px;
  z-index: 2;
  height: 250px;

}
/* -----------------------SCROLLBAR------------------ */
::-webkit-scrollbar-button {
  color: #fcec78;
}

::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

::-webkit-scrollbar-track {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=");
  image-rendering: pixelated;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

::-webkit-scrollbar-track:active {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg==");
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

::-webkit-scrollbar-thumb {
  border-top: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
  width: 16px;
  height: 16px;
  background-color: #cccccc;
  z-index: 1;
}

::-webkit-scrollbar-corner {
  background-color: #cccccc;
}

::-webkit-resizer {
  width: 16px;
  height: 16px;
  background-color: #cccccc;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==");
  background-position: bottom right;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}

::-webkit-scrollbar-button,
.scroll::-webkit-scrollbar-button {
  border-top: 1px solid #cccccc;
  border-left: 1px solid #cccccc;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
  display: block;
  width: 16px;
  height: 16px;
  background-color: #cccccc;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-position: center center;
}

::-webkit-scrollbar-button:active,
.scroll::-webkit-scrollbar-button:active {
  background-position: 2px 2px;
}

::-webkit-scrollbar-button:horizontal:decrement,
.scroll::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC");
}

::-webkit-scrollbar-button:horizontal:increment,
.scroll::-webkit-scrollbar-button:horizontal:increment {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");
}

::-webkit-scrollbar-button:vertical:decrement,
.scroll::-webkit-scrollbar-button:vertical:decrement {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=");
}

::-webkit-scrollbar-button:vertical:increment,
.scroll::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=");
}

::-webkit-scrollbar-button:horizontal:increment:start,
.scroll::-webkit-scrollbar-button:horizontal:increment:start {
  display: none;
}

::-webkit-scrollbar-button:horizontal:decrement:end,
.scroll::-webkit-scrollbar-button:horizontal:decrement:end {
  display: none;
}

::-webkit-scrollbar-button:vertical:increment:start,
.scroll::-webkit-scrollbar-button:vertical:increment:start {
  display: none;
}

::-webkit-scrollbar-button:vertical:decrement:end,
.scroll::-webkit-scrollbar-button:vertical:decrement:end {
  display: none;
}

::-webkit-scrollbar-button:active,
.scroll::-webkit-scrollbar-button:active {
  border-top: 1px solid #868a8e;
  border-left: 1px solid #868a8e;
  border-bottom: 1px solid #868a8e;
  border-right: 1px solid #868a8e;
  box-shadow: none;
}