:root {
--bg-primary: #000000;
--text-primary: #ff66cc;
--accent1: #6666ff;
--accent2: #ff33ff;
--accent3: #00ff99;
--accent4: #ff9966;
}

@keyframes floating {
0% { transform: translateY(0px) }
50% { transform: translateY(-10px) }
100% { transform: translateY(0px) }
}

@keyframes sparkle {
0%, 100% { opacity: 1 }
50% { opacity: 0.5 }
}

@keyframes scanline {
0% { transform: translateY(0px) }
100% { transform: translateY(100vh) }
}

@keyframes rainbow-text {
0% { color: var(--text-primary) }
25% { color: var(--accent1) }
50% { color: var(--accent2) }
75% { color: var(--accent3) }
100% { color: var(--text-primary) }
}

body {
background-color: var(--bg-primary);
background-image: 
    radial-gradient(circle at 10% 20%, rgba(102, 102, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 90% 80%, rgba(255, 102, 204, 0.1) 0%, transparent 50%);
color: var(--text-primary);
font-family: "MS Gothic", "VT323", monospace;
margin: 0;
line-height: 1.6;
position: relative;
overflow-x: hidden;
}

body::after {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(
    transparent 0px,
    rgba(0, 0, 0, 0.1) 1px,
    transparent 2px
);
pointer-events: none;
animation: scanline 10s linear infinite;
z-index: 999;
}

.main-container {
display: grid;
grid-template-columns: 250px 1fr;
gap: 2rem;
max-width: 1200px;
margin: 2rem auto;
padding: 1rem;
}

.sidebar {
background: rgba(0, 0, 0, 0.7);
border: 2px solid var(--accent1);
padding: 1rem;
height: fit-content;
position: sticky;
top: 2rem;
}

.profile-section {
text-align: center;
margin-bottom: 2rem;
}

.profile-pic {
width: 150px;
height: 150px;
border-radius: 50%;
margin: 1rem auto;
}

.glitch-text {
animation: glitch 3s infinite;
text-shadow: 2px 2px var(--accent1),
            -2px -2px var(--accent2);
}

.shrine-section {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin: 2rem 0;
}

.shrine-item {
aspect-ratio: 1;
background: rgba(102, 102, 255, 0.1);
border: 1px solid var(--accent1);
display: flex;
align-items: center;
justify-content: center;
animation: floating 3s ease-in-out infinite;
}

.shrine-desc {
text-align: center;
margin: 1rem 0;
font-family: "Digital", monospace;
color: var(--accent4);
text-shadow: 0 0 5px var(--accent4);
font-size: 14px;
}

.credit {
text-align: center;
margin: 1rem 0;
font-family: "Digital", monospace;
color: var(--accent3);
text-shadow: 0 0 5px var(--accent3);
font-size: small;
}

#exit {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    border-radius: 5px;
    z-index: 4;
}