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

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f0f0f0;
  overflow: hidden;
}

#grid {
  width: 210mm;
  height: 100vh;
  display: grid;
  grid-template-columns: 30% 70%;
  background: #fff;
  box-shadow: 0 0 20px rgba(0,0,0,0.15);
}

#sidebar {
  background: rgb(44,62,80);
  color: #fff;
  padding: 15mm 5mm;
  height: 100vh;
  overflow: hidden;
}

#sidebar img {
  width: 50mm;
  height: 50mm;
  border-radius: 50%;
  margin: 5mm auto;
  display: block;
}

.details { margin: 10mm 0; }
.details h1 { font-size: 5mm; margin-bottom: 3mm; color: rgb(0,255,204); }
.details p { font-size: 3mm; line-height: 1.4; }

#contact-grid, #reference-grid {
  font-size: 3mm;
  display: grid;
  gap: 3mm 2mm;
}
#contact-grid { grid-template-columns: auto 1fr; }
#reference-grid { grid-template-columns: 1fr; gap: 5mm; }
#reference-grid h3 { color: rgb(0,255,204); margin-bottom: 1mm; }
#reference-grid p { margin-bottom: 0.5mm; }

#main {
  padding: 15mm 10mm;
  height: 100vh;
  overflow-y: auto;
}
#main h1 { font-size: 8mm; color: rgb(44,62,80); }
#main h4 { font-size: 5mm; color: #646464; margin-bottom: 10mm; }
#education, #experience, #skills { margin: 10mm 0; }
#education h1, #experience h1, #skills h1 {
  font-size: 6mm;
  margin-bottom: 5mm;
  color: rgb(44,62,80);
}

table { width: 100%; border-collapse: collapse; }
td { padding: 2mm 3mm; font-size: 3mm; }

.skill {
  width: 100%;
  background: #e6e6e6;
  height: 5mm;
  border-radius: 2.5mm;
}
.bar {
  height: 100%;
  background: rgb(0,255,204);
  border-radius: 2.5mm;
  text-align: right;
  padding-right: 3mm;
  color: rgb(44,62,80);
  font-size: 3mm;
}
#html-bar { width: 95%; }
#css-bar { width: 85%; }
#js-bar { width: 40%; }