/* =======================================
   alyyyylulaXD - Style.css
   Parte 1
======================================= */

:root{

--bg:#1d1333;
--bg2:#2d1848;
--purple:#8f63ff;
--purple2:#c18fff;
--pink:#f6c7ff;
--white:#ffffff;
--box:#2c2149;
--border:#b17eff;
--shadow:#00000070;

}

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Quicksand',sans-serif;

background:
linear-gradient(
180deg,
#1d1333 0%,
#25163d 40%,
#39215d 100%);

color:white;

overflow-x:hidden;

}

/* Fondo de estrellas */

#stars{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

pointer-events:none;

z-index:-1;

background-image:

radial-gradient(white 1px,transparent 1px),
radial-gradient(#cba7ff 1px,transparent 1px),
radial-gradient(#ffffff 1px,transparent 1px);

background-size:
120px 120px,
180px 180px,
250px 250px;

animation:starsMove 90s linear infinite;

opacity:.7;

}

@keyframes starsMove{

from{

transform:translateY(0);

}

to{

transform:translateY(-500px);

}

}

/* HEADER */

header{

text-align:center;

padding:40px;

margin:30px;

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

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

border-radius:18px;

backdrop-filter:blur(8px);

box-shadow:
0 0 30px #8f63ff55;

}

header h1{

font-family:'Press Start 2P',cursive;

font-size:28px;

line-height:45px;

color:#ffffff;

text-shadow:

0 0 10px #b892ff,

0 0 20px #8f63ff,

0 0 35px #8f63ff;

}

header p{

margin-top:20px;

font-size:18px;

color:#edd8ff;

}

/* CONTENEDOR */

.container{

display:grid;

grid-template-columns:

280px
1fr;

gap:25px;

width:90%;

margin:auto;

align-items:start;

}

/* SIDEBAR */

aside{

display:flex;

flex-direction:column;

gap:20px;

position:sticky;

top:20px;

}

/* VENTANAS */

.window{

background:var(--box);

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

border-radius:12px;

overflow:hidden;

box-shadow:

6px 6px 0px rgba(0,0,0,.25),

0 0 20px rgba(161,116,255,.35);

transition:.3s;

}

.window:hover{

transform:translateY(-3px);

box-shadow:

0 0 25px #b17eff;

}

.window h2{

background:linear-gradient(
90deg,
#7b4bff,
#b17eff);

padding:12px;

font-size:15px;

font-family:'Press Start 2P';

color:white;

border-bottom:2px solid white;

}

.window p,
.window a,
.window li{

padding:12px;

font-size:16px;

line-height:1.7;

}

.window ul{

list-style:none;

}

.window li{

border-bottom:1px dashed #8f63ff55;

}

.window li:last-child{

border:none;

}

/* LINKS */

a{

color:#ffd8ff;

text-decoration:none;

transition:.25s;

font-weight:bold;

}

a:hover{

color:white;

text-shadow:

0 0 10px violet;

}

/* BOTÓN */

button{

width:90%;

margin:15px;

padding:12px;

background:

linear-gradient(
90deg,
#8f63ff,
#d09bff);

border:none;

border-radius:10px;

font-size:15px;

font-weight:bold;

cursor:pointer;

color:white;

transition:.3s;

}

button:hover{

transform:scale(1.05);

box-shadow:

0 0 20px violet;

}

/* MAIN */

main{

display:flex;

flex-direction:column;

gap:25px;

}

/* ABOUT */

#about p{

padding:20px;

font-size:17px;

line-height:1.9;

}

/* HOBBIES */

.cards{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(170px,1fr));

gap:20px;

padding:20px;

}

.card{

background:#39265f;

border:2px solid #b17eff;

border-radius:12px;

padding:20px;

text-align:center;

transition:.3s;

}

.card:hover{

transform:translateY(-6px);

box-shadow:

0 0 25px #b17eff;

}

.card h3{

margin:15px 0;

color:#ffeaff;

}

.card p{

padding:0;

font-size:15px;

}
/* =======================================
   alyyyylulaXD - Style.css
   Parte 2
======================================= */


/* GALERÍA */

.gallery{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(160px,1fr));

gap:18px;

padding:20px;

}


