@import url('https://fonts.googleapis.com/css2?family=Cause:wght@100..900&family=Dancing+Script:wght@400..700&display=swap');

* {
  filter:sepia(10%);
}
::selection {
  color: white; 
  background: #ffc5a6;
}
body {
  margin: 0; 
  min-height: 100vh;
  padding: 10%;
  padding-right: 50%;
  background: 
 linear-gradient(0deg,rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 80%),  url("https://i.ibb.co/HLZxjJYb/b5c50598d80791b6cb34c2a0c77040cb.jpg");
  background-size: contain;
}



/* =========================================
   MAIN CONTAINER
   ========================================= */
p {
  
  font-family: "Cause", cursive;
  font-weight:bold;
  color:white;
  text-shadow: 0px 1px 1px #713D16, -1px 0px 1px #713D16, 0px -1px 1px #713D16, 1px 0px 1px #713D16, 1px 0px 1px #713D16;
}
b {
color:#cc9b85;
}
i {
  color:gray;
  font-family: "Cause", cursive;
}
a {
  color:pink;
  text-decoration: none;
}
.main {
  
  animation: slide-in 1.2s ease-out forwards;
  box-sizing: border-box;
  position: absolute;
  width: 550px;
  height: 710px;
  background-image: url("https://i.postimg.cc/g0DRLBqF/38-sin-titulo-20260808114134-edit-3640676597293.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border: 25px solid transparent;
  border-image: url("https://i.ibb.co/77drTzQ/39-sin-t-tulo-20260808150547.png") 100 round;
  border-image-outset: 0px;
  filter: drop-shadow(0px 0px 10px #fff) drop-shadow(0px 0px 20px #fff);
  isolation: isolate;
}

.title {
  position:relative;
  top:-80px;
  height:150px;
  background-image: url("https://i.postimg.cc/VsFxF5C9/41-sin-titulo-20260808220544.png");
  background-size: 500px;
  background-repeat:no-repeat;
  z-index: 9999;
}
.content {
  position: relative;
  margin-left: 50px;
  margin-top:-90px;
  height: 360px;
  width: 60%;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  mask-image: linear-gradient(
  to bottom,
  black 55%,
  transparent 100%
);
}


/* =========================================
   ZAYNE
   MIDDLE LAYER
   ========================================= */

.zayne {
  position: absolute;

  background-image: url("https://i.postimg.cc/FsLLVKgc/38-sin-titulo-20260808114449-edit-132945376845462.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  width: 400px;
  height: 500px;
  bottom: 0;
  left: 230px;

  z-index: 5;
}
.pics {
  position: absolute;
transform: rotate(-20deg);
  background-image: url("https://i.postimg.cc/65mnn5b3/39-sin-titulo-20260808182207.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
filter:drop-shadow(0px 0px 5px black);
  width: 400px;
  height: 400px;
  bottom: -110px;
  left: -100px;
  z-index: 5;
}
.pics:hover {
  transform: rotate(-10deg);
}
.one {
  position: absolute;
transform: rotate(-20deg);
  background-image: url("https://64.media.tumblr.com/0a076d26505a7ea34746a199df44dc11/6b3b774f18e1d3a8-a6/s1280x1920/e04dd59f6adc0d86db2363d31084449aa76fcac7.pnj");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(100%) sepia(170%)  saturate(120%) drop-shadow(0px 3px 4px white)
 ;
  width: 200px;
  height: 200px;
  top: -25px;
  right: -10px;
  z-index: 999;
  }
.div-one {
  position: absolute;
  background-image:url("https://i.ibb.co/mCP89Hz0/38-sin-t-tulo-20260808190129.png");
  background-size:300px;
  background-repeat: repeat-x;
  top: -30px;
  left: 0;
  width: 100%;
  height: 190px;
  filter:drop-shadow(0px 0px 5px #000);
  z-index: 50;
}
.div-two {
  position: absolute;
  background-image:url("https://64.media.tumblr.com/f1bc031795f70c8633273b0ae9a4072d/b3d328cbd1a500dd-ea/s2048x3072/83d060f08e289562fe97dcbff5faaa50613e3715.pnj");
  background-size:200px;
  background-repeat: repeat-x;
  top: 20px;
  left: 0;
  width: 100%;
  height: 50px;
  z-index: 40;
}

.credits {
  color: white;

  position: absolute;

  left: 580px;
  top: 20px;

  height: auto;
  width: auto;
}
@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateX(-150px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
::-webkit-scrollbar {
      width: 0;
      /* remove scrollbar space */
      background: transparent;
      /* to make scrollbar invisible */
    }

    ::-webkit-scrollbar-thumb {
      background: transparent;
    }