/* 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." */

@font-face {
    font-family: 'Pixel Operator';
    src: url('fonts/PixelOperator-Bold.ttf') format('truetype');
}

body {
  background-image: url("images/background3.gif");
  background-repeat: repeat;
  background-color: #cfffeb;
  color: white;
  font-family: Pixel Operator;
}

img {
    /* Always keep this for responsiveness */
    max-width: 100%; 
}

/* Target the social icons specifically */
.image {
    margin: 0;
    padding: 0; 
    width: auto;
    height: 50px;
}

.logo {
  padding: 50px;
}

#socials ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  justify-content: center;
  flex-wrap: wrap;
}

#socials ul > li {
    margin: 0 10px; 
}

p {
  font-size: 18pt;
  text-shadow: 
        1px 0 1px rgba(255,0,0,0.5), 
       -1px 0 1px rgba(0,0,255,0.5);
}

.paragraph {
  border: 10px solid white;
  background-color: black;
  padding: 10px;
  max-width: 650px;
  width: 90%;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}  

h1 {
  font-size: 3rem;
  margin-bottom: 0;
  margin-top: 0;
  text-shadow: 
        1px 0 1px rgba(255,0,0,0.5), 
       -1px 0 1px rgba(0,0,255,0.5);
}

.spotify-embed-container {
    /* Optional: Sets a max-width for large screens */
    max-width: 624px; 
    margin: 0 auto; /* Optional: Centers the player */
}

.spotify-embed-container iframe {
    /* Ensure the iframe takes up the full width of its container */
    width: 100%;
}

/* Specific adjustments for screens 768px wide or less (typical tablet/mobile) */
@media screen and (max-width: 768px) {
    .spotify-embed-container iframe {
        /* Set a height that looks good on mobile for the standard player. 
           For a playlist or album, 351px is fine, but may be too tall for some phones. 
           For a single track (compact player), use 152px. */
        height: 300px; /* Adjusted height for mobile screens */
    }
}

/* Container for the animated word */
.rainbow-bounce {
  
  font-weight: bold;
  /* Key change: Use inline-flex so the entire word flows with the paragraph */
  display: inline-flex; 
  gap: 0.1em; 
  /* Vertically align the word to match the surrounding paragraph text */
  vertical-align: top; 
  line-height: 1; /* Helps contain the height of the animated word */
}

.rainbow-bounce span {
  /* Necessary to apply transform animation */
  display: inline-block; 
  
  /* Apply both animations */
  animation: 
    subtle-bounce 0.8s infinite ease-in-out,
    rainbow-color 6s infinite linear; 
    text-shadow: 0 0 8px currentColor;
}

/* Styles to apply when the screen is 600px or less (typical mobile size) */
@media (max-width: 600px) {
    .rainbow-bounce {
        /*
        The 'transform' property reduces the size. 
        '0.7' means 70% of its original size. Adjust this value 
        (e.g., 0.6 for 60%, 0.5 for 50%) until it fits well.
        */
        transform: scale(0.9);
        
        /* This is crucial: The element must be treated as a block 
        or inline-block to accept the 'transform' property.
        */
        display: inline-block;
        
    }
}

/* 1. @keyframes for the Subtle Bounce */
@keyframes subtle-bounce {
  0%, 100% {
    /* Base position */
    transform: translateY(0); 
  }
  50% {
    /* Much smaller bounce (e.g., -3px) to avoid breaking line height */
    transform: translateY(-3px); 
  }
}

/* 2. @keyframes for the Rainbow Color Change (Unchanged) */
@keyframes rainbow-color {
  0% { color: red; }
  14% { color: orange; }
  28% { color: yellow; }
  42% { color: green; }
  57% { color: blue; }
  71% { color: indigo; }
  85% { color: violet; }
  100% { color: red; }
}

/* 3. Staggered Animation Delay */
/* Adjust these based on the length of your word (6 letters shown) */
.rainbow-bounce span:nth-child(1) { animation-delay: 0s, 0s; }
.rainbow-bounce span:nth-child(2) { animation-delay: 0.1s, 0.1s; }
.rainbow-bounce span:nth-child(3) { animation-delay: 0.2s, 0.2s; }
.rainbow-bounce span:nth-child(4) { animation-delay: 0.3s, 0.3s; }
.rainbow-bounce span:nth-child(5) { animation-delay: 0.4s, 0.4s; }
.rainbow-bounce span:nth-child(6) { animation-delay: 0.5s, 0.5s; }

/* THE CRT OVERLAY (Static Scanlines) */
.crt-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        rgba(18, 16, 16, 0) 50%, 
        rgba(0, 0, 0, 0.25) 50%
    ), 
    linear-gradient(
        90deg, 
        rgba(255, 0, 0, 0.06), 
        rgba(0, 255, 0, 0.02), 
        rgba(0, 0, 255, 0.06)
    );
    z-index: 9999;
    background-size: 100% 4px, 4px 100%; 
    pointer-events: none;
    animation: crt-flicker 0.12s infinite, crt-jitter 10s infinite;
}

/* THE MOVING REFRESH LINES (Infinite Flow) */
.crt-overlay::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    
    background: linear-gradient(
        to bottom,
        rgba(18, 16, 16, 0) 0%,
        rgba(255, 0, 0, 0.1) 25%,
        rgba(0, 255, 0, 0.1) 50%,
        rgba(0, 0, 255, 0.1) 75%,
        rgba(18, 16, 16, 0) 100%
    );

    /* This size (25vh) ensures 4 lines are ALWAYS on screen at once */
    background-size: 100% 25vh;
    background-repeat: repeat-y;
    z-index: 10000;
    pointer-events: none;

    /* These move the lines and shift the colors */
    animation: 
        crt-flow .35s linear infinite, 
        iridescent-shift 8s linear infinite;
}

/* NEON GLOW FOR CONTENT */
#container {
    filter: brightness(1.05) contrast(1.05) drop-shadow(0 0 2px rgba(255, 255, 255, 0.4));
    animation: chromatic-shift 2s infinite;
}

/* --- ANIMATIONS --- */

@keyframes crt-flow {
    from { background-position: 0 0; }
    to { background-position: 0 100vh; } 
}

@keyframes iridescent-shift {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

@keyframes crt-flicker {
    0% { opacity: 0.98; }
    50% { opacity: 1; }
    100% { opacity: 0.99; }
}

@keyframes crt-jitter {
    0% { transform: translate(0,0); }
    1% { transform: translate(0.5px, -0.5px); }
    2% { transform: translate(-0.5px, 0.5px); }
    3% { transform: translate(0,0); }
}

@keyframes chromatic-shift {
    0%, 95%, 100% { filter: drop-shadow(0 0 1px rgba(255,255,255,0.2)); transform: translate(0,0); }
    96% { filter: drop-shadow(2px 0 0 rgba(255,0,0,0.4)) drop-shadow(-2px 0 0 rgba(0,0,255,0.4)); transform: translate(1px, 0); }
    97% { filter: drop-shadow(-2px 0 0 rgba(255,0,0,0.4)) drop-shadow(2px 0 0 rgba(0,0,255,0.4)); transform: translate(-1px, 0); }
}