/* You can either copy the below and paste it between style tags on your HTML page, OR you can copy this to a file and name it .css and link it from your HTML page. */
:root {
  --bg-color:rgba(204, 203, 209, 0.76);
  --border-color:#8471a9;
  --subtitle-color:#615069;
  --link-color:#716f73;
}

html, body {
  margin:0;
  padding:0;
  background-color:#ffffff;
  background-attachment:fixed;
  background-image: 
    linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.6)), /* dark overlay */
    url('https://sadhost.neocities.org/images/tiles/wmnbg.jpg');
  background-repeat: repeat;
  background-position: top left;
  background-size: auto;
}
body a {
  color:var(--link-color);
}


@font-face {
  font-family: 'Love LetterTW';
  src: url('Lovelt__.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
font-family: 'Love LetterTW', sans-serif;
}


.header-wrapper {
  position: absolute;
  top: 10%;          /* distance from top */
  left: 50%;         
  transform: translateX(-50%); /* centers horizontally */
  perspective: 1000px;         /* adds 3D depth */
  z-index: 1000;
}

.rotating-header {
  font-family: sans-serif;
  font-size: 60px;
  color: #716f73;
  text-align: center;

  transform-style: preserve-3d;
  animation: rotateYAnim 2s linear infinite;
}

@keyframes rotateYAnim {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}


/* wrapper/header */
.hero {
  position: relative;
  width: 400px;
  height: 400px;
  overflow: hidden;
  cursor: pointer;
  /* base (original) image */
  background-image: url('https://safebooru.org/images/20/9646e1bb4b3c5c601c5a35dd774060f38ab23b46.jpg');
  background-repeat: no-repeat;
  background-position: center top;          /* keep top anchored so cropping hits bottom */
  background-size: 100% 103%;               /* slight horizontal/vertical stretch -> more bottom crop */
  transition: transform 1s ease;         /* optional subtle scale on hover */
}

/* overlay image sits above and will fade in on hover */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;                                  /* top:0; right:0; bottom:0; left:0; */
  pointer-events: none;                      /* click passes through if needed */
  background-image: url('https://i.pinimg.com/736x/26/66/ac/2666aca811f7d897a84fe40eacf924d7.jpg'); /* replace with your second image */
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 103%;                /* match sizing / crop behavior */
  opacity: 0;
  transition: opacity 400ms ease-in-out;     /* fade speed */
  will-change: opacity;
}

/* desktop hover + keyboard focus */
.hero:hover::before,
.hero:focus::before,
.hero.focused::before {   /* .focused is used by small touch JS below */
  opacity: 1;
}

/* optional subtle zoom while hovered (looks nice with fade) */
.hero:hover,
.hero:focus,
.hero.focused {
  transform: scale(1.00);
}

.flex {
  display:flex;
}
.sidebar {
  background-color:var(--bg-color);
  max-width:250px;
  width:200px;
  height:100vh;
  border:1px solid var(--border-color);
  position:fixed;
}
article {
  background-color:var(--bg-color);
  border:1px solid var(--border-color);
  margin-top:20px;
  max-width:370px;
  margin-left:10px;
  margin-right:10px;
  
}
.subtitle {
  color:var(--subtitle-color);
  font-size:20px;
  font-weight:bold;
  border-bottom:2px solid var(--subtitle-color);
  margin-left:10px;
  margin-right:10px;
  text-align:right;
  padding-top:20px;
}
article > p {
  padding:10px;
  padding-left:20px;
}
.links {
  list-style-type:'+';
  font-size:16px;
  
}
.links li a {
  color:var(--link-color);
  letter-spacing:1px;
  text-decoration:none;
}

p {
  font-size: 16px;
}

main {
  margin-top:-21px;
}
   section > p {
     padding:10px;
   }
footer {
  margin-left:20px;
  max-width:30%;
  font-size:12px;
}

 @media only screen and (max-width: 630px) {
   .sidebar {
     position:relative;
     max-width:100%;
     width:100%;
     height:150px;
     display:flex;
     flex-direction:row;
     flex-wrap:wrap;
     overflow:hidden;
   }
   .flex {
     flex-wrap:wrap;
     flex-direction:row;
   }
   .right {
     order:1;
     width:100%;
   }
   .left {
     order:2;
   }
   section {
     display:flex;
     flex-wrap:wrap;
     width:120px;
   }
}

.badge-container {
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 1000;
}
.badge-container img {
  display: block;
  transition: transform 0.2s ease, filter 0.2s ease;
  cursor: pointer;
}
.badge-container img:hover {
  transform: scale(1.05);       /* subtle zoom on hover */
  filter: brightness(1.2);      /* brighten on hover */
}

.cbox-frame {
    position: fixed;       /* stays in place when scrolling */
    top: 2%;               /* distance from top, adjusts with screen */
    right: 2%;             /* distance from right edge */
    width: 18vw;           /* 20% of the viewport width */
    height: 45vh;          /* 40% of the viewport height */
    max-width: 400px;      /* optional max size */
    max-height: 600px;     /* optional max size */
    min-width: 200px;      /* optional min size */
    min-height: 300px;     /* optional min size */
    border: 2px solid var(--border-color);
    opacity: 0.65;
    z-index: 1000;
}