.gallery img{

width:100%;

height:170px;

object-fit:cover;

border-radius:12px;

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

background:#211238;

transition:.4s;

filter:saturate(1.1);

}


.gallery img:hover{

transform:

scale(1.08)
rotate(2deg);

box-shadow:

0 0 25px #c18fff;

filter:

brightness(1.2);

}



/* IMÁGENES ROTAS */

.gallery img:not([src]){

display:none;

}



/* TEXTO DESTACADO */

strong{

color:#e8c7ff;

text-shadow:

0 0 8px #b17eff;

}



/* FOOTER */

footer{

margin:40px auto;

width:90%;

padding:25px;

text-align:center;

background:

rgba(255,255,255,.05);

border:

2px solid var(--border);

border-radius:15px;

box-shadow:

0 0 25px #8f63ff55;

color:#edd8ff;

}


footer p{

margin:8px;

}



/* CAJAS CON EFECTO CRISTAL */

.window{

backdrop-filter:

blur(5px);

}



/* ANIMACIÓN FLOTANTE */

@keyframes floating{


0%{

transform:translateY(0);

}


50%{

transform:translateY(-8px);

}


100%{

transform:translateY(0);

}


}


.card{

animation:

floating 5s infinite ease-in-out;

}


.card:nth-child(2){

animation-delay:.5s;

}


.card:nth-child(3){

animation-delay:1s;

}


.card:nth-child(4){

animation-delay:1.5s;

}



/* BRILLO DE TEXTO */

.glow{

animation:

glow 2s infinite alternate;

}


@keyframes glow{


from{

text-shadow:

0 0 5px white,
0 0 10px #b17eff;

}


to{

text-shadow:

0 0 15px white,
0 0 35px #8f63ff;

}


}



/* SCROLLBAR RETRO */

::-webkit-scrollbar{

width:14px;

}


::-webkit-scrollbar-track{

background:#1c102f;

}


