:root{

--accent:#ff8c00;
--accent2:#ffb347;

--bg:#050505;
--panel:#121212;
--panel2:#1c1c1c;

--text:#f4f4f4;
--muted:#aaaaaa;

--border:#333;

--shadow:
0 0 15px rgba(255,140,0,.15);

--radius:18px;

}

/* MATRIX MODE */

body.matrix{

--accent:#00ff66;
--accent2:#00cc55;

--bg:#000000;
--panel:#031303;
--panel2:#071b07;

--text:#9cff9c;
--muted:#55aa55;

--border:#00ff66;

}

/* RESET */

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

html{
scroll-behavior:smooth;
}

body{

background:
radial-gradient(
circle at top,
#202020,
#101010 30%,
#050505 100%
);

font-family:
'Share Tech Mono',
monospace;

color:var(--text);

overflow-x:hidden;

min-height:100vh;

}

/* SCANLINES */

#scanlines{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

pointer-events:none;

z-index:9998;

background:
repeating-linear-gradient(
0deg,
rgba(255,255,255,.03),
rgba(255,255,255,.03) 1px,
transparent 1px,
transparent 4px
);

opacity:.15;

}

/* NOISE */

#noise{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

pointer-events:none;

opacity:.04;

z-index:9997;

background-image:
url("https://www.transparenttextures.com/patterns/asfalt-light.png");

}

/* HERO */

.hero{

position:relative;

padding:60px 20px;

border-bottom:
1px solid var(--border);

overflow:hidden;

}

.hero-overlay{

position:absolute;

inset:0;

background:
radial-gradient(
circle,
rgba(255,140,0,.12),
transparent 70%
);

pointer-events:none;

}

.hero-content{

position:relative;

max-width:1200px;

margin:auto;

text-align:center;

}

.hero h1{

font-family:
'Stardos Stencil',
serif;

font-size:5rem;

letter-spacing:10px;

color:var(--accent);

margin-bottom:15px;

text-shadow:
0 0 20px rgba(255,140,0,.4);

}

/* GLITCH */

.glitch{
position:relative;
}

.glitch::before,
.glitch::after{

content:attr(data-text);

position:absolute;

left:0;
top:0;

width:100%;

overflow:hidden;

}

.glitch::before{

color:#ff0000;

transform:
translate(-2px,0);

opacity:.4;

}

.glitch::after{

color:#00ffff;

transform:
translate(2px,0);

opacity:.4;

}

.hero p{

font-size:1.1rem;

color:var(--muted);

margin-bottom:25px;

}

/* BUTTONS */

.hero-actions{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}

.hero-btn{

padding:12px 24px;

border:
1px solid var(--accent);

border-radius:12px;

text-decoration:none;

color:white;

background:
rgba(255,140,0,.08);

transition:.25s;

}

.hero-btn:hover{

transform:
translateY(-3px);

background:var(--accent);

box-shadow:
0 0 20px rgba(255,140,0,.35);

}

/* LAYOUT */

.page-wrapper{

max-width:1500px;

margin:auto;

padding:20px;

display:grid;

grid-template-columns:
320px 1fr;

gap:20px;

}

/* PANELS */

.panel{

background:var(--panel);

border:
1px solid var(--border);

border-radius:var(--radius);

padding:20px;

box-shadow:var(--shadow);

}

/* SIDEBAR */

.sidebar{

display:flex;

flex-direction:column;

gap:20px;

}

/* PROFILE */

.profile-avatar{

font-size:5rem;

text-align:center;

margin-bottom:15px;

color:var(--accent);

}

.profile-panel h2{

text-align:center;

margin-bottom:10px;

}

.profile-panel p{

line-height:1.6;

text-align:center;

color:var(--muted);

}

.status-list{

margin-top:15px;

display:flex;
flex-direction:column;
gap:10px;

}

.status-list div{

padding:10px;

background:var(--panel2);

border-radius:10px;

}

/* CLOCK */

.clock-panel{

text-align:center;

}

#clock{

font-size:1.1rem;

margin-top:10px;

color:var(--accent);

}

/* QUOTES */

.quote-panel{

text-align:center;

}

#quote{

margin:15px 0;

line-height:1.6;

color:var(--accent2);

}

#quoteBtn{

padding:10px 14px;

border:none;

background:var(--accent);

color:black;

border-radius:10px;

cursor:pointer;

font-weight:bold;

}

/* WEATHER */

.weather-panel{

text-align:center;

}

#weather{

margin-top:10px;

line-height:1.8;

}

/* LASTFM */

.music-panel{

text-align:center;

}

