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

@import url('https://fonts.googleapis.com/css2?family=VT323&family=DotGothic16&family=Gaegu:wght@400;700&display=swap');

:root {
    --pastel-pink: #ffd1dc;
    --pastel-blue: #c4e3f3;
    --pastel-purple: #e0bbe4;
    --pastel-mint: #d4f0f0;
    --hot-pink: #ff69b4;
    --window-bg: #ffffff;
}

body {
    background-color: var(--pastel-pink);
    color: #555;
    font-family: 'Gaegu', cursive;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="%23ff69b4"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>'), auto;
    background-image: 
        radial-gradient(var(--pastel-purple) 1px, transparent 1px),
        radial-gradient(var(--pastel-blue) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: 0 0, 20px 20px;
}

/* Y2K Bevel Borders - Soft Style */
.window {
    background: var(--window-bg);
    border: 4px solid;
    border-color: #fff #d1d1d1 #d1d1d1 #fff;
    box-shadow: 6px 6px 0px var(--pastel-purple);
    border-radius: 4px;
}

.window-title {
    background: linear-gradient(90deg, var(--hot-pink), var(--pastel-purple));
    color: white;
    padding: 4px 10px;
    font-family: 'DotGothic16', sans-serif;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-kawaii {
    background: white;
    border: 2px solid var(--hot-pink);
    padding: 2px 10px;
    border-radius: 20px;
    color: var(--hot-pink);
    font-size: 0.8rem;
    transition: all 0.2s;
    cursor: pointer;
}

.btn-kawaii:hover {
    background: var(--hot-pink);
    color: white;
    transform: scale(1.1) rotate(-2deg);
}

/* Animations */
.glitch-pastel {
    text-shadow: 2px 0 var(--pastel-blue), -2px 0 var(--hot-pink);
    animation: glitch 2s infinite linear alternate-reverse;
}

@keyframes glitch {
    0% { text-shadow: 2px 0 var(--pastel-blue), -2px 0 var(--hot-pink); }
    50% { text-shadow: -1px 0 var(--pastel-blue), 1px 0 var(--hot-pink); }
    100% { text-shadow: 1px 0 var(--pastel-blue), -1px 0 var(--hot-pink); }
}

.sparkle-text {
    background: linear-gradient(45deg, #ff69b4, #7eb6ff, #b19cd9, #ff69b4);
    background-size: 400% 400%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient 5s ease infinite;
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.marquee-container {
    background: var(--pastel-mint);
    border-top: 2px solid var(--hot-pink);
    border-bottom: 2px solid var(--hot-pink);
    overflow: hidden;
    white-space: nowrap;
    padding: 4px 0;
    font-family: 'VT323', monospace;
}

.marquee-text {
    display: inline-block;
    animation: marquee 20s linear infinite;
    color: #444;
    font-size: 1.2rem;
}

@keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* Custom Content Blocks */
.sengoku-box {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="2" fill="%23ffd1dc" opacity="0.5"/></svg>');
    border: 2px dashed var(--hot-pink);
}

.blinkie {
    width: 88px;
    height: 31px;
    image-rendering: pixelated;
    border: 1px solid #ddd;
}

/* Music Bar visualizer animation */
.bar {
    width: 4px;
    background: var(--hot-pink);
    animation: bounce 0.5s ease-in-out infinite alternate;
}

@keyframes bounce {
    from { height: 4px; }
    to { height: 20px; }
}