/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

html {
  min-height: 100%;
  cursor: url("https://64.media.tumblr.com/56d2a5e0b587b2ea6c13da7854bb9567/9e19bc2410f21663-05/s75x75_c1/d69cb9fed24f7975b64b34122fd954f56cb56588.gif") 4 12, auto;
}

body {
  background-image: url("https://pelmenicat.neocities.org/image/checkered%20textured%20bg.png");
  background-size: cover;
  padding-top: 200px;
  color: black;
  height: 1200px;
} 

.outer {
  background-image: url("https://pelmenicat.neocities.org/image/plaid%20background.jpg");
  border: 8px double white;
  border-radius: 180px 100px 20px 20px;
  margin: auto;
  max-width: 1000px;
  height: 1100px;
  padding: 4px;
  position: relative;
  z-index: 3;
}


header {
  background-image: url("https://pelmenicat.neocities.org/image/checkerboard.jpg");
  background-size: contain;
  border: 7px double black;
  border-radius: 180px 80px 8px 8px;
  margin: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  color: white;
  width: 930px;
  height: 160px;
  z-index: 5;
}

header h1 {
  position: absolute;
  top: -90px;
  right: 75px;
  font-size: 50px;
  text-shadow: 0 0 10px rgba(255, 4, 4, 0.77);
  background-image: url('https://pelmenicat.neocities.org/image/summer%20hikaru%20died%20sunset%20wallpaper.jpg'); 
  background-size: 200%; /* Enlarged for smooth animation */
  background-position: 0 50%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animate-background 5s infinite alternate linear;
}

@keyframes animate-background {
    0% {
        background-position: 0 50%;
    }
    100% {
        background-position: 100% 50%;
    }
  }

.buttons {
  margin: auto;
  margin-top: 25px;
  background-image: url("https://pelmenicat.neocities.org/image/buttons.jpeg");
  border: black 5px double;
  height: 100px;
  width: 400px;
}

.buttons-inner {
  background-image: url("https://pelmenicat.neocities.org/image/plaid%20background.jpg");
  background-size: contain;
  border: white 4px double;
  height: 60px;
  margin: auto;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 15px;
}

.buttons-inner p{
  max-width: 300px;
  margin: 15px;
  color: white;
  font-size: 10px;
}


.carousel {
  display: flex;
  flex-direction: row;
}

.carousel p {
  color: white;
  margin: auto;
  text-align: center;
}

.carousel-items {
  background-image: url("https://pelmenicat.neocities.org/image/playing%20card%20bg.jpg");
  background-size: contain;
  border: 4px double white;
  border-radius: 8px;
  height: 90px;
  width: 920px;
  padding: 4px;
  margin: auto;
}

.ribbon-half{
  position: absolute;
  transform: rotate(-10deg);
  width: 930px;
  top: 200px;
  left: 20px;
}

.hikaru {
  position: absolute;
  height: 200px;
  top: 198px;
  right: 250px;
  z-index: 5;
}

.yoshiki {
  position: absolute;
  height: 200px;
  top: 198px;
  left: 250px;
  z-index: 5;
}

.killua {
  position: absolute;
  height: 180px;
  top: 220px;
  right: 440px;
  z-index: 5;
}

.flowey {
  position: absolute;
  height: 150px;
  top: 66px;
  left: 600px;
}

.floweytv {
  position: absolute;
  transform: rotate(-30deg);
  height: 200px;
  top: -120px;
  left: -90px;
  z-index: 1;
}

.omori {
  position: absolute;
  height: 80px;
  transform: rotate(-30deg);
  top: 70px;
  left: 150px;
}

.mari {
  position: absolute;
  height: 80px;
  transform: rotate(-30deg);
  top: 35px;
  left: 210px;
}

.audrey {
  position: absolute;
  height: 110px;
  transform: rotate(-30deg);
  top: -18px;
  left: 250px;
}

.candance {
  position: absolute;
  height: 70px;
  bottom: 480px;
  right: 450px;
  z-index: 6;
}

.redflower {
    position: absolute;
  transform: rotate(50deg);
  height: 350px;
  top: 15px;
  right: 100px;
  z-index: 4;
}

.ribbon-content {
  position: absolute;
  width: 930px;
  top: 275px;
  left: 40px;
}

marquee {
  height: 100%;
  direction: left;
  display: inline-block;
  
}

.carousel img {
  height: 100%;
  margin-left: 5px;
  margin-right: 5px;
}


.content {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: auto;
  margin-top: 30px;
  width: 920px;
  max-height: 800px;
}

.left {
  border: #b53128 5px solid;
  border-style: ridge;
  width: 280px;
  height: 600px;
  display: flex;
  margin: auto;
  margin: 8px;
  background-image: url("https://pelmenicat.neocities.org/image/playing%20card%20bg.jpg");
  background-size: contain;
  flex-direction: column;
}

.buttonStamps {
  display:flex;
  flex-wrap: wrap;
}

.center {
  background-image: url("https://pelmenicat.neocities.org/image/playing%20card%20bg.jpg");
  background-size: contain;
  border: #b53128 5px solid;
  border-style: ridge;
  width: 460px;
  height: 600px;
  margin: 8px;
  display: flex;
  flex-direction: column;
}

  #scrollbar1::-webkit-scrollbar {
  width: 10px;
  }
          
  #scrollbar1::-webkit-scrollbar-track {
  background-color: #a3a0a3;
  border: 1px solid #cacaca;
  }
          
  #scrollbar1::-webkit-scrollbar-thumb {
  background-color: #400f0f;
  }

