:root{
  --bg:#000;
  --fg:#909090;
  --accent:#cfcfcf;
}

*{ box-sizing:border-box; }

html,body{
  height:100%;
  margin:10%;
}

body{
  background:var(--bg);
  color:var(--fg);
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

a{ color:var(--fg); text-decoration:underline; }
a:hover{ color:var(--accent); }

/* 10% total “margin” around content -> 5vw padding on each side */
.container{
  padding:5vw;
  max-width:1100px;      /* keep lines comfy on ultra-wide screens */
  margin:0 auto;
}

h1{ margin:0 0 1rem; }

.hero{
  width:min(100%, 800px);
  display:block;
  margin:1rem 0 2rem;
  border-radius:12px;
}

/* Keep your table but make it behave responsively-ish */
.skills{
  border-collapse:separate;
  border-spacing:2rem 1rem;   /* spacing between cells */
  margin:2rem 0;
}

.skills td{
  text-align:center;
  vertical-align:top;
}

/* Make images ~30% of viewport width, with sensible limits */
.resized-image{
  width:clamp(200px, 30vw, 420px);
  height:auto;
  display:block;
  margin:0 auto 0.5rem;
  border-radius:12px;
  object-fit:cover;
  box-shadow:0 4px 20px rgba(0,0,0,.4);
}

/* Small screens: stack cells */
@media (max-width:700px){
  .skills, .skills tr, .skills td{
    display:block;
    width:100%;
  }
  .skills td{ margin-bottom:1.25rem; }
}