/*====================================


====================================*/

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

:root{

--bg:#000000;

--bg2:#050014;

--window:#05050d;

--window2:#090912;

--border:#00e5ff;

--cyan:#00ffff;

--blue:#2c5cff;

--purple:#7d00ff;

--magenta:#ff00cc;

--pink:#ff4de3;

--white:#ffffff;

--text:#00FFFF;

}

}

/*======================
GLOBAL
=======================*/

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

body{

background:

radial-gradient(circle at top,#42006b,#000000 55%),

url(noise.gif),

repeating-linear-gradient(

0deg,

rgba(255,255,255,.03),

rgba(255,255,255,.03) 1px,

transparent 2px,

transparent 4px

);

}

/*======================
SCANLINES
=======================*/

#scanlines{

position:fixed;

left:0;
top:0;

width:100%;
height:100%;

pointer-events:none;

background:

repeating-linear-gradient(

0deg,

rgba(255,255,255,.02),

rgba(255,255,255,.02) 1px,

transparent 2px,

transparent 4px

);

opacity:.35;

z-index:9999;

}

/*======================
LAYOUT
=======================*/

#container{

width:1400px;

margin:25px auto;

}

#layout{

display:grid;

grid-template-columns:

260px
1fr
260px;

gap:18px;

margin-top:20px;

}

/*======================
HEADER
=======================*/

header{

display:grid;

grid-template-columns:

1fr
260px
280px;

gap:15px;

margin-bottom:18px;

}

#logo,
#status,
#player{

background:var(--window);

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

box-shadow:

0 0 8px #2fe2ff,
0 0 18px #8450ff,
0 0 35px #ff44d7;

padding:18px;

}

#logo h1{

font-family:Orbitron;

font-size:42px;

color:white;

letter-spacing:4px;

text-shadow:

0 0 8px #46b4ff,

0 0 15px #ff45d9;

animation:glitch 6s infinite;

}

#logo p{

margin-top:8px;

font-family:VT323;

font-size:24px;

color:#8bdfff;

}

#status h3,
#player h3{

font-family:VT323;

font-size:30px;

margin-bottom:10px;

color:white;

}

/*======================
STATUS BAR
=======================*/

.bar{

width:100%;

height:20px;

background:#090909;

border:1px solid #444;

overflow:hidden;

}

.fill{

width:82%;

height:100%;

background:

linear-gradient(

90deg,

#46b4ff,

#7f7fff,

#ff47db

);

animation:pulse 2s infinite;

}

/*======================
WINDOWS
=======================*/

.window{

margin-bottom:18px;

background:var(--window);

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

box-shadow:

0 0 8px #2fd8ff,

0 0 20px #7d52ff,

0 0 30px rgba(255,0,200,.4);

transition:.3s;

}

.window:hover{

transform:translateY(-3px);

box-shadow:

0 0 12px #79f3ff,

0 0 25px #8c5eff,

0 0 45px #ff50d7;

}

/*======================
TITLEBAR
=======================*/

.titlebar{

background:

linear-gradient(

90deg,

#46b4ff,

#7f62ff,

#ff48da

);

padding:7px 12px;

font-family:VT323;

font-size:28px;

color:white;

letter-spacing:2px;

}

/*======================
CONTENT
=======================*/

.content{

padding:15px;

line-height:1.7;

}

.content h2{

font-family:Orbitron;

margin-bottom:10px;

font-size:24px;

}

.content h3{

font-family:VT323;

font-size:28px;

margin:12px 0;

color:#7cecff;

}

hr{

margin:14px 0;

border:none;

height:1px;

background:

linear-gradient(

90deg,

transparent,

#7cecff,

transparent

);

}

/*======================
PROFILE
=======================*/

.avatar{

width:100%;

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

margin-bottom:15px;

box-shadow:

0 0 12px #58e8ff;

}

ul{

list-style:none;

}

li{

margin:5px 0;

}

a{

color:#89eeff;

text-decoration:none;

transition:.3s;

}

a:hover{

color:#ff5be4;

text-shadow:0 0 8px #ff5be4;

}

/*======================
IMAGES
=======================*/

.banner{

width:100%;

margin-top:15px;

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

}

.gallery{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:10px;

}

.gallery img{

width:100%;

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

transition:.3s;

}

.gallery img:hover{

transform:scale(1.04);

filter:hue-rotate(25deg);

box-shadow:

0 0 15px #ff55dc;

}

/*======================
BUTTONS
=======================*/

img{

image-rendering:pixelated;

max-width:100%;

}

/*====================================

MARQUEE

====================================*/

#marquee{

margin-top:20px;

overflow:hidden;

background:#11111b;

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

box-shadow:
0 0 10px #38dfff,
0 0 20px #8b59ff,
0 0 35px #ff48d8;

padding:10px;

}

#marquee-content{

display:flex;

align-items:center;

gap:10px;

width:max-content;

