/* mularky.neocities.org stylesheet - no variables version */

@import url(‘https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&family=Space+Grotesk:wght@400;700&display=swap’);

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

body {
background: #0a0a0a;
color: #e5e5e5;
font-family: ‘IBM Plex Mono’, monospace;
line-height: 1.6;
min-height: 100vh;
}

.container {
max-width: 900px;
margin: 0 auto;
padding: 2rem;
}

/* Header */
header {
text-align: center;
margin-bottom: 3rem;
border-bottom: 2px solid #333;
padding-bottom: 2rem;
}

h1 {
font-family: ‘Space Grotesk’, sans-serif;
font-size: 4rem;
font-weight: 700;
color: #8b5cf6;
margin-bottom: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.1em;
}

.glitch {
position: relative;
animation: glitch 3s infinite;
}

@keyframes glitch {
0%, 90%, 100% {
text-shadow: none;
}
92% {
text-shadow:
-2px 0 #ff00ff,
2px 2px #8b5cf6;
}
94% {
text-shadow:
2px 0 #ff00ff,
-2px -2px #8b5cf6;
}
}

.subtitle {
color: #a0a0a0;
font-style: italic;
margin-bottom: 1.5rem;
}

/* Navigation */
nav {
display: flex;
justify-content: center;
gap: 2rem;
margin-top: 1rem;
}

nav a {
color: #e5e5e5;
text-decoration: none;
padding: 0.5rem 1rem;
border: 1px solid #333;
transition: all 0.3s;
}

nav a:hover {
background: #8b5cf6;
border-color: #8b5cf6;
color: #0a0a0a;
}

/* Main sections */
section {
background: #1a1a1a;
border: 1px solid #333;
padding: 2rem;
margin-bottom: 2rem;
border-radius: 4px;
}

h2, h3 {
font-family: ‘Space Grotesk’, sans-serif;
color: #8b5cf6;
margin-bottom: 1rem;
}

h2 {
font-size: 1.8rem;
}

h3 {
font-size: 1.4rem;
}

.intro p {
margin-bottom: 1rem;
}

.quote {
font-style: italic;
color: #a0a0a0;
border-left: 3px solid #8b5cf6;
padding-left: 1rem;
margin-top: 1.5rem;
}

/* Links section */
.links ul {
list-style: none;
}

.links li {
margin-bottom: 0.8rem;
}

.links a {
color: #8b5cf6;
text-decoration: none;
transition: all 0.3s;
}

.links a:hover {
color: #ff00ff;
text-decoration: underline;
}

/* Chaos tags */
.chaos {
background: #0a0a0a;
}

.tags {
color: #a0a0a0;
word-wrap: break-word;
animation: tagPulse 8s infinite;
}

@keyframes tagPulse {
0%, 100% {
color: #a0a0a0;
}
50% {
color: #8b5cf6;
}
}

/* Status section */
.status {
border-left: 3px solid #ff00ff;
}

.status p {
margin-bottom: 0.8rem;
}

/* Footer */
footer {
text-align: center;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid #333;
color: #a0a0a0;
font-size: 0.9rem;
}

/* Notes page specific */
.note-entry {
background: #0a0a0a;
padding: 1.5rem;
margin-bottom: 1.5rem;
border-left: 3px solid #8b5cf6;
}

.note-date {
color: #a0a0a0;
font-size: 0.9rem;
margin-bottom: 0.5rem;
}

.note-title {
color: #8b5cf6;
font-size: 1.3rem;
margin-bottom: 0.8rem;
}

.note-content {
line-height: 1.8;
}

/* Gallery */
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}

.gallery-item {
background: #0a0a0a;
border: 1px solid #333;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: all 0.3s;
}

.gallery-item:hover {
border-color: #8b5cf6;
transform: scale(1.05);
}

.gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
}

.upload-placeholder {
color: #a0a0a0;
text-align: center;
padding: 2rem;
}

/* Chat interface */
.chat-container {
background: #0a0a0a;
height: 500px;
display: flex;
flex-direction: column;
}

.chat-messages {
flex: 1;
overflow-y: auto;
padding: 1rem;
border-bottom: 1px solid #333;
}

.message {
margin-bottom: 1rem;
padding: 0.8rem;
border-radius: 4px;
}

.message.user {
background: #6d28d9;
margin-left: 20%;
}

.message.ai {
background: #1a1a1a;
margin-right: 20%;
border: 1px solid #8b5cf6;
}

.message-sender {
font-size: 0.8rem;
color: #a0a0a0;
margin-bottom: 0.3rem;
}

.chat-input-area {
display: flex;
gap: 1rem;
padding: 1rem;
}

.chat-input-area input {
flex: 1;
background: #1a1a1a;
border: 1px solid #333;
color: #e5e5e5;
padding: 0.8rem;
font-family: ‘IBM Plex Mono’, monospace;
font-size: 1rem;
}

.chat-input-area input:focus {
outline: none;
border-color: #8b5cf6;
}

.chat-input-area button {
background: #8b5cf6;
border: none;
color: #0a0a0a;
padding: 0.8rem 2rem;
font-family: ‘IBM Plex Mono’, monospace;
font-weight: 700;
cursor: pointer;
transition: all 0.3s;
}

.chat-input-area button:hover {
background: #ff00ff;
}

/* Responsive */
@media (max-width: 768px) {
.container {
padding: 1rem;
}


h1 {
    font-size: 2.5rem;
}

nav {
    flex-direction: column;
    gap: 0.5rem;
}

.gallery-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.message.user,
.message.ai {
    margin-left: 0;
    margin-right: 0;
}


}