/* =====================================
   MY LITTLE DREAM
   FRUTIGER AERO STYLE
====================================== */


/* -------------------------------
   BASE
-------------------------------- */

*{

box-sizing:border-box;

}


body{

margin:0;

min-height:100vh;

font-family:
"Trebuchet MS",
Arial,
sans-serif;

color:#07334a;

overflow-x:hidden;


background:

linear-gradient(
180deg,
#72dfff,
#bdf5ff,
#f0ffff
);

}



/* -------------------------------
   DREAM SKY BACKGROUND
-------------------------------- */

#background{

position:fixed;

inset:0;

z-index:-5;


background:


radial-gradient(
circle at 20% 20%,
rgba(255,255,255,.9),
transparent 18%
),


radial-gradient(
circle at 80% 30%,
rgba(255,255,255,.8),
transparent 15%
),


linear-gradient(
180deg,
#65d9ff,
#dfffff
);


}



/* soft floating light */

#background::after{

content:"";

position:absolute;

inset:0;


background:

radial-gradient(
circle,
rgba(255,255,255,.5),
transparent 40%
);


animation:

lightFloat 12s infinite ease-in-out;


}


@keyframes lightFloat{


50%{

transform:
translateY(30px);

}


}



/* -------------------------------
   MAIN GLASS WINDOW
-------------------------------- */


.window{

position:relative;

z-index:5;


width:85%;

max-width:900px;


margin:70px auto;


padding:40px;



background:

rgba(255,255,255,.35);



border:

2px solid rgba(255,255,255,.9);



border-radius:35px;



backdrop-filter:

blur(15px);



box-shadow:


0 0 40px rgba(0,220,255,.45),

inset 0 0 35px rgba(255,255,255,.8);



}



/* -------------------------------
   TITLE
-------------------------------- */


h1{


text-align:center;


font-size:3.2rem;


color:white;



text-shadow:


0 0 10px #00bfff,

0 0 25px #00ffff;



animation:

titleGlow 5s infinite;


}



@keyframes titleGlow{


50%{

text-shadow:

0 0 25px white,

0 0 50px cyan;

}


}




.subtitle{


text-align:center;


font-size:1.1rem;


color:#17617d;


font-style:italic;


}



/* -------------------------------
   NAV BUTTONS
-------------------------------- */


nav{


display:flex;


justify-content:center;


flex-wrap:wrap;


gap:15px;


margin:35px 0;


}



nav a,
.button{


padding:

12px 25px;



border-radius:30px;



text-decoration:none;



color:#07506c;



background:


linear-gradient(

180deg,

white,

#a6efff

);



border:

1px solid white;



box-shadow:


0 5px 15px rgba(0,180,255,.35),

inset 0 0 10px white;



transition:.3s;



}



nav a:hover,
.button:hover{


transform:

translateY(-5px)
scale(1.05);



box-shadow:


0 0 30px cyan,

inset 0 0 15px white;


}



/* -------------------------------
   CONTENT CARDS
-------------------------------- */


.card{


margin:

30px 0;



padding:

25px;



background:


rgba(255,255,255,.45);



border-radius:25px;



border:

1px solid rgba(255,255,255,.8);



box-shadow:


inset 0 0 20px rgba(255,255,255,.8),


0 0 20px rgba(0,200,255,.25);



}



.card h2{


color:#08708e;


text-shadow:

0 0 8px white;


}




/* -------------------------------
   PORTALS
-------------------------------- */


.hole{


width:400px;

height:40px;


position:absolute;


border-radius:50%;


z-index:2;


background:


radial-gradient(

ellipse at center,

#000 5%,

#071b2a 35%,

#0bbdd4 65%,

rgba(150,255,255,.15) 80%,

transparent

);



box-shadow:


0 0 15px #6fffff,

0 0 40px rgba(0,255,255,.7),

0 0 90px rgba(0,150,255,.35);



overflow:hidden;


animation:

portalPulse 5s infinite ease-in-out;



}



.hole::before{


content:"";


position:absolute;


width:200%;

height:200%;


left:-50%;

top:-50%;



background:


conic-gradient(

transparent,

rgba(0,255,255,.5),

transparent,

rgba(255,255,255,.3),

transparent

);



animation:

portalSpin 8s linear infinite;


}




.hole::after{


content:"";


position:absolute;


width:60%;

height:45%;


left:20%;

top:27%;



border-radius:50%;



background:


radial-gradient(

ellipse,

#000,

#02070d

);



}



@keyframes portalPulse{


50%{

transform:scale(1.1);

opacity:1;

}


}



@keyframes portalSpin{


from{

transform:rotate(0deg);

}


to{

transform:rotate(360deg);

}


}



/* -------------------------------
   FOOTER
-------------------------------- */


footer{


text-align:center;


padding:60px;


opacity:.7;


color:#17617d;


}



/* -------------------------------
   SCROLLBAR
-------------------------------- */


::-webkit-scrollbar{

width:12px;

}


::-webkit-scrollbar-track{

background:#dfffff;

}



::-webkit-scrollbar-thumb{


background:#75ddff;


border-radius:20px;


}