.about {
  border: #4d130f 6px double;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 8px;
  height: 800px;
  background-color: rgba(236, 201, 219, 0.6);
  align-items: center;
  overflow-y: scroll;
}

.log{
  overflow-y: scroll;
  border: #4d130f 3px solid;
  background-image: url("https://pelmenicat.neocities.org/image/half%20card.png");
  background-size: cover;
  background-color: #ede7d8;
  height: 98%;
  margin: 8px;
}

.log p{
  font-size: 13px;
  margin-left: 4px;
  margin-right: 4px;
  background-color: rgba(237, 231, 216, 0.7);
  border: 4px double #4d130f;
}

.about p, ul{
  margin: auto;
  margin: 15px;
  color: #8a1515;
  font-size: 12px;
}

.aboutHeaderImg{
  display: flex;
  flex-direction: row;
}

.aboutStampsV {
  display: flex;
  flex-direction: column;
  margin: auto;
}

.aboutStampsV img {
  margin-bottom: 1px;
}

.mysteryDungeon {
  margin-left: 6px;
  margin-top: 6px;
  height: 160px;
  width: 60%;
  border: #b53128 5px solid;
  border-style: ridge;
  align-items: center;
}

.full-width {
  width: 100%;
}

.right {
  background-image: url("https://pelmenicat.neocities.org/image/playing%20card%20bg.jpg");
  background-size: contain;
  border: #b53128 5px solid;
  border-style: ridge;
  display: flex;
  flex-direction: column;
  width: 250px;
  height: 600px;
  margin: 8px;
}

.footer {
  background-image: url("https://pelmenicat.neocities.org/image/playing%20card%20bg.jpg");
  background-size: contain;
  border: #b53128 5px solid;
  border-radius: 0 0 20px 20px;
  border-style: ridge;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  height: 115px;
  margin: 8px;
  margin-left: 48px;
  margin-right: 48px;
}

.typewriter{
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(40, end),
    blink-caret .75s step-end infinite;
  font-family: monospace;
  margin-top: 10px;
  margin-left: 35px;
  margin-bottom: 5px;
  font-size: 15px;
  color:white;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

.nav{
  background-image: url("https://pelmenicat.neocities.org/image/half%20card.png");
  background-size: cover;
  background-color: rgba(237, 231, 216, 0.5);
  background-color: #ede7d8;
  position: absolute;
  border-radius: 8px;
  top: 90px;
  right: -230px;
  border: black 7px double;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 8px;
  width: 190px;
  height: 300px;
  align-items: center;
}

.nav p{
  margin: auto;
  margin: 10px;
  color: #8a1515;
}

.navlink{
  margin: auto;
  display: flex;
  flex-direction: column;
  width: 85%;
  margin-top: 3px;
  margin-bottom: 3px;
}

.navlink a{
  margin-bottom: 3px;
  font-size: 15px;
  color: #FFE6E6;
}

.navlink li{
  background: 360909;
  background: linear-gradient(90deg,rgba(54, 9, 9, 1) 0%, rgba(184, 0, 0, 1) 50%, rgba(255, 255, 255, 1) 100%);
  border: #360909 2px solid;
  list-style-type: none;
  margin-bottom: 3px;
}

.navlink:has(li:hover) li:not(:hover) {
filter: blur(4px)
}

/** .flowey.horizontal-shake {
  animation: horizontal-shaking 0.35s infinite;
}*/

@keyframes horizontal-shaking {
 0% { transform: translateX(0) }
 25% { transform: translateX(5px) }
 50% { transform: translateX(-5px) }
 75% { transform: translateX(5px) }
 100% { transform: translateX(0) }
}

.navlink img{
  margin-left: 8px;
  margin-right: 2px;
}

/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  height: 210px;
}

.slide{
  position:absolute;
  top: 439px;
  right: 60px;
  opacity: 0;
  transition: opacity 1s ease;
}

.slide p {
  text-align: center;
  font-size: 13px;
  text-shadow: 2px 2px 0 #4074b5, 2px -2px 0 #4074b5, -2px 2px 0 #4074b5, -2px -2px 0 #4074b5, 2px 0px 0 #4074b5, 0px 2px 0 #4074b5, -2px 0px 0 #4074b5, 0px -2px 0 #4074b5;
  color: #FFFFFF;
}

.imgSlide{
  width: 160px;
  height: 90px;
  margin: 9px;
}

.prev{
  position: absolute;
  top: 600px;
  right: 180px;
  width: 28px;
  height: 28px;
  border: 0;
}

.next{
  position: absolute;
  top: 600px;
  right: 95px;
  width: 28px;
  height: 28px;
  border: 0;
}

.steampunk {
  position: absolute;
  transform: rotate(60deg);
  height: 260px;
  bottom: -15px;
  right: -10px;
  z-index: 0;
}

.mountains-of-christmas-regular {
  font-family: "Mountains of Christmas", serif;
  font-weight: 400;
  font-style: normal;
}

.mountains-of-christmas-bold {
  font-family: "Mountains of Christmas", serif;
  font-weight: 700;
  font-style: normal;
}

.snowburst-one-regular {
  font-family: "Snowburst One", system-ui;
  font-weight: 400;
  font-style: normal;
}