:root {
  --background-color: #fda3d8;
  --secondary-color: #ffffff;
  --post-background: #00000078;
  --header: url(/imgs/banner/pinky.webp);
  --header-repeat: no-repeat;
  --header-size: cover;
  --main-font: "Public Pixel", sans-serif;
  --blog-font: "LanaPixel", sans-serif;
  --background-image: none;
  --background-size: contain;
  --background-repeat: no-repeat;
}

html {
  background-color: var(--post-background);
}
body {
  color: var(--secondary-color);
  background-color: var(--post-background);
  border-color: var(--background-color);
  border-style: dashed;
  border-width: 2px;
  margin-bottom: 0px;
  text-decoration: none;
}


.visitorcard {
  text-align: center;
  align-items: center;
  border-color: var(--secondary-color);
  border-style: solid;
  border-width: 1px;
  background-color: var(--post-background);
  padding: 2%;
}

canvas {
  position: absolute; /* Allows the canvases to layer on top of each other */
  top: 0;
  left: 0;
  /* animation: shine 3s linear infinite; */
  /* transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out; */
}


/* The card styling: size, background, shadow, and 3D transformation */
#imageCanvas {
  z-index: 1; /* Ensure this is the bottom layer */
  min-width: 500px;
  /* position: relative; */
  display: inline-block;
  width: 500px;
  height: 700px;
  /* background: black; */
  border-radius: 20px;
  overflow: hidden; /* Ensures the content stays inside the card */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Soft shadow around the card */
  transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out; /* Smooth transition for transformations */
  transform-style: preserve-3d; /* Ensures that child elements (image, text) are also part of the 3D effect */
  /* background-image: url(/imgs/cards/bg1.webp); */
}

#imageCanvas2 {
  z-index: 2; /* Ensure this is above #imageCanvas */
  min-width: 500px;
  /* position: relative; */
  display: inline-block;
  width: 560px;
  height: 760px;
  /* width: 700px;
  height: 500px; */
  margin-top: -30px;
  margin-left: -30px;
  border-radius: 20px;
  /* overflow: hidden; Ensures the content stays inside the card */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Soft shadow around the card */
  transform-style: preserve-3d; /* Ensures that child elements (image, text) are also part of the 3D effect */
  /* background-image: url(/imgs/cards/bg1.webp); */
}
/* Adding a hover effect to enhance the card's visual appeal */
#imageCanvas:hover {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2); /* Increases the shadow to make the card feel more elevated */
}


.shine-overlay {
  width: 500px;
  height: 700px;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  align-content: center;
  margin-left: auto;
  margin-right: auto;
}
.shine-overlay:hover .shine {
  display: block;
}

.shine {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 500px;
  height: 700px;
  border-radius: 20px;
  background: #fff;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgba(255, 255, 255, 0)),
    color-stop(50%, rgba(255, 255, 255, 0.8)),
    to(rgba(255, 255, 255, 0))
  );
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0,
    rgba(255, 255, 255, 0.911) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transform: skew(30deg);
  animation: shine 3s linear infinite;
  transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}

@keyframes shine {
  0% {
    left: -50%;
    opacity: 0;
  }
  50% {
    left: 25%;
    opacity: 0.5;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

.visitorcard {
  text-align: center;
  align-items: center;
  border-color: var(--secondary-color);
  border-style: solid;
  border-width: 1px;
  background-color: var(--post-background);
  padding: 2%;
}