/* 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." */
/* ===== FONTS (keep these at the top) ===== */
@font-face {
  font-family: "P3";
  src: url("https://files.catbox.moe/815964.otf") format("opentype");
}
@font-face {
  font-family: "P3title";
  src: url("https://files.catbox.moe/dx05bz.ttf") format("truetype");
}
@font-face {
  font-family: "P3headings";
  src: url("https://files.catbox.moe/6iytdd.otf") format("opentype");
}
@font-face {
  font-family: "P3commands";
  src: url("https://files.catbox.moe/26qpv2.otf") format("opentype");
}

/* ===== BASICS ===== */
body {
  background: linear-gradient(#FFDEE8, #E9FFB3);
  min-height: 100vh;
  color: #416E87;
  font-family: "P3", sans-serif;
  cursor: url("Me.png"), auto;
}

h1 { color: hotpink; font-size: 70px; font-family: "P3title", sans-serif; text-align: center; }
h2 { color: mediumorchid; font-size: 20px; text-align: center; font-family: "P3headings"; }
h3 { color: #c265fc; font-size: 18px; text-align: center; }
h4 { color: #673A70; font-size: 12px; }
h7 { color: #487800; font-size: 17px; font-weight: bold; font-family: "P3commands"; }
h8 { color: grey; font-size: 16px; }
h9 { color: skyblue; font-size: 13px; font-weight: bold; font-family: "P3commands"; }
h10{ color: mediumorchid; font-size: 17px; text-align: center; font-family: "P3headings"; }

/* ===== LINKS (order matters!) ===== */
a { color: #da536e;text-decoration:none; }
a:visited { color: #9c4a8a; }
a:hover { background-color: pink; color: hotpink; }
a, button {
  cursor: url("Me2.png"), pointer;
}

img { transition: transform 0.2s; }
img:hover { transform: scale(1.03); }  /* grows slightly on hover */

/* ===== ENTER GATE ===== */
#gate {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #FBE8FF;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  cursor: url("Music.png"),pointer;
}
#gate span { color: hotpink; font-size: 40px; font-family: "P3title"; letter-spacing: 4px; }
#gate.hidden { display: none; }

/* ===== PAGE LAYOUT ===== */
.blog {
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px;
  background: pink;
  border-radius: 10px;
}

header {
  font-size: 70px;
  color: hotpink;
  text-align: center;
  border-bottom: 10px solid white;
  padding: 10px;
  margin-bottom: 20px;
  font-family: "P3title";
}

.row { display: flex; gap: 20px; align-items: flex-start; }

.content { flex: 3; display: flex; flex-direction: column; gap: 20px; }
.sidebarL { flex: 1; display: flex; flex-direction: column; gap: 20px; min-width:0;}
.sidebarR { flex: 1; display: flex; flex-direction: column; gap: 20px;min-width:0; }
.sidebarR h2 { margin: 0 0 -10px 0; }

/* ===== BOXES ===== */
.box {
  border: 10px solid hotpink;
  border-radius: 10px;
  padding: 16px;
  box-sizing: border-box;
  background: #fff0fa;
}

.link-box   { background: #fff0fa; font-size:15px}
.update-box { background: #e8f7ff; border-color: #7ec8e3; border:4px}
.ToDo-box   { background: #f5ffe0; border-color: #a8d672; font-size:11px; border:7px}
.ToDo-list { 
  list-style-type: "♡ ";
  padding-left: 5px;   /* indent; 0 = no indent */
  margin: 0;            /* space around the whole list */
}


.random-box { background: #fff5e0; border-color: orange; height:auto}

.update-box, .ToDo-box { max-height: 300px; overflow-y: auto; }
.update-box::-webkit-scrollbar, .ToDo-box::-webkit-scrollbar { width: 8px; }
.update-box::-webkit-scrollbar-thumb, .ToDo-box::-webkit-scrollbar-thumb {
  background: hotpink;
  border-radius: 4px;
}

.update { border-left: 4px solid hotpink; padding-left: 12px; margin-bottom: 16px;}
.update p { margin: 0; font-size: 12px; }

.links a { display: block; }
.picture-box img { max-width: 100%; border-radius: 8px; }

/* ===== FANCY BOXES ===== */
.nonsense {
  background-color: #D6F5FF;
  color: #255069;
  border: 10px ridge #FFF5F5;
  border-radius: 20px;
  padding: 30px;
  margin: 0;
  box-shadow: 0 4px 9px rgba(0,0,0,0.3);
}
.blogs {
  background-color: #EDFFFE;
  border: 10px inset #E9FFB3;
  border-radius: 20px;
  padding: 50px;
  margin: 30px auto;
  max-width: 700px;
  box-shadow: 0 4px 9px rgba(0,0,0,0.3);
}
.fotos {
  background-color: #EDFFFE;
  border: 10px outset #FFDEE8;
  border-radius: 20px;
  padding: 50px;
  margin: 30px auto;
  max-width: 700px;
  box-shadow: 0 4px 9px rgba(0,0,0,0.3);
}

.list-wrapper { color: grey; max-width: 270px; margin: 0 auto; }

/* ===== MOBILE ===== */
@media (max-width: 700px) {
  .row { flex-direction: column; }
  .content, .sidebarR, .sidebarL { width: 100%; flex: none; }
  .blog { padding: 20px; }
}

/*song*/
.song-list { list-style: none; padding: 0; margin: 0; }

.song-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12px;
}

.song-list li .fav-song {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: hidden;
}

.song-list li button {
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  background: skyblue;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: url("Me2.png"),pointer;
}
.song-list li button:hover { background: mediumorchid; }

/* the moving strip inside each long title (the JS creates it) */
.song-track {
  display: inline-block;   /* needed so it can be moved with transform */
}

/* each copy of the title gets a gap after it, so the loop doesn't look squished */
.song-copy {
  padding-right: 30px;     /* size of the gap between the two copies; try other numbers */
}

/* only titles labelled "scrolling" get the animation */
.fav-song.scrolling .song-track {
  animation: song-scroll 8s linear infinite;
  /* song-scroll = the name of the motion below (these must match)
     8s          = time for one loop; bigger = slower
     linear      = constant speed
     infinite    = repeats forever */
}

/* pause when the mouse is over it (optional, delete if you don't want it) */
.fav-song.scrolling:hover .song-track {
  animation-play-state: paused;
}

/* the motion itself */
@keyframes song-scroll {                    /* song-scroll = same name as above */
  from { transform: translateX(0); }        /* start: not moved */
  to   { transform: translateX(-50%); }     /* end: moved left by half the track, which is exactly one copy */
}