.title {
  margin-left: 100px;
  text-decoration: underline;
    color: red;
  font-size: 45px;
  -webkit-text-stroke: 2px black; /* Adds a blue border */
}
.header {
  padding: 2px;
  text-align: center;
  background: #4a0b0b;
  color: white;
font-family: 'Minecrafttext', sans-serif;
  font-size: 30px;
}


#profile {
  display: flex;
  flex-direction: column; /* Stack everything vertically */     /* Center horizontally */
    font-family: 'Minecrafttext', sans-serif;
  
}

#mypfp {
  position: relative;
  margin-right: .10px;
    width: 100%;              /* Responsive to container */
  max-width: 500px;         /* Don't let it grow past this size */
  height: auto;

}

/* heres a mc font */

@font-face {
  font-family: 'Minecrafttext';
  src: url('fonts/F77MinecraftRegular-0VYv.ttf') format('woff2');
  
}


/* mc signNN STUFFFFFFFFFFF*/
.sign-container {
  position: relative;
  width: 500px; /* Or whatever fits your sign image */
  height: auto; /* Let the image set the height */
  margin: 10px;
}

.sign-image {
  width: 100%;
  display: block;
}

.sign-text {
  position: absolute;
  top: 20px;  /* adjust based on sign image */
  left: 30px; /* adjust based on sign image */
  right: 30px;
  height: 180px;  /* Set height to limit space */
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.3em;
  color: darkred;  /* or whatever fits the style */
  padding-right: 10px;
}
.sign-text::-webkit-scrollbar {
  width: 8px;
}

.sign-text::-webkit-scrollbar-track {
  background: #222;  /* dark track */
  border-radius: 12px;
}

.sign-text::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #ff33cc, #6600ff); /* neon gradient */
  border-radius: 8px;
}

.sign-text::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #ff66ff, #9933ff);
}
#bordered {
  font-size: 24px;
  color: white;
  -webkit-text-stroke: 2px blue; /* Adds a blue border */

}


body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-image: url('mangabackground.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; /* Optional: makes the background stay in place */
}

linkscontainer {
  text-align: center;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
  margin: auto;

}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}

/* Therese are the floating links to other pages*/

.floating-image {
  position: absolute;
  top: 150px; /* adjust as needed */
  right: 20px;        /* stick to the right */
  text-align: center;
  width: max-content; /* shrink-wrap content */
  z-index: 1000;      /* keeps it above other content if needed */
  
}

.floating-image img {
  display: block;
  max-width: 100%;
  height: auto;
  width: 300px
}
/* the caption of the imags properties*/
.floating-image p {
  margin-top: 4px;
-webkit-text-stroke: 2px black;
  font-size: 30px;
  color: red;
}

.image1 p{
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  color: red;
  font-size: 50px;
  -webkit-text-stroke: .9px black;
  pointer-events: none; /* let clicks go through to image if needed */
  font-weight: normal;
  animation: rainbowCycle 2s infinite;
}
/*USE FOR RAINBOW TEXT*/
@keyframes rainbowCycle {
  0% { color: red; }
  16% { color: orange; }
  32% { color: yellow; }
  48% { color: green; }
  64% { color: blue; }
  80% { color: indigo; }
  100% { color: violet; }
}
/*use media queries to create reponsive design */
/* 🔄 Center it when screen is small ALso this only effects the creeper */
@media (max-width: 768px) {
  .floating-image {
    left: 35%;
    right: auto;
    top: 560px;
    transform: translateX(-50%);
    text-align: center;
    width: 100px;
     white-space: nowrap;
    
  }
  .floating-image p {
  margin-top: 4px;
-webkit-text-stroke: 2px black;
  font-size: px;
  color: green;
}

}

/* the divs in html all have the same floating image class 
 * but have another class that will just change its positon. */
.image1 { top: 750px; }
.image1 img {
  width: 250px;
    height: auto;
}


.image2 { top: 10px; 
     

}
.image2 img { height: auto; width: 200px;
}
.image2 p {
  font-size: 20px;
  color: #ff0000;
  -webkit-text-stroke: .2px white;
}

.image3 {
  top: 1300px;
  
}



.image3 p {
  font-size: 25px;
  color: lawngreen;
  -webkit-text-stroke: .70px black;
  font-family: 'Minecrafttext', sans-serif;
top: 8%;
left: 5%;
  position: absolute;
}





/*these are new classes corresponding to each of my stuff on the right
 * allowing me to control the repsonswiveness of the layout using media queries*/
/* Responsive layout (mobile) */
@media (max-width: 768px) {
  .image1 {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 1px; /* new position */
    width: 200px; /* new size */
    position: relative;
    
  }

  .image2 {
    left: 23%;
    right: auto;
    transform: translateX(-50%);
    top: 17px; /* different position */
    width: 300px; /* different size */
    position: relative;
    flex-direction: row; /* <-- This lays out children horizontally */
    flex-wrap: wrap; /* Allows wrapping if screen is too small */
    gap: 10px; /* Optional: space between images */
    margin-bottom: 20px;
  }

  .image1 img,
  .image2 img {
    width: 100%; /* make sure the image fits */
    height: auto;
  
  }
  
 
  
   .image3 p {
     color: #ff0000;
    font-size: 25px !important;      /* Make text smaller */
      /* Remove absolute positioning */
    left: auto !important;
    top: auto !important;
    white-space: normal !important;  /* Allow text to wrap */
    text-align: center;              /* Center text if you want */
    width: 100%;                     /* Make sure it fits container */
    margin: 0 auto;                  /* Center horizontally */
    line-height: 1.3;                /* Improve readability */
    -webkit-text-stroke: 0.99px black;/* Thinner outline for small text */
  }
  .image3 {
    left: 75% !important;
    overflow: visible !important;
    /* Prevent clipping */
    position: absolute;
    top: 1450px !important; 
     
  }
  
  .image3 img {
    width: 170px !important;
    height: auto;
    max-width: 200%;
  }
}
/*make buttoms grow when u hover*/
.image3 img:hover {
  transform: scale(1.1);
}
 
.creepa img:hover {
  transform: scale(1.1);
}
 
/*THIS IS ALL THE STYLING FOR THE MESSAGE BOX*/
.message-box {
  border: 3px solid red;
  padding: 10px;
  margin-bottom: 20px;
  background: #111;
  outline: 1px solid red;
}

textarea {
  width: 100%;
  height: 60px;
  font-family: 'MinecraftFont';
  background: black;
  color: red;
  border: 2px solid red;
  padding: 8px;
}

button {
  background: red;
  color: black;
  font-weight: bold;
  padding: 5px 15px;
  border: none;
  cursor: pointer;
  outline: 1px solid red;
}

#boardOutput p {
  font-family: 'MinecraftFont';
  color: white;
  background: #222;
  padding: 4px;
  border-bottom: 1px dotted gray;
}


/*STYLING AND EFFECTS for the music player*/


.image-button-container { top: 620px;
 color: rgba(203, 63, 57, 0.9) !important; display: flex;
  -webkit-text-stroke: 1.6px black;
  font-size: 28px;
}

.image-button-container img {
  width: 100px;
    height: auto;
}

/* optional hover zoom */
.image-container img:hover {
  transform: scale(1.05);
}

/* the text block on the left */


.image-button:hover {
  transform: scale(1.1);
}

@media (max-width: 768px) {
  
  .image-button-container {
  display: flex;
  top: 400px;
  left: 68%;
}
  .image-button-container img { position: relative;
    top: 25%;
    width: 50px;
    height:auto
  }
  
  
}