.doodle{position:fixed;z-index:0;pointer-events:none;opacity:.18;border-radius:50%;animation:doodleMove 12s linear infinite alternate}.doodle1{width:120px;height:120px;background:linear-gradient(135deg,#7400b8 60%,#fbeaeb);top:8vh;left:4vw;animation-delay:0s}.doodle2{width:80px;height:80px;background:linear-gradient(135deg,#e0aaff 60%,#5e60ce);top:70vh;left:80vw;animation-delay:2s}.doodle3{width:100px;height:100px;background:linear-gradient(135deg,#fbeaeb 60%,#7400b8);top:40vh;left:60vw;animation-delay:4s}.doodle4{width:60px;height:60px;background:linear-gradient(135deg,#5e60ce 60%,#e0aaff);top:80vh;left:10vw;animation-delay:6s}@keyframes doodleMove{0%{transform:translateY(0) scale(1) rotate(0)}30%{transform:translateY(-30px) scale(1.1) rotate(10deg)}60%{transform:translateY(30px) scale(.95) rotate(-10deg)}to{transform:translateY(0) scale(1) rotate(0)}}body{font-size:18px;padding:20px}@media (max-width: 768px){body{font-size:16px;padding:15px}.navbar{flex-direction:column}}@media (max-width: 480px){body{font-size:14px;padding:10px}h1{font-size:24px}.navbar a{font-size:16px;padding:8px}section{padding:10px}.btn{width:100%}}@media (max-width: 768px){.navbar{flex-wrap:wrap}.hero h1{font-size:2.5rem}.hero h2{font-size:1.5rem}.content{padding:1rem}}.card{background-color:#fff;color:#000;padding:20px;margin:15px auto;border-radius:12px;max-width:600px;box-shadow:0 4px 10px #0003;transition:transform .3s ease,box-shadow .3s ease}.card:hover{transform:scale(1.05);box-shadow:0 12px 24px #0006;cursor:pointer}