*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#f2f2f2;
padding:20px;
}

.wrapper{
max-width:800px;
margin:auto;
}

.card{
background:white;
padding:30px;
border-radius:20px;
margin-bottom:25px;
box-shadow:0 10px 25px rgba(0,0,0,0.07);
position:relative;
}

/* HERO */
.hero{
text-align:center;
}

.menu-btn{
position:absolute;
right:20px;
top:20px;
font-size:20px;
cursor:pointer;
}

.profile-container img{
width:140px;
height:140px;
border-radius:50%;
border:6px solid #17c3b2;
object-fit:cover;
}

h1{
margin-top:15px;
font-size:28px;
}

.subtitle{
margin:10px 0;
color:#555;
}

.dot{
height:10px;
width:10px;
background:#6c5ce7;
display:inline-block;
border-radius:50%;
margin-right:5px;
}

.location{
margin-left:15px;
}

.resume-btn{
display:inline-block;
padding:10px 25px;
border:2px solid #17c3b2;
border-radius:30px;
color:#17c3b2;
text-decoration:none;
margin-top:10px;
transition:.3s;
}

.resume-btn:hover{
background:#17c3b2;
color:white;
}

.theme-toggle{
position:absolute;
right:20px;
bottom:20px;
font-size:18px;
cursor:pointer;
}

/* SOCIAL */
.social{
display:flex;
justify-content:space-around;
font-size:22px;
}

.social a{
color:#333;
transition:.3s;
}

.social a:hover{
color:#6c5ce7;
}

/* TECH */
.tech-category{
margin-bottom:25px;
}

.tech-category h3{
color:#17c3b2;
margin-bottom:10px;
}

.tags{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.tags span{
padding:6px 15px;
border:1px solid #ccc;
border-radius:20px;
font-size:13px;
background:#fafafa;
}

/* TIMELINE */
.timeline{
border-left:3px solid #6c5ce7;
padding-left:20px;
}

.timeline-item{
margin-bottom:25px;
position:relative;
}

.timeline-item::before{
content:"";
width:12px;
height:12px;
background:white;
border:3px solid #6c5ce7;
border-radius:50%;
position:absolute;
left:-29px;
top:5px;
}

.date{
color:#6c5ce7;
font-weight:500;
display:block;
margin-bottom:5px;
}

footer{
text-align:center;
margin-top:20px;
color:#777;
}

/* RESPONSIVE */
@media (min-width:768px){

body{
padding:40px;
}

.card{
padding:40px;
}

h1{
font-size:32px;
}

}


/* ============================= */
/* HIGH LEVEL ANIMATED BACKGROUND */
/* ============================= */

.bg-animation {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
  top: 0;
  left: 0;
}

.bg-animation span {
  position: absolute;
  display: block;
  width: 400px;
  height: 400px;
  background: linear-gradient(45deg, #6c5ce7, #00cec9);
  border-radius: 50%;
  animation: animateBlob 20s linear infinite;
  opacity: 0.15;
  filter: blur(100px);
}

.bg-animation span:nth-child(1) {
  top: -100px;
  left: -100px;
}

.bg-animation span:nth-child(2) {
  bottom: -150px;
  right: -150px;
  animation-duration: 25s;
}

.bg-animation span:nth-child(3) {
  top: 40%;
  left: 60%;
  animation-duration: 30s;
}

@keyframes animateBlob {
  0% { transform: rotate(0deg) translate(0, 0); }
  50% { transform: rotate(180deg) translate(50px, -50px); }
  100% { transform: rotate(360deg) translate(0, 0); }
}


.card {
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 30px;
  border-radius: 20px;
  margin-bottom: 25px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

body.dark .card {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
}


.card {
  opacity: 0;
  transform: translateY(40px);
}

.card.show {
  opacity: 1;
  transform: translateY(0);
  transition: 0.8s ease;
}