/* ===========================================================
   NebulaOS X
   main.css
   Part 1
   Global Styles + Galaxy Background + Stars + Planets
=========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;600;700&display=swap');

:root{

--bg1:#030712;
--bg2:#0B1026;
--bg3:#111B4A;

--glass:rgba(255,255,255,.08);
--glass2:rgba(255,255,255,.15);

--border:rgba(255,255,255,.18);

--blue:#6BCBFF;
--cyan:#5EEAD4;
--purple:#A855F7;
--pink:#EC4899;

--text:#F8FAFC;
--text2:#CBD5E1;

--shadow:
0 10px 30px rgba(0,0,0,.45);

--blur:18px;

}



*{

margin:0;
padding:0;

box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

font-family:"Inter",sans-serif;

width:100vw;
height:100vh;

overflow:hidden;

color:var(--text);

background:

radial-gradient(circle at 20% 20%,
rgba(120,119,255,.18),
transparent 28%),

radial-gradient(circle at 80% 15%,
rgba(0,180,255,.18),
transparent 20%),

radial-gradient(circle at 60% 80%,
rgba(170,0,255,.15),
transparent 25%),

linear-gradient(
160deg,
var(--bg1),
var(--bg2),
var(--bg3)
);

position:relative;

}



/* ============================
   STARS
============================ */

.stars{

position:absolute;

inset:0;

overflow:hidden;

pointer-events:none;

z-index:-20;

}



.star{

position:absolute;

background:white;

border-radius:50%;

animation:twinkle linear infinite;

}



/* Tiny stars */

.star.small{

width:2px;
height:2px;

opacity:.8;

}



/* Medium */

.star.medium{

width:3px;
height:3px;

opacity:.9;

}



/* Large */

.star.large{

width:5px;
height:5px;

box-shadow:

0 0 10px white,

0 0 20px white;

}





/* ============================
   PLANETS
============================ */

.planet{

position:absolute;

border-radius:50%;

filter:

drop-shadow(0 0 40px rgba(255,255,255,.25));

animation:

floatPlanet 12s ease-in-out infinite;

}



/* Giant Planet */

.planet-one{

width:240px;
height:240px;

right:-60px;
top:80px;

background:

radial-gradient(

circle at 30% 30%,

#FFD27D,

#D97706,

#78350F

);

}



/* Blue Planet */

.planet-two{

width:120px;
height:120px;

left:120px;
bottom:90px;

background:

radial-gradient(

circle at 30% 30%,

#A5F3FC,

#0EA5E9,

#1D4ED8

);

animation-delay:2s;

}



/* Purple Moon */

.planet-three{

width:60px;
height:60px;

right:340px;
bottom:180px;

background:

radial-gradient(

circle,

#FFFFFF,

#A855F7

);

animation-delay:5s;

}



/* ============================
   NEBULA CLOUDS
============================ */

.nebula{

position:absolute;

width:700px;
height:700px;

border-radius:50%;

filter:

blur(120px);

opacity:.22;

mix-blend-mode:screen;

animation:

nebulaMove 25s ease-in-out infinite;

}



.nebula.one{

background:#4F46E5;

left:-250px;
top:-180px;

}



.nebula.two{

background:#06B6D4;

right:-220px;
bottom:-150px;

animation-delay:8s;

}



.nebula.three{

background:#9333EA;

left:35%;
top:45%;

animation-delay:14s;

}



/* ============================
   KEYFRAMES
============================ */

@keyframes twinkle{

0%{

opacity:.2;
transform:scale(.6);

}

50%{

opacity:1;
transform:scale(1.2);

}

100%{

opacity:.2;
transform:scale(.6);

}

}



@keyframes floatPlanet{

0%{

transform:
translateY(0px);

}

50%{

transform:
translateY(-18px);

}

100%{

transform:
translateY(0px);

}

}



@keyframes nebulaMove{

0%{

transform:
translate(0,0);

}

50%{

transform:
translate(80px,-40px);

}

100%{

transform:
translate(0,0);

}

}



@keyframes shoot{

0%{

transform:

translate(-300px,-300px)

rotate(45deg);

opacity:0;

}

5%{

opacity:1;

}

15%{

opacity:1;

}

100%{

transform:

translate(1800px,1200px)

rotate(45deg);

opacity:0;

}

}
/* ===========================================================
   NebulaOS X
   main.css
   Part 2
   Desktop • Top Bar • Dock • Icons • UI Components
=========================================================== */

