*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:linear-gradient(165deg,#c8e6c9 0%,#a5d6a7 35%,#81c784 70%,#66bb6a 100%);
  color:#111;
  transition:background .5s,color .5s;
  min-height:100vh;
  position:relative;
}
#leaves{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}
header,main,footer{
  position:relative;
  z-index:1;
}
header{display:flex;justify-content:space-between;padding:25px 8%}
.logo{font-size:30px;font-weight:700}
.theme button{border:0;background:none;font-size:22px;cursor:pointer}
.hero{text-align:center;padding:70px 20px;min-height:75vh}
.avatar{
  width:180px;height:180px;border-radius:50%;
  object-fit:cover;background:#fff;
  box-shadow:0 25px 60px #0003;
  animation:float 4s ease-in-out infinite;
}
.hero h1{font-size:70px;margin:25px 0 10px}
.hero h2{font-weight:500;margin:0 0 8px}
.hero p{font-size:22px;color:#444}
.btn{
  display:inline-block;margin:15px;padding:14px 30px;
  background:#0071e3;color:white;border-radius:30px;text-decoration:none;
}
.card{
  max-width:850px;margin:35px auto;padding:35px;border-radius:30px;
  background:#ffffffcc;backdrop-filter:blur(20px);
  box-shadow:0 20px 50px #0001;
}
.tags span{
  display:inline-block;background:#eee;border-radius:20px;
  padding:10px 18px;margin:8px;
}
.timeline p{padding:12px;border-left:3px solid #0071e3}
.reveal{animation:show 1s ease}
footer{text-align:center;padding:30px;opacity:.75}

.music-btn{
  position:fixed;right:22px;bottom:22px;z-index:20;
  width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:#ffffffee;color:#2e7d32;
  box-shadow:0 10px 28px #0003;
  transition:transform .2s,background .2s,color .2s;
}
.music-btn:hover{transform:scale(1.06)}
.music-btn .icon-off{display:none}
.music-btn:not(.on){color:#888;background:#ffffffe6}
.music-btn:not(.on) .icon-on{display:none}
.music-btn:not(.on) .icon-off{display:block}

.dark{
  background:linear-gradient(165deg,#1b2e1c 0%,#0f1a12 50%,#050805 100%);
  color:white;
}
.dark .hero p{color:#bbb}
.dark .card{background:#111c}
.dark .tags span{background:#333}
.dark .music-btn{background:#1e2a1ecc;color:#a5d6a7}
.blue{
  background:linear-gradient(165deg,#0a2a1f 0%,#071426 55%,#041018 100%);
  color:white;
}
.blue .hero p{color:#b8c8d8}
.blue .card{background:#ffffff1a}
.green{
  background:linear-gradient(165deg,#dcedc8 0%,#c5e1a5 40%,#aed581 100%);
}
.blue .card,.green .card{background:#ffffffaa}

@keyframes float{50%{transform:translateY(-12px)}}
@keyframes show{from{opacity:0;transform:translateY(30px)}to{opacity:1}}
@media(max-width:600px){
  .hero h1{font-size:42px}
  .avatar{width:130px;height:130px}
  .card{margin:20px;padding:25px}
  .music-btn{right:16px;bottom:16px;width:46px;height:46px}
}