::-webkit-scrollbar-thumb{

background:

linear-gradient(
#b17eff,
#6d35e8);

border-radius:20px;

border:

3px solid #1c102f;

}


::-webkit-scrollbar-thumb:hover{

background:

linear-gradient(
#e0b7ff,
#8f63ff);

}



/* SELECCIÓN DE TEXTO */

::selection{

background:#c18fff;

color:#27123e;

}



/* EFECTO DE CURSOR */

body{

cursor:

url("images/cursor.png"),
auto;

}


a,button{

cursor:

url("images/cursor-pointer.png"),
pointer;

}



/* PEQUEÑOS BRILLOS DECORATIVOS */

.window::after{

content:"✦";

position:absolute;

}


.window{

position:relative;

}



/* ANIMACIÓN DE ENTRADA */

.window{

animation:

fadeIn .8s ease;

}



@keyframes fadeIn{


from{

opacity:0;

transform:

translateY(20px);

}


to{

opacity:1;

transform:

translateY(0);

}


}



/* RESPONSIVE TABLET */

@media(max-width:900px){


.container{

grid-template-columns:

1fr;

width:92%;

}


aside{

position:relative;

}


header h1{

font-size:20px;

}


}



/* RESPONSIVE CELULAR */

@media(max-width:600px){


header{

margin:15px;

padding:25px;

}


header h1{

font-size:15px;

line-height:30px;

}


header p{

font-size:14px;

}


.container{

width:95%;

}


.window h2{

font-size:11px;

}


.window p,
.window a,
.window li{

font-size:14px;

}


.cards{

grid-template-columns:

1fr;

}


.gallery{

grid-template-columns:

repeat(2,1fr);

}


.gallery img{

height:120px;

}


}



/* EFECTO NIEBLA LILA */

body::before{

content:"";

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:

radial-gradient(
circle at top left,
#b17eff22,
transparent 40%),

radial-gradient(
circle at bottom right,
#ffb7ff22,
transparent 40%);

pointer-events:none;

}



/* PEQUEÑO EFECTO PIXEL */

.pixel{

font-family:

'Press Start 2P';

font-size:12px;

color:#f6dfff;

}



/* CAJA DE MÚSICA */

#music{

display:none;

}
/* =======================================
   alyyyylulaXD - Style.css
   Parte 3 - Detalles finales Y2K
======================================= */


/* BADGES RETRO */

.badge{

display:inline-block;

padding:8px 12px;

margin:5px;

background:

linear-gradient(
135deg,
#8f63ff,
#e4b8ff);

color:white;

border-radius:5px;

font-family:

'Press Start 2P';

font-size:10px;

box-shadow:

3px 3px 0 #3b176e;

}



/* CAJITAS DE INFORMACIÓN */

.info-box{

margin:15px;

padding:15px;

background:

rgba(143,99,255,.15);

border:

2px dashed #d4aaff;

border-radius:10px;

}


/* TITULOS CON ESTILO PIXEL */

.pixel-title{

font-family:

'Press Start 2P';

color:#f6c7ff;

font-size:18px;

text-align:center;

text-shadow:

3px 3px 0 #5b2aa8;

}



/* EFECTO NEÓN */

.neon{

animation:

neonPulse 2s infinite alternate;

}


@keyframes neonPulse{


from{

filter:

drop-shadow(
0 0 5px #ffffff);

}


to{

filter:

drop-shadow(
0 0 20px #b17eff);

}


}



/* BOTONES RETRO */

.retro-button{

display:inline-block;

padding:10px 18px;

background:

#8f63ff;

border:

3px solid #e7c8ff;

border-radius:8px;

color:white;

font-family:

'Press Start 2P';

font-size:11px;

box-shadow:

4px 4px 0 #35106b;

transition:.2s;

}


.retro-button:hover{

transform:

translate(3px,3px);

box-shadow:

1px 1px 0 #35106b;

}



/* EFECTO DE PANTALLA ANTIGUA */

body::after{

content:"";

position:fixed;

inset:0;

pointer-events:none;

background:

repeating-linear-gradient(

0deg,

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

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

transparent 1px,

transparent 4px

);

z-index:999;

}



/* PEQUEÑOS DESTELLOS */

.sparkle{

position:absolute;

color:white;

animation:

sparkle 2s infinite;

}


@keyframes sparkle{


0%{

opacity:0;

transform:

scale(.5);

}


50%{

opacity:1;

}


100%{

opacity:0;

transform:

scale(1.5);

}


}



/* SECCIÓN DE FOTOS */

#gallery{

text-align:center;

}


#gallery p{

color:#e8caff;

}



/* LINKS CON ESTILO ANTIGUO */

.window a{

display:inline-block;

}


.window a:hover::before{

content:"➜ ";

color:#fff;

}



/* EFECTO DE VENTANA ACTIVA */

.window:hover h2{

letter-spacing:1px;

}



/* MINI ANIMACIÓN DEL HEADER */

header{

animation:

headerFloat 6s infinite ease-in-out;

}


@keyframes headerFloat{


0%{

transform:translateY(0);

}


50%{

transform:translateY(-5px);

}


100%{

transform:translateY(0);

}


}



/* MODO PEQUEÑO PARA PANTALLAS MUY PEQUEÑAS */

@media(max-width:400px){


.gallery{

grid-template-columns:

1fr;

}


.card{

padding:15px;

}


}



/* DECORACIÓN EXTRA */

.sparkle-text{

color:#ffffff;

text-shadow:

0 0 5px #fff,

0 0 15px #c18fff,

0 0 30px #8f63ff;

}
.sticker{
    position: fixed;
    bottom: 20px;
    right: 20px;

    width: 180px;

    z-index: 999;

    animation: flotar 3s ease-in-out infinite;
}

@keyframes flotar{

0%{
transform:translateY(0px);
}

50%{
transform:translateY(-10px);
}

100%{
transform:translateY(0px);
}

}
#messages{

height:180px;

overflow-y:auto;

background:#160c29;

padding:10px;

border-radius:10px;

border:2px solid #b17eff;

}


#name,
#message{

width:90%;

margin:8px;

padding:8px;

background:#24133f;

color:white;

border:2px solid #b17eff;

border-radius:8px;

}


#message{

height:70px;

resize:none;

}