My Page

Eva's Cute World ♡ /* sparkles */ .sparkle{ position:fixed; width:20px; pointer-events:none; z-index:999; animation: float 4s linear infinite; } @keyframes float{ from{ transform:translateY(100vh) rotate(0deg); opacity:1; } to{ transform:translateY(-120vh) rotate(360deg); opacity:0; } } /* layout */ .container{ width:900px; margin:auto; margin-top:40px; } /* top banner */ .banner{ background:rgba(255,105,180,0.75); border:4px dashed white; padding:20px; text-align:center; box-shadow:0 0 25px hotpink; } .banner h1{ font-size:55px; margin:0; text-shadow:3px 3px deeppink; } /* nav */ .nav{ margin-top:15px; text-align:center; } .nav a{ background:pink; padding:10px 15px; border:2px solid white; text-decoration:none; color:white; margin:5px; display:inline-block; box-shadow:0 0 10px hotpink; } .nav a:hover{ transform:scale(1.1); background:deeppink; } /* main sections */ .flex{ display:flex; gap:20px; margin-top:20px; } .sidebar{ width:250px; } .box{ background:rgba(255,192,203,0.25); border:3px dotted white; padding:15px; margin-bottom:20px; box-shadow:0 0 15px hotpink; backdrop-filter:blur(4px); } .main{ flex:1; } /* images */ img{ max-width:100%; } /* marquee */ .marquee{ background:black; color:hotpink; padding:8px; border-top:2px solid hotpink; border-bottom:2px solid hotpink; margin-top:20px; font-weight:bold; } /* blink */ .blink{ animation: blink 1s infinite; } @keyframes blink{ 50%{ opacity:0; } }