:root{
    --accent:#FFF224;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#0b0b0f;
    font-family:Tahoma, sans-serif;
    color:white;
    overflow-x:hidden;
}

/* boot screen */
#boot{
    position:fixed;
    inset:0;
    background:black;
    color:var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    z-index:99999;

    animation:boot 2.5s forwards;
}

@keyframes boot{
    0%{opacity:1;}
    80%{opacity:1;}
    100%{opacity:0;visibility:hidden;}
}

/* background animation */
body::before{
    content:"";
    position:fixed;
    inset:0;
    background-image:
        radial-gradient(var(--accent) 1px, transparent 1px),
        radial-gradient(#ff00ff 1px, transparent 1px);
    background-size:40px 40px;
    opacity:0.12;
    animation: drift 20s linear infinite;
    z-index:0;
}

@keyframes drift{
    from{transform:translate(0,0);}
    to{transform:translate(-200px,-200px);}
}

body > *{
    position:relative;
    z-index:1;
}

/* layout */
.banner{
    height:160px;
    background:#111185;
    display:flex;
    align-items:center;
    justify-content:center;
    border-bottom:3px solid var(--accent);
}

.wrapper{
    width:900px;
    margin:30px auto;
    display:grid;
    grid-template-columns:260px 1fr;
    gap:20px;
}

/* profile */
.profile{
    background:#111185;
    border:2px solid var(--accent);
    padding:10px;
}

.profile img{
    width:100%;
    border:2px solid var(--accent);
}

/* posts */
.posts{
    background:#0f0f1a;
    border:2px solid var(--accent);
    padding:10px;
}

.post{
    border-bottom:1px dashed #444;
    margin-bottom:15px;
    padding-bottom:10px;
}

/* links */
a{
    color:var(--accent);
    text-decoration:none;
}

/* WIN95 PLAYER */
#player{
    width:280px;
    background:#c0c0c0;
    border:3px solid black;
    position:fixed;
    top:120px;
    left:120px;
    z-index:9999;

    animation: floaty 4s ease-in-out infinite, glow 2.5s infinite;
}

@keyframes floaty{
    0%{transform:translateY(0);}
    50%{transform:translateY(-6px);}
    100%{transform:translateY(0);}
}

@keyframes glow{
    0%{box-shadow:5px 5px 0 black;}
    50%{box-shadow:5px 5px 15px var(--accent);}
    100%{box-shadow:5px 5px 0 black;}
}

#titlebar{
    background:linear-gradient(to right,#000080,#1084d0);
    color:white;
    padding:5px;
    cursor:grab;
    display:flex;
    justify-content:space-between;
}

#visualizer{
    margin-top:10px;
    height:60px;
    display:flex;
    gap:3px;
    align-items:flex-end;
    background:#000;
    padding:5px;
    border:2px inset #ccc;
}

.bar{
    width:4px;
    height:10px;
    background:#FFF224;
    box-shadow:0 0 5px #ff00ff;
}

#content{
    padding:10px;
    color:black;
}

#ytinput{
    width:100%;
    padding:5px;
    margin-bottom:5px;
}

#visualizer{
    margin-top:10px;
    height:60px;
    display:flex;
    gap:3px;
    align-items:flex-end;
    background:black;
    padding:5px;
    border:2px inset #ccc;
}

.bar{
    width:4px;
    height:10px;
    background:#FFF224;
    box-shadow:0 0 5px #ff00ff;
    animation: pulse 0.6s infinite ease-in-out;
}

@keyframes pulse{
    0%,100%{ transform:scaleY(0.4); }
    50%{ transform:scaleY(1); }
}

button{
    width:100%;
    margin-top:8px;
}