/* General Styles */
*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif}
body{background-color:#f4f7f8;color:#333;line-height:1.6}

/* Header */
header{background:#0073b1;color:white;text-align:center;padding:20px}
.header-top{display:flex;justify-content:space-between;align-items:center;padding:0 20px}
.resume-btn{background:#ffce00;color:#333;padding:10px 20px;border-radius:8px;text-decoration:none;font-weight:bold;transition:0.4s}
.resume-btn:hover{background:#ffd633}
.profile-pic img{width:60px;height:60px;border-radius:50%}
.header-intro h1{font-size:2.5em;margin:10px 0 5px 0}
.header-intro p{font-size:1.1em;margin-bottom:10px}

/* About */
.about{padding:20px;text-align:center;background-color:#fff}
.about h2{font-size:2em;margin-bottom:15px}
.about p{max-width:700px;margin:auto;font-size:1em}

/* Skills */
.skills{padding:20px;text-align:center;background-color:#f0f0f0}
.skills h2{font-size:2em;margin-bottom:20px}
.skill-icons{display:flex;flex-wrap:wrap;justify-content:center;gap:15px;position:relative}
.skill{background:#fff;padding:12px;border-radius:10px;width:100px;cursor:pointer;position:relative;transition:all 0.5s ease;z-index:1}
.skill i{font-size:2em;margin-bottom:5px}
/* Rainbow colors */
.os-icon{color:#f94144}
.server-icon{color:#f3722c}
.network-icon{color:#f9c74f}
.web-icon{color:#90be6d}
.monitor-icon{color:#43aa8b}
.db-icon{color:#577590}
.skill p{font-weight:bold;font-size:0.9em;margin-bottom:5px}
.skill-details{position:absolute;top:70px;padding:5px 10px;border-radius:6px;background-color:#ffeb3b;white-space:nowrap;overflow:hidden;width:0;opacity:0;transition:all 0.7s ease;z-index:0}
.skill-details:hover{background-color:#ffe733}
.skill.active{z-index:10}

/* Contact */
.contact{padding:20px;text-align:center;background-color:#fff;font-size:1em}

/* Responsive */
@media(max-width:768px){
  .header-top{flex-direction:column;gap:10px}
  .skill-icons{gap:10px}
  .skill-details{position:relative;top:auto;left:auto;right:auto;width:100%;white-space:normal}
}