* {
box-sizing:border-box;
}
html {
scroll-behavior:smooth;
}
body {
margin:0;
background:
radial-gradient(
circle at 50% 0%,
#073b49,
#02070d 45%,
#010309
);
color:#dffcff;
font-family:
"Trebuchet MS",
Arial,
sans-serif;
line-height:1.6;
overflow-x:hidden;
}
/* =========================
STARFIELD
========================= */
.stars {
position:fixed;
inset:0;
z-index:-5;
background-image:
radial-gradient(
circle,
rgba(100,245,255,.8) 1px,
transparent 1px
),
radial-gradient(
circle,
rgba(255,120,210,.6) 1px,
transparent 1px
);
background-size:
70px 70px,
120px 120px;
animation:
starMove 40s linear infinite;
}
@keyframes starMove {
from {
background-position:
0 0,
30px 60px;
}
to {
background-position:
0 500px,
30px 560px;
}
}
/* =========================
FLOATING NOTES
========================= */
.floating-notes {
position:fixed;
inset:0;
z-index:-2;
font-size:30px;
letter-spacing:50px;
color:rgba(70,240,255,.12);
pointer-events:none;
animation:
notesMove 25s linear infinite;
}
@keyframes notesMove {
from {
transform:translateY(100vh);
}
to {
transform:translateY(-100vh);
}
}
/* =========================
COMPUTER
========================= */
.computer {
width:94%;
max-width:1250px;
margin:25px auto;
}
/* =========================
TOP BAR
========================= */
.topbar {
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 15px;
background:
#06141d;
border:
1px solid #28dbe9;
box-shadow:
0 0 20px rgba(0,240,255,.15);
font-family:monospace;
}
.logo {
color:#72f5ff;
font-size:1.2rem;
font-weight:bold;
letter-spacing:2px;
}
.logo-symbol {
color:#ff9edc;
font-size:1.5rem;
}
.top-status {
font-size:.7rem;
color:#8fb6c0;
}
.online-dot {
color:#65ffad;
text-shadow:
0 0 8px #65ffad;
}
.separator {
color:#315967;
}
/* =========================
HERO
========================= */
.hero {
min-height:570px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
text-align:center;
border:
2px solid #53edf8;
background:
radial-gradient(
circle at center,
rgba(0,220,255,.12),
transparent 35%
),
linear-gradient(
135deg,
#041d27,
#080c1b 60%,
#18091c
);
box-shadow:
0 0 30px rgba(0,230,255,.25),
inset 0 0 80px rgba(0,240,255,.05);
}
/* GRID */
.hero-grid {
position:absolute;
inset:0;
background-image:
linear-gradient(
rgba(60,230,255,.08) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(60,230,255,.08) 1px,
transparent 1px
);
background-size:
45px 45px;
transform:
perspective(500px)
rotateX(60deg)
translateY(150px)
scale(1.5);
opacity:.5;
}
/* HERO CONTENT */
.hero-content {
position:relative;
z-index:3;
}
.tiny {
font-family:monospace;
font-size:.75rem;
letter-spacing:5px;
color:#69f3ff;
}
.hero h1 {
margin:15px 0;
font-size:
clamp(4rem,11vw,9rem);
line-height:.8;
letter-spacing:5px;
color:#6ef5ff;
text-shadow:
0 0 5px #00eaff,
0 0 20px #00eaff,
0 0 50px rgba(0,240,255,.5),
6px 6px 0 #075765;
animation:
heroGlow 3s ease-in-out infinite alternate;
}
.hero h1 span {
color:#ff9edc;
text-shadow:
0 0 8px #ff4fba,
0 0 25px #ff4fba,
4px 4px 0 #68234f;
}
@keyframes heroGlow {
from {
filter:brightness(1);
}
to {
filter:brightness(1.25);
}
}
.hero-line {
color:#49dce9;
letter-spacing:3px;
}
.hero-subtitle {
color:#ffc0eb;
letter-spacing:3px;
}
/* HERO BUTTONS */
.hero-buttons {
display:flex;
justify-content:center;
gap:12px;
margin-top:25px;
}
.hero-buttons a {
padding:12px 22px;
color:#031116;
background:#68efff;
border:2px solid white;
text-decoration:none;
font-weight:bold;
box-shadow:
5px 5px 0 #54224e;
transition:.2s;
}
.hero-buttons a:nth-child(2) {
background:#ff9edc;
}
.hero-buttons a:hover {
transform:
translate(3px,3px);
box-shadow:
2px 2px 0 #54224e;
}
/* HOLOGRAM */
.hologram-circle {
position:absolute;
width:420px;
height:420px;
border-radius:50%;
left:50%;
top:50%;
transform:
translate(-50%,-50%);
opacity:.4;
}
.hologram-ring {
position:absolute;
inset:0;
border-radius:50%;
border:
1px solid #52edff;
}
.ring1 {
animation:
spin 12s linear infinite;
}
.ring2 {
inset:35px;
border-color:#ff7fd1;
animation:
spin 8s linear infinite reverse;
}
.ring3 {
inset:80px;
border-style:dashed;
animation:
spin 15s linear infinite;
}
.hologram-note {
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
font-size:120px;
color:#63efff;
text-shadow:
0 0 30px #00eaff;
animation:
float 3s ease-in-out infinite;
}
@keyframes spin {
to {
transform:rotate(360deg);
}
}
@keyframes float {
50% {
transform:translateY(-10px);
}
}
/* CORNERS */
.hero-corner {
position:absolute;
bottom:15px;
font-family:monospace;
font-size:.65rem;
color:#438d99;
}
.hero-corner.left {
left:15px;
}
.hero-corner.right {
right:15px;
}
/* =========================
NAVIGATION
========================= */
.navigation {
display:grid;
grid-template-columns:
repeat(6,1fr);
gap:5px;
margin:15px 0;
}
.navigation a {
padding:13px 5px;
text-align:center;
color:#8ef5ff;
background:#06151e;
border:
1px solid #216471;
text-decoration:none;
font-family:monospace;
transition:.2s;
}
.navigation a span {
display:block;
font-size:.6rem;
color:#ff92d6;
}
.navigation a:hover {
background:#0d3440;
border-color:#6ff5ff;
box-shadow:
0 0 15px rgba(0,240,255,.2);
transform:
translateY(-3px);
}
/* =========================
TICKER
========================= */
.ticker {
overflow:hidden;
white-space:nowrap;
padding:7px;
border:
1px solid #1c5561;
background:#041018;
color:#7df3ff;
font-family:monospace;
}
.ticker-text {
display:inline-block;
animation:
ticker 25s linear infinite;
}
@keyframes ticker {
from {
transform:translateX(100%);
}
to {
transform:translateX(-100%);
}
}
/* =========================
CONTENT
========================= */
.content-layout {
display:grid;
grid-template-columns:
240px 1fr;
gap:15px;
margin-top:15px;
align-items:start;
}
/* =========================
WINDOWS
========================= */
.window {
margin-bottom:15px;
background:
rgba(3,12,19,.96);
border:
1px solid #205b68;
box-shadow:
0 10px 30px rgba(0,0,0,.35);
overflow:hidden;
}
.window-top {
display:flex;
justify-content:space-between;
padding:9px 12px;
color:#7df4ff;
background:
linear-gradient(
90deg,
#082b35,
#101528
);
border-bottom:
1px solid #236675;
font-family:monospace;
font-size:.75rem;
font-weight:bold;
}
/* =========================
PROFILE
========================= */
.profile-window {
text-align:center;
padding-bottom:15px;
}
.profile-avatar {
width:120px;
height:120px;
margin:20px auto 10px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
background:
radial-gradient(
circle,
#ffb9e8,
#5deeff 65%,
#075666
);
border:
3px solid #71f4ff;
border-radius:50%;
box-shadow:
0 0 30px rgba(0,240,255,.4);
}
.hair {
position:absolute;
top:5px;
width:100px;
height:50px;
background:#57ebff;
border-radius:
50% 50% 30% 30%;
box-shadow:
0 0 15px #00eaff;
}
.face {
z-index:2;
width:60px;
height:70px;
display:flex;
align-items:center;
justify-content:center;
border-radius:
50% 50% 45% 45%;
background:#102632;
color:#75efff;
font-size:30px;
}
.profile-window h2 {
color:#80f5ff;
margin:5px;
}
.profile-title {
font-family:monospace;
font-size:.7rem;
color:#ff9ddc;
}
.profile-status {
color:#68ffae;
font-family:monospace;
font-size:.7rem;
}
/* MINI STATS */
.mini-stats {
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:5px;
margin:15px 10px 0;
}
.mini-stats div {
padding:8px 2px;
font-size:.6rem;
background:#081c25;
border:1px solid #214e5a;
}
.mini-stats strong {
display:block;
font-size:20px;
}
/* MINI PLAYER */
.mini-player {
display:flex;
align-items:center;
gap:10px;
padding:15px;
font-size:.7rem;
}
.mini-player strong {
color:#7df3ff;
}
.mini-player span {
color:#b285a8;
}
.mini-disc {
width:45px;
height:45px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:
repeating-radial-gradient(
circle,
#071116 0 5px,
#17333b 6px 7px
);
border:2px solid #68efff;
animation:
spin 5s linear infinite;
}
.mini-progress {
height:4px;
margin:0 12px 12px;
background:#10252d;
}
.mini-progress div {
height:100%;
width:60%;
background:
linear-gradient(
90deg,
#61efff,
#ff8bd3
);
}
/* STATUS */
.status-log {
padding:10px 15px;
font-family:monospace;
font-size:.7rem;
}
.status-log p {
border-bottom:1px dashed #1d4852;
padding-bottom:5px;
}
.status-log span {
color:#ff8dd3;
}
/* BADGES */
.badges {
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:6px;
padding:12px;
}
.badges div {
height:45px;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
background:#071c25;
border:1px solid #215461;
transition:.2s;
}
.badges div:hover {
transform:
scale(1.12)
rotate(4deg);
border-color:#6df5ff;
}
/* =========================
TEXT
========================= */
.window > p {
margin:
15px 20px;
}
.large {
padding-bottom:20px;
}
/* =========================
WELCOME
========================= */
.welcome {
display:flex;
align-items:center;
gap:25px;
padding:25px;
}
.welcome-icon {
width:130px;
height:130px;
flex-shrink:0;
display:flex;
align-items:center;
justify-content:center;
font-size:65px;
background:
radial-gradient(
circle,
#143c48,
#06131a
);
border:
3px solid #65efff;
box-shadow:
7px 7px 0 #43203e,
0 0 25px rgba(0,240,255,.25);
animation:
float 3s ease-in-out infinite;
}
.welcome h2 {
color:#8bf5ff;
}
.quote {
padding:12px;
margin-top:15px;
border-left:
3px solid #ff8ed4;
background:#0b1b25;
color:#ffc0e9;
}
/* INFO GRID */
.info-grid {
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:7px;
padding:0 20px;
}
.info-grid div {
padding:10px;
text-align:center;
background:#071b24;
border:1px solid #20515d;
}
.info-grid span {
display:block;
font-size:.6rem;
color:#688993;
}
.info-grid strong {
color:#72f3ff;
}
/* =========================
SECTIONS
========================= */
.section-title {
padding:
15px 20px 5px;
color:#80f4ff;
}
/* =========================
INTERESTS
========================= */
.interest-grid {
display:grid;
grid-template-columns:
repeat(3,1fr);
gap:12px;
padding:20px;
}
.interest {
padding:20px;
text-align:center;
background:
linear-gradient(
135deg,
#071a23,
#101522
);
border:1px solid #225967;
transition:.2s;
}
.interest:hover {
transform:
translateY(-5px);
border-color:#6af3ff;
box-shadow:
0 0 20px rgba(0,230,255,.12);
}
.interest-icon {
font-size:45px;
}
.interest h3 {
color:#7df3ff;
}
/* =========================
GAMES
========================= */
.game-grid {
display:grid;
grid-template-columns:
repeat(2,1fr);
gap:12px;
padding:20px;
}
.game-card {
position:relative;
padding:20px;
background:
#071923;
border:1px solid #205765;
transition:.2s;
}
.game-card:hover {
transform:
translateY(-5px);
border-color:#6cf3ff;
box-shadow:
0 10px 25px rgba(0,230,255,.12);
}
.game-number {
position:absolute;
right:10px;
top:5px;
font-size:2.5rem;
font-family:monospace;
color:#102f38;
}
.game-icon {
font-size:45px;
}
.game-card h3 {
color:#82f4ff;
}
.game-card span {
display:inline-block;
margin-top:8px;
padding:3px 7px;
background:#65efff;
color:#061218;
font-family:monospace;
font-size:.6rem;
font-weight:bold;
}
.game-bar {
height:5px;
background:#132b32;
}
.game-bar div {
height:100%;
background:
linear-gradient(
90deg,
#58eaff,
#ff8fd5
);
box-shadow:
0 0 7px #58eaff;
}
/* =========================
PROJECTS
========================= */
.project-list {
padding:5px 20px 20px;
}
.project {
display:grid;
grid-template-columns:
60px 1fr auto;
align-items:center;
gap:15px;
padding:15px;
margin-top:10px;
background:#071a23;
border-left:3px solid #60efff;
transition:.2s;
}
.project:hover {
background:#0a2631;
transform:
translateX(5px);
}
.project-icon {
font-size:35px;
}
.project h3 {
margin:0;
color:#82f4ff;
font-size:1rem;
}
.project p {
margin:3px 0 0;
font-size:.8rem;
color:#8ca9b2;
}
.project-status {
font-family:monospace;
font-size:.6rem;
color:#ff9bd8;
}
/* =========================
MUSIC STAGE
========================= */
.music-window {
background:
radial-gradient(
circle at center,
rgba(0,240,255,.08),
transparent 50%
),
#030d14;
}
.music-stage {
min-height:420px;
display:flex;
align-items:center;
justify-content:center;
gap:45px;
padding:40px;
position:relative;
overflow:hidden;
}
/* VISUALIZER */
.visualizer {
position:absolute;
bottom:0;
left:0;
right:0;
height:80px;
display:flex;
align-items:end;
justify-content:center;
gap:7px;
opacity:.5;
}
.visualizer span {
width:7px;
height:40px;
background:
linear-gradient(
#64efff,
#ff88d1
);
box-shadow:
0 0 10px #00eaff;
animation:
visualizer .8s ease-in-out infinite alternate;
}
.visualizer span:nth-child(2) {
animation-delay:.1s;
}
.visualizer span:nth-child(3) {
animation-delay:.2s;
}
.visualizer span:nth-child(4) {
animation-delay:.3s;
}
.visualizer span:nth-child(5) {
animation-delay:.4s;
}
.visualizer span:nth-child(6) {
animation-delay:.5s;
}
.visualizer span:nth-child(7) {
animation-delay:.6s;
}
.visualizer span:nth-child(8) {
animation-delay:.7s;
}
@keyframes visualizer {
to {
height:
var(--height,70px);
}
}
/* BIG DISC */
.big-disc {
width:220px;
height:220px;
flex-shrink:0;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:
repeating-radial-gradient(
circle,
#061117 0 9px,
#17343c 10px 11px
);
border:
4px solid #6af3ff;
box-shadow:
0 0 30px rgba(0,240,255,.45),
0 0 70px rgba(0,240,255,.12);
animation:
spin 9s linear infinite;
}
.disc-center {
width:65px;
height:65px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:
linear-gradient(
135deg,
#63efff,
#ff9bdc
);
color:#061218;
font-size:30px;
box-shadow:
0 0 20px #66efff;
}
.music-info {
position:relative;
z-index:2;
min-width:260px;
}
.now-playing {
font-family:monospace;
color:#ff91d5;
font-size:.7rem;
}
.music-info h2 {
font-size:2rem;
color:#76f4ff;
text-shadow:
0 0 10px #00eaff;
}
.music-info p {
color:#b6d8de;
}
.music-progress {
height:7px;
background:#10272f;
border:1px solid #225764;
}
.music-progress div {
width:55%;
height:100%;
background:
linear-gradient(
90deg,
#5deeff,
#ff8fd4
);
}
.music-buttons {
display:flex;
gap:6px;
margin-top:15px;
}
.music-buttons button {
min-width:42px;
padding:8px;
background:#67efff;
color:#061218;
border:1px solid white;
cursor:pointer;
font-weight:bold;
}
.music-buttons button:hover {
background:#ff9ddc;
}
#musicMessage {
margin-top:12px;
color:#72f3ff;
font-family:monospace;
}
/* =========================
TERMINAL
========================= */
.terminal {
margin:20px;
padding:20px;
background:#010507;
border:
1px solid #285d43;
font-family:monospace;
font-size:.8rem;
line-height:1.9;
box-shadow:
inset 0 0 25px rgba(0,255,150,.03);
}
.terminal span {
color:#ff8fd2;
}
.green {
color:#68ffac;
}
.cyan {
color:#68efff;
}
.pink {
color:#ff8fd5;
}
.cursor {
color:#6effad;
animation:
blink 1s infinite;
}
@keyframes blink {
50% {
opacity:0;
}
}
/* =========================
GALLERY
========================= */
.gallery {
display:grid;
grid-template-columns:
repeat(4,1fr);
gap:12px;
padding:20px;
}
.gallery-card {
min-height:180px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
background:
linear-gradient(
135deg,
#071923,
#101522
);
border:
1px dashed #286473;
transition:.2s;
}
.gallery-card > div {
font-size:60px;
}
.gallery-card span {
color:#76f2ff;
font-weight:bold;
}
.gallery-card small {
color:#78959d;
font-size:.6rem;
}
.gallery-card:hover {
transform:
translateY(-5px)
scale(1.02);
border-color:#6af3ff;
box-shadow:
0 0 20px rgba(0,230,255,.15);
}
/* =========================
RANDOM
========================= */
.random {
text-align:center;
padding-bottom:25px;
}
button {
padding:12px 20px;
background:
linear-gradient(
90deg,
#65efff,
#a0f6ff
);
color:#061218;
border:
2px solid white;
font-weight:bold;
cursor:pointer;
box-shadow:
5px 5px 0 #512143;
transition:.15s;
}
button:hover {
transform:
translate(3px,3px);
box-shadow:
2px 2px 0 #512143;
}
#randomResult {
min-height:30px;
margin-top:15px;
color:#ff9bd8;
font-weight:bold;
}
/* SECRET */
.secret {
text-align:center;
padding-bottom:25px;
}
#secretResult {
min-height:35px;
margin-top:15px;
color:#72f3ff;
}
.secret-found {
font-size:1.2rem;
text-shadow:
0 0 15px #00eaff;
animation:
secretGlow 1s infinite alternate;
}
@keyframes secretGlow {
to {
color:#ff9edc;
text-shadow:
0 0 20px #ff4fba;
}
}
/* =========================
FOOTER
========================= */
footer {
text-align:center;
padding:50px 20px;
border-top:
1px dashed #286473;
}
.footer-logo {
font-size:2rem;
font-weight:bold;
color:#70f4ff;
text-shadow:
0 0 15px #00eaff;
}
.footer-stars {
color:#ff9bd8;
font-size:1.3rem;
letter-spacing:8px;
margin:15px;
}
footer h2 {
color:#83f5ff;
}
.footer-small {
font-size:.7rem;
color:#55747d;
}
/* =========================
MOBILE
========================= */
@media(max-width:900px) {
.content-layout {
grid-template-columns:1fr;
}
.navigation {
grid-template-columns:
repeat(3,1fr);
}
}
@media(max-width:650px) {
.computer {
width:96%;
}
.topbar {
flex-direction:column;
gap:7px;
text-align:center;
}
.hero {
min-height:500px;
}
.hero h1 {
font-size:4rem;
}
.hologram-circle {
width:300px;
height:300px;
}
.navigation {
grid-template-columns:
repeat(2,1fr);
}
.welcome {
flex-direction:column;
text-align:center;
}
.info-grid {
grid-template-columns:
repeat(2,1fr);
}
.interest-grid {
grid-template-columns:1fr;
}
.game-grid {
grid-template-columns:1fr;
}
.project {
grid-template-columns:
50px 1fr;
}
.project-status {
grid-column:2;
}
.music-stage {
flex-direction:column;
padding:30px 15px;
}
.big-disc {
width:170px;
height:170px;
}
.music-info {
text-align:center;
width:100%;
}
.music-buttons {
justify-content:center;
}
.gallery {
grid-template-columns:
repeat(2,1fr);
}
.gallery-card {
min-height:140px;
}
}
@media(max-width:400px) {
.navigation {
grid-template-columns:1fr;
}
.hero h1 {
font-size:3rem;
}
.gallery {
grid-template-columns:1fr;
}
}