/* ============================
   TOP BAR
============================ */

.topbar{

position:fixed;

top:16px;
left:50%;

transform:translateX(-50%);

width:calc(100% - 40px);

height:58px;

display:flex;
align-items:center;
justify-content:space-between;

padding:0 24px;

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

backdrop-filter:blur(22px);
-webkit-backdrop-filter:blur(22px);

border:1px solid rgba(255,255,255,.15);

border-radius:18px;

box-shadow:

0 10px 35px rgba(0,0,0,.45);

z-index:9999;

}

.topbar .logo{

display:flex;
align-items:center;
gap:12px;

font-size:20px;
font-weight:700;

font-family:"Space Grotesk",sans-serif;

letter-spacing:.6px;

}

.topbar .logo span{

background:linear-gradient(
90deg,
#7DD3FC,
#A78BFA,
#F472B6
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

#clock{

font-weight:600;

font-size:15px;

color:var(--text);

}



/* ============================
   DESKTOP
============================ */

.desktop{

position:absolute;

top:90px;
left:24px;
right:24px;
bottom:110px;

display:flex;

flex-wrap:wrap;

align-content:flex-start;

gap:22px;

}



/* ============================
   ICON
============================ */

.icon{

width:92px;

display:flex;

flex-direction:column;

align-items:center;

gap:10px;

cursor:pointer;

padding:12px;

border-radius:18px;

transition:.25s;

user-select:none;

}

.icon:hover{

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

transform:

translateY(-6px)
scale(1.04);

}

.icon:active{

transform:scale(.95);

}

.icon img{

width:64px;
height:64px;

object-fit:cover;

border-radius:18px;

box-shadow:

0 8px 18px rgba(0,0,0,.4);

transition:.3s;

}

.icon:hover img{

transform:

rotate(-3deg)
scale(1.08);

}

.icon span{

font-size:14px;

font-weight:600;

text-align:center;

color:white;

text-shadow:

0 0 10px black;

}



/* ============================
   DOCK
============================ */

.dock{

position:fixed;

left:50%;

bottom:18px;

transform:translateX(-50%);

display:flex;

gap:14px;

padding:14px 22px;

border-radius:24px;

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

backdrop-filter:blur(28px);
-webkit-backdrop-filter:blur(28px);

border:1px solid rgba(255,255,255,.15);

box-shadow:

0 10px 35px rgba(0,0,0,.45);

z-index:9999;

}



/* Dock Icons */

.dock button{

width:58px;
height:58px;

border:none;

border-radius:18px;

cursor:pointer;

font-size:26px;

background:rgba(255,255,255,.12);

color:white;

transition:.25s;

}

.dock button:hover{

transform:

translateY(-12px)
scale(1.12);

background:rgba(255,255,255,.18);

box-shadow:

0 0 25px rgba(120,180,255,.4);

}

.dock button:active{

transform:scale(.92);

}



/* ============================
   GLASS PANEL
============================ */

.glass{

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

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.15);

border-radius:20px;

box-shadow:

0 10px 30px rgba(0,0,0,.4);

}



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

button{

font-family:inherit;

}

.primary{

padding:12px 22px;

border:none;

border-radius:14px;

cursor:pointer;

background:

linear-gradient(
135deg,
#60A5FA,
#8B5CF6
);

color:white;

font-weight:600;

transition:.25s;

}

.primary:hover{

transform:

translateY(-3px);

box-shadow:

0 0 18px rgba(96,165,250,.45);

}



/* ============================
   INPUTS
============================ */

input,
textarea{

width:100%;

padding:14px;

border-radius:14px;

border:1px solid rgba(255,255,255,.15);

background:rgba(255,255,255,.06);

color:white;

font-size:15px;

outline:none;

backdrop-filter:blur(10px);

transition:.2s;

}

input:focus,
textarea:focus{

border-color:#60A5FA;

box-shadow:

0 0 15px rgba(96,165,250,.35);

}

textarea{

resize:none;

min-height:220px;

}



/* ============================
   SCROLLBAR
============================ */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:rgba(255,255,255,.04);

}

::-webkit-scrollbar-thumb{

background:

linear-gradient(
180deg,
#60A5FA,
#8B5CF6
);

border-radius:999px;

}



/* ============================
   TEXT
============================ */

h1,h2,h3{

font-family:"Space Grotesk",sans-serif;

}

p{

color:var(--text2);

line-height:1.6;

}