#lastfm{

margin-top:15px;

line-height:1.7;

}

#lastfm img{

width:100px;

border-radius:10px;

margin-bottom:10px;

}

/* MAIN */

.main-content{

display:flex;

flex-direction:column;

gap:20px;

}

/* FEATURE GRID */

.feature-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(180px,1fr));

gap:15px;

margin-top:20px;

}

.feature-card{

display:flex;

flex-direction:column;

justify-content:center;
align-items:center;

text-align:center;

gap:10px;

padding:25px;

text-decoration:none;

color:white;

background:var(--panel2);

border-radius:15px;

transition:.25s;

}

.feature-card:hover{

transform:
translateY(-6px);

box-shadow:
0 0 20px rgba(255,140,0,.35);

}

.feature-card i{

font-size:2rem;

color:var(--accent);

}

/* TERMINAL */

.terminal-panel{

padding:0;

overflow:hidden;

}

.terminal-header{

padding:12px 18px;

display:flex;

justify-content:space-between;

align-items:center;

background:#0a0a0a;

border-bottom:
1px solid var(--border);

}

.terminal-buttons{

display:flex;
gap:8px;

}

.terminal-buttons span{

width:12px;
height:12px;

border-radius:50%;

background:var(--accent);

}

#terminal-output{

height:250px;

overflow-y:auto;

padding:20px;

background:black;

color:#00ff66;

font-size:.95rem;

}

#terminal-input{

width:100%;

padding:15px;

border:none;

background:#050505;

color:#00ff66;

font-family:inherit;

outline:none;

}

/* QUICK GRID */

.quick-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:20px;

}

.link-list{

display:flex;

flex-direction:column;

gap:10px;

margin-top:15px;

}

.link-list a{

padding:10px;

background:var(--panel2);

border-radius:10px;

text-decoration:none;

color:white;

transition:.2s;

}

.link-list a:hover{

background:var(--accent);

color:black;

}

/* PROJECTS */

.project-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(180px,1fr));

gap:15px;

margin-top:20px;

}

.project-grid a{

padding:20px;

text-align:center;

text-decoration:none;

color:white;

background:var(--panel2);

border-radius:12px;

transition:.25s;

}

.project-grid a:hover{

transform:
translateY(-5px);

background:var(--accent);

color:black;

}

/* DISCORD */

.discord-panel iframe{

border-radius:12px;

}

/* RETRO BUTTONS */

#galleryToggle{

width:100%;

padding:15px;

cursor:pointer;

background:var(--accent);

color:black;

font-weight:bold;

border:none;

border-radius:10px;

margin-bottom:20px;

}

#gallery{

max-height:700px;

overflow:auto;

transition:.35s;

}

#gallery.closed{

max-height:0;

overflow:hidden;

}

.button-gallery{

display:flex;

flex-wrap:wrap;

gap:10px;

justify-content:center;

}

.button-gallery img{

height:31px;

transition:.25s;

}

.button-gallery img:hover{

transform:
scale(1.15);

}

/* FOOTER */

footer{

margin-top:30px;

padding:20px;

border-top:
1px solid var(--border);

}

.footer-grid{

max-width:1500px;

margin:auto;

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:20px;

}

.footer-grid div{

text-align:center;

}

.footer-grid h4{

margin-bottom:15px;

color:var(--accent);

}

#matrixBtn{

padding:12px 18px;

background:var(--accent);

border:none;

border-radius:10px;

cursor:pointer;

font-weight:bold;

}

/* VHS EFFECT */

@keyframes flicker{

0%{opacity:.95;}
50%{opacity:1;}
100%{opacity:.95;}

}

.panel{

animation:
flicker 8s infinite;

}

/* SCROLLBAR */

::-webkit-scrollbar{

width:10px;

height:10px;

}

::-webkit-scrollbar-track{

background:#111;

}

::-webkit-scrollbar-thumb{

background:var(--accent);

border-radius:10px;

}

/* MOBILE */

@media(max-width:1200px){

.page-wrapper{

grid-template-columns:
1fr;

}

.sidebar{

order:2;

}

.main-content{

order:1;

}

}

@media(max-width:900px){

.hero h1{

font-size:3rem;

letter-spacing:4px;

}

.quick-grid{

grid-template-columns:
1fr;

}

.footer-grid{

grid-template-columns:
1fr;

}

}

@media(max-width:600px){

.feature-grid{

grid-template-columns:
1fr 1fr;

}

.project-grid{

grid-template-columns:
1fr 1fr;

}

.hero-btn{

width:100%;

}

.hero-actions{

flex-direction:column;

}

}