/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body{
body{

margin:0;

font-family:Verdana, Geneva, sans-serif;

background:linear-gradient(
180deg,
#ffd6eb,
#ffeef7,
#ffdff0
);

overflow-x:hidden;

}

/* Barra lateral */

.sidebar{

position:fixed;

left:20px;

top:40px;

width:180px;

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

backdrop-filter:blur(10px);

border-radius:20px;

padding:20px;

box-shadow:0px 0px 25px rgba(255,255,255,.8);

}

.sidebar h2{

text-align:center;

color:#ff69a6;

}

.sidebar a{

display:block;

padding:12px;

margin-top:12px;

text-decoration:none;

color:#ff4d94;

background:white;

border-radius:15px;

transition:.3s;

}

.sidebar a:hover{

background:#ffd3e7;

transform:translateX(6px);

}

/* Contenido */

.contenido{

margin-left:260px;

padding:50px;

}

h1{

font-size:55px;

text-align:center;

color:white;

text-shadow:

0 0 8px white,

0 0 18px #ff8dc0,

0 0 30px #ffffff;

}

.entrada{

margin:auto;

max-width:700px;

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

padding:35px;

border-radius:30px;

box-shadow:

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

backdrop-filter:blur(10px);

}

.entrada h2{

color:#ff69b4;

}

.entrada p{

font-size:18px;

line-height:1.8;

color:#555;

}

/* Burbujas */

.burbujas{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

pointer-events:none;

background-image:

radial-gradient(circle at 10% 20%, rgba(255,255,255,.6) 8px, transparent 9px),

radial-gradient(circle at 70% 40%, rgba(255,255,255,.4) 15px, transparent 16px),

radial-gradient(circle at 30% 80%, rgba(255,255,255,.5) 12px, transparent 13px),

radial-gradient(circle at 90% 70%, rgba(255,255,255,.4) 20px, transparent 21px);

animation:flotar 18s linear infinite;

}

@keyframes flotar{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-20px);

}

100%{

transform:translateY(0px);

}

}
}