@font-face {
  font-family: 'JJK'; /* You can name this whatever you want */
  src: url('Qetod.ttf'); /* The path to your file */
}
@font-face {
  font-family: 'p'; /* You can name this whatever you want */
  src: url('1001fonts-vandals-slash-eula.txt'); /* The path to your file */
}


/* 1. THE WRAPPER */
.banner-container {
  position: relative; /* CRITICAL: This traps the floating text inside this specific box */
  display: block; /* Keeps the box the exact size of your image */
  margin-left:auto;
  margin-right:auto;
  max-width: 640px;
  width: 100%;
}

/* 2. THE IMAGE */
.banner-container img {
  display: block;
  margin:0;
  width: 100%; /* Adjust this based on how big you want the banner */
  border: 2px solid #ffcce6; /* Optional pink border like the screenshot */
  border-radius: 8px; /* Optional rounded corners */
}

/* 3. THE FLOATING TEXT */
.floating-text {
  position: absolute; /* Tells the text to float over everything else */
  
  /* Use top, bottom, left, or right to move it exactly where you want it */
  bottom: 15px; 
  right: 20px;  
  
  /* Make it look cool and readable! */
  font-family: 'JJK', sans-serif;
  font-size: 32px;
  color: #ff9eba; /* Pastel pink */
  font-weight: bold;
  
  /* PRO TIP: A text shadow acts like an outline so you can read it over busy images */
  text-shadow: 2px 2px 0px #fff, -2px -2px 0px #fff, 2px -2px 0px #fff, -2px 2px 0px #fff; 
}


body{
background-color:#ffdeea;
background-image: repeating-linear-gradient(
    -45deg,           /* Angle of the stripes */
    #ffdeea,          /* Color 1 starts */
    #ffdeea 15px,     /* Color 1 ends at 15px */
    #ffffff 15px,     /* Color 2 (white) starts at 15px */
    #ffffff 30px      /* Color 2 (white) ends at 30px */
  );
}

.anime-char {
  position: fixed;
  bottom: 30px;
  right: 30px;
  text-align: center;
  z-index: 1000; /* Keeps it on top of everything else */
  width: 250px;
}

.anime-char2 {
  position: fixed;
  bottom: 30px;
  left: 30px;
  text-align: center;
  z-index: 1000; /* Keeps it on top of everything else */
  width: 300px;
}


.tiktok-link {
text-align:center;
color:pink;
display:block;
margin: 0 auto;
text-shadow: 2px 2px 1px black;
}
.icon {
width:20px;
}


h1 {
font-family: 'JJK', sans-serif;
font-size: 100px;
text-shadow: 10px 10px 4px #8c3189;
}

h2 {
  font-family: fantasy;
  font-weight: 400;
  font-style: bold;
  font-size: 30px;
  text-align: center;
}
h4 {
text-align:center;
font-size: 25px;
text-shadow: 2px 2px 0px grey;
font-weight: bold;
margin: 0 auto;
display: block;
color: #ebc3d2;
}
.img {
border-radius: 20px;
border-color: black;
padding: 5px;
width: 400px;
border: 10px solid #ffcce6;
margin: 0 auto;
display: block;
}



h3{
text-align: center;
text-decoration: underline wavy;
font-size: 50px;
}
.link {
text-align: center;
color: black;
margin: 0;
display: block;
}
.wrapper {
display: block;
margin: 0 auto;
padding: 5px;
background-color: white;
width: 1000px;
border-radius: 50px;
border: 6px solid #c728c2;
  /* Embedded SVG pattern of grey stars */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='%23aaaaaa'%3E%3Cpath d='M12 2l2.4 7.2h7.6l-6 4.8 2.4 7.2-6-4.8-6 4.8 2.4-7.2-6-4.8h7.6z'/%3E%3C/svg%3E");
  background-size: 18px 18px; /* Size of the repeating stars */
}
p{
text-align:center;
font-size: 25px;
text-shadow: 2px 2px 0px grey;
font-weight: bold;
margin: 0 auto;
display: block;
color: #ebc3d2;
font-family:'p';
}
.wrapper2 {
display: block;
margin: 0 auto;
padding: 5px;
background-color: white;
border-radius: 50px;
border: 10px solid #ebc3d2;
}

.retro-iframe {
  border: 10px solid #ffcce6;
  background-color: #c0c0c0;
  outline: 2px solid #000000;
  image-rendering: pixelated;
  display: block;
  margin: 0 auto;

}


.gallery {
  display: block;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.gallery img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  cursor: pointer;
  border: 10px solid black;
  transition: transform 0.2s, border-color 0.2s;
}

.gallery img:hover {
  transform: scale(1.35);
  border-color: #ffdeea;
}

#header {
  padding: 5px;
  border: 5px solid black;
  background-color: white;
  text-align: center;
  display:block;
  margin right: 0;
  margin left: 900;
  width: 20px;
  height: 30px;
  color: black;
  font-family: p, sans-serif;
  
  
}