*{box-sizing:border-box;margin:0;padding:0}

body{font-family:Arial, sans-serif;background:#121212;color:#f5e8d8}

.content_wrapper{max-width:1210px;margin:0 auto;padding:0 12px}

/* Header */
.content_wrapper .header{
  display:flex;align-items:center;justify-content:flex-start;gap:16px;
  position:sticky;top:0;z-index:1000;background:#121212;padding:8px;
  width:100%;
}
.content_wrapper .header .name{
  font-family:"Iceland",sans-serif;
  font-size:50px;
  line-height:1.1;
  color:#f5e8d8;
  text-align:left
}
.content_wrapper .header .subname{
  font-family:"Iceland",sans-serif;
  font-size:0.48em; /* relative to .name so subname stays smaller */
  color:#f5e8d8;
  margin-top:6px
}
.content_wrapper .header .sociallinks{
  margin-left:auto;
  display:flex;
  gap:12px;
  align-items:center
}
.content_wrapper .header .sociallinks a{
  color:#f5e8d8;
  text-decoration:none;
  padding:6px 10px}
.content_wrapper .header .sociallinks a:hover{color:rgba(226,48,48,0.48); border-color: rgba(226,48,48,0.48);}
.link-resume{
  border:2px solid #f5e8d8;
  border-radius:4px;
  padding:4px 8px}

/* Profile Image + About Info */
.profile-img{width:250px;height:250px;border-radius:50%;object-fit:cover;display:block;margin:16px auto;border-style:groove}
.about-me{padding:15px;display:flex;flex-direction:column;align-items:center;text-align:center}
.about-me h4{max-width:800px;line-height:30px;font-weight:300}

/* Projects grid / cards */
.content_wrapper .projects{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:20px;
  justify-content:center
}
.project-card{
  background:#313131;
  color:#f5e8d8;
  border:2px solid #f5e8d8;
  border-radius:5px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  max-width:420px;
  margin:0 auto;
  width:100%
}
.project-card img{
  width:100%;
  height:250px;
  object-fit:cover
}
.project-card h2{
  margin:5px;
  font-family:"Iceland",sans-serif}
.project-card p{
  font-size: 18px;
  padding-left:3px;
  padding-right:3px;
  padding-bottom: 0;
  font-family:"Iceland",sans-serif
}
.project-card .btn-container{display:flex;gap:10px}
.infobtns{font-size:22px;color:#f5e8d8;text-decoration:none; padding: 10px;}
.infobtns:hover{color:rgba(226,48,48,0.48)}

/* Expertise */
.expertise-card{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.expertise-card .skill{border:1px solid #f5e8d8;border-radius:5px;padding:10px;font-family:"Iceland",sans-serif}

/* Slider */
.slider-wrapper{position:relative;margin:0 auto 24px;padding:8px 0}
.projects-slider{overflow:hidden}
.projects-slider-inner{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.project-slide{flex:0 0 calc(100% - 40px);max-width:100%;display:flex;justify-content:center;scroll-snap-align:center}
.slider-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.6);color:#f5e8d8;border:0;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10}
.slider-btn.prev{left:6px}.slider-btn.next{right:6px}

/* Responsive Screen depending on sizes */
@media (min-width:375px){
  .content_wrapper .header .name{font-size:32px}
  .content_wrapper .header .subname{font-size:0.48em}
  .profile-img{width:220px;height:220px}
  .project-slide{flex:0 0 calc(50% - 30px)}
}

@media (min-width:768px){
  .project-slide{flex:0 0 calc(50% - 30px)}
}

@media (min-width:992px){
  .project-slide{flex:0 0 calc(33.333% - 26.66px)}
  .profile-img{width:60%;max-width:280px;height:280px}
  .content_wrapper .header .name{font-size:50px}
  .content_wrapper .header .subname{font-size:0.48em}
}

@media (min-width:1024px){
  .projects-slider-inner{flex-wrap:wrap;overflow:visible;scroll-snap-type:none}
  .project-slide{flex:0 0 calc(33.333% - 13.333px);display:block}
  .slider-btn{display:none}
}

/* small adjustments */
@media (max-width:375px){.content_wrapper .header .name{font-size:20px}.content_wrapper .header .subname{font-size:0.48em}}


@media (max-width: 500px) {
  .content_wrapper .header{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
  }

  .content_wrapper .header .name{
    width: 100%;
    text-align: center;
    margin: 0 auto;
    font-size: 28px; /* make name larger than subname on small screens */
  }

  .content_wrapper .header .subname{
    display: block;
    text-align: center;
    margin-top: 4px;
    font-size: 0.48em; /* keep subname smaller than name */
  }

  .content_wrapper .header .sociallinks{
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin: 6px 0 0 0;
    width: auto;
    justify-content: center;
    align-items: center;
    position: static;
    top: auto;
    right: auto;
    background: transparent;
    padding: 0;
    box-shadow: none;
  }

  .content_wrapper .header .sociallinks .link,
  .content_wrapper .header .sociallinks .link-resume{
    padding: 6px 8px;
  }

  .projects-slider-inner { padding: 0 12px; gap: 12px; }
  .project-slide {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    scroll-snap-align: center;
  }
  .project-card {
    width: 100% !important;
    max-width: 420px !important;
    box-sizing: border-box;
  }
}