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

body {

background:

radial-gradient(circle at 15% 25%, rgba(120,140,255,.18), transparent 45%),
radial-gradient(circle at 85% 65%, rgba(90,200,255,.14), transparent 45%),
linear-gradient(180deg, #050505, #000000);

color: #eaeaea;

font-family:

-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
sans-serif;

margin: 0;

transition: background .4s ease, color .3s ease;

}


/* =========================
AMBIENT LIGHT MOTION
========================= */

body::before {

content: "";

position: fixed;

inset: 0;

background:

radial-gradient(circle at 25% 35%, rgba(120,140,255,.12), transparent 40%),
radial-gradient(circle at 75% 65%, rgba(90,200,255,.10), transparent 40%);

animation: glassLightMove 18s ease-in-out infinite alternate;

pointer-events: none;

z-index: -1;

}


@keyframes glassLightMove {

0% { transform: translate(0px,0px); }

100% { transform: translate(-40px,20px); }

}


/* =========================
GLASS CONTAINER
========================= */

.container {

position: relative;

max-width: 820px;

margin: 70px auto;

padding: 45px;

background:

linear-gradient(
145deg,
rgba(255,255,255,.12),
rgba(255,255,255,.02)
);

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

border-radius: 22px;

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

box-shadow:

0 0 60px rgba(255,255,255,.05),
0 0 120px rgba(120,140,255,.05);

transition: transform .25s ease;

}


/* GLASS SPECULAR REFLECTION */

.container::before {

content: "";

position: absolute;

inset: 0;

border-radius: 22px;

background:

linear-gradient(
120deg,
rgba(255,255,255,.25),
transparent 40%
);

opacity: .08;

pointer-events: none;

}


.container::after {

content: "";

position: absolute;

top: 0;

left: 0;

right: 0;

height: 50%;

border-radius: 22px 22px 0 0;

background:

linear-gradient(
180deg,
rgba(255,255,255,.18),
transparent
);

opacity: .12;

pointer-events: none;

}


.container:hover {

transform: translateY(-5px);

}


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

header {

text-align: center;

margin-bottom: 45px;

}


h1 {

font-weight: 500;

letter-spacing: 1px;

}


/* =========================
SECTIONS
========================= */

section {

position: relative;

opacity: 0;

transform: translateY(18px);

animation: fadeUp .8s ease forwards;

transition:

transform .25s ease,
background .25s ease;

padding: 12px 8px;

border-radius: 12px;

}


section:hover {

transform: translateY(-2px);

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

}


section:nth-of-type(1){animation-delay:.08s;}
section:nth-of-type(2){animation-delay:.16s;}
section:nth-of-type(3){animation-delay:.24s;}
section:nth-of-type(4){animation-delay:.32s;}
section:nth-of-type(5){animation-delay:.40s;}


@keyframes fadeUp {

to {

opacity: 1;
transform: translateY(0);

}

}


/* =========================
HEADINGS
========================= */

h2 {

margin-top: 45px;

font-weight: 500;

opacity: .95;

position: relative;

}


h2::after {

content: "";

display: block;

height: 1px;

margin-top: 8px;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.35),
transparent
);

opacity: .4;

}


h3 {

margin-top: 15px;

color: #e0e0e0;

}


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

p {

line-height: 1.7;

color: rgba(255,255,255,.88);

}


em {

color: #ffffff;

font-style: italic;

}


ul {

padding-left: 18px;

}


li {

margin-bottom: 6px;

}


/* =========================
LINKS
========================= */

a {

color: #7aa2ff;

transition: opacity .2s ease;

}


a:hover {

opacity: .6;

}


/* =========================
THEME TOGGLE BUTTON
========================= */

#themeToggle {

position: fixed;

top: 20px;

right: 20px;

padding: 8px 14px;

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

color: white;

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

border-radius: 8px;

cursor: pointer;

backdrop-filter: blur(10px);

transition: all .2s ease;

}


#themeToggle:hover {

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

}


/* =========================
LIGHT MODE
========================= */

body.light-mode {

background:

radial-gradient(circle at 20% 20%, #ffffff, transparent 40%),
radial-gradient(circle at 80% 60%, #dde6ff, transparent 40%),
#f4f6fa;

color: #1f2328;

}


/* LIGHT MODE GLASS PANEL */

body.light-mode .container {

background:

linear-gradient(
145deg,
rgba(255,255,255,.85),
rgba(255,255,255,.55)
);

backdrop-filter: blur(18px);

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

box-shadow:

0 20px 60px rgba(0,0,0,.10),
0 2px 6px rgba(0,0,0,.05);

}


/* LIGHT MODE SECTIONS */

body.light-mode section:hover {

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

}


/* LIGHT MODE TEXT FIXES */

body.light-mode p {

color: rgba(0,0,0,.82);

}


body.light-mode em {

color: #111;

}


body.light-mode h3 {

color: #333;

}


body.light-mode a {

color: #3a5cff;

}


/* LIGHT MODE SEPARATOR */

body.light-mode h2::after {

background:

linear-gradient(
90deg,
transparent,
rgba(0,0,0,.25),
transparent
);

}


/* LIGHT MODE BUTTON */

body.light-mode #themeToggle {

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

color: #111;

border: 1px solid rgba(0,0,0,.18);

}


body.light-mode #themeToggle:hover {

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

}