animation:scroll 35s linear infinite;

}

#marquee:hover #marquee-content{

animation-play-state:paused;

}

#marquee img{

height:31px;

image-rendering:pixelated;

}

/*====================================

FOOTER

====================================*/

footer{

margin-top:25px;

padding:15px;

text-align:center;

font-family:VT323;

font-size:24px;

background:var(--window);

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

box-shadow:
0 0 10px #46b4ff,
0 0 20px #915eff;

}

/*====================================

SCROLLBAR

====================================*/

::-webkit-scrollbar{

width:16px;

}

::-webkit-scrollbar-track{

background:#090910;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(
180deg,
#46b4ff,
#8d63ff,
#ff45d7
);

text-shadow:

2px 0 cyan,

-2px 0 magenta,

0 0 20px white;

}

::-webkit-scrollbar-thumb:hover{

background:linear-gradient(
180deg,
#6fdfff,
#af89ff,
#ff79e8
);

}

/*====================================

TEXT SELECTION

====================================*/

::selection{

background:#ff4dd8;

color:black;

}

/*====================================

INPUTS

====================================*/

input,
textarea{

background:#0d0d18;

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

color:white;

padding:6px;

font-family:inherit;

}

button{

background:#17172a;

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

color:white;

padding:6px 12px;

cursor:pointer;

transition:.3s;

}

button:hover{

background:#ff4ad6;

color:black;

box-shadow:
0 0 15px #ff4ad6;

}

/*====================================

GLOWING LINKS

====================================*/

.window a{

position:relative;

}

.window a::after{

content:"";

position:absolute;

left:0;

bottom:-2px;

width:0;

height:1px;

background:#ff4ad6;

transition:.3s;

}

.window a:hover::after{

width:100%;

}

/*====================================

LOGO GLITCH

====================================*/

@keyframes glitch{

0%{

transform:none;

text-shadow:
0 0 10px #46b4ff;

}

2%{

transform:translate(-2px,1px);

text-shadow:
2px 0 #ff4bd2,
-2px 0 #46b4ff;

}

4%{

transform:translate(2px,-1px);

}

6%{

transform:none;

}

70%{

transform:none;

}

72%{

transform:translate(-1px,2px);

}

74%{

transform:none;

}

100%{

transform:none;

}

}

/*====================================

STATUS BAR

====================================*/

@keyframes pulse{

0%{

width:75%;

}

50%{

width:85%;

}

100%{

width:75%;

}

}

/*====================================

STAMP SCROLL

====================================*/

@keyframes scroll{

from{

transform:translateX(0);

}

to{

transform:translateX(-50%);

}

}

/*====================================

WINDOW FLOAT

====================================*/

.window{

background:

linear-gradient(
180deg,
rgba(255,255,255,.02),
rgba(255,255,255,0)
),

#080810;

border:2px solid #00f6ff;

box-shadow:

0 0 6px #00ffff,

0 0 20px #2f6cff,

0 0 45px #7f00ff,

0 0 90px #ff00d4;

overflow:hidden;

position:relative;

}

/*====================================

BACKGROUND GLOW

====================================*/

body::before{

content:"";

position:fixed;

inset:0;

pointer-events:none;

background:

radial-gradient(circle at 20% 20%, rgba(255,70,220,.18), transparent 25%),
radial-gradient(circle at 80% 40%, rgba(70,180,255,.15), transparent 30%),
radial-gradient(circle at 50% 90%, rgba(140,90,255,.14), transparent 25%);

mix-blend-mode:screen;

z-index:-1;

}

/*====================================

CRT FLICKER

====================================*/

body{

animation:flicker .12s infinite alternate;

}

@keyframes flicker{

0%{

filter:brightness(100%);

}

100%{

filter:brightness(99%);

}

}

/*====================================

RESPONSIVE

====================================*/

@media(max-width:1200px){

#container{

width:95%;

}

#layout{

grid-template-columns:1fr;

}

header{

grid-template-columns:1fr;

}

}

h1{

color:white;

text-shadow:

3px 0 #00ffff,

-3px 0 #ff00d4,

0 0 25px #ffffff,

0 0 70px #7d00ff;

}

a{

color:white;

text-shadow:

2px 0 cyan,

-2px 0 magenta;

}

a:hover{

color:#00ffff;

filter:brightness(170%);

}

.window:hover{

transform:translate(-2px,-2px);

filter:

drop-shadow(3px 0 cyan)

drop-shadow(-3px 0 magenta);

}

body::after{

content:"";

position:fixed;

inset:0;

pointer-events:none;

opacity:.08;

background-image:url("noise.gif");

mix-blend-mode:screen;

animation:noise .18s steps(2) infinite;

}

@keyframes noise{

0%{transform:translate(0,0);}
25%{transform:translate(-4px,2px);}
50%{transform:translate(3px,-2px);}
75%{transform:translate(-2px,-3px);}
100%{transform:translate(0,0);}

}