@font-face {
  font-family: 'Inter Medium';
  src: url('Inter-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
    font-family: 'Poppins Medium';
    src: url('Poppins-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
  }

:root{
  --ink:#1c1c1c;
  --muted:#666;
  --light:#8a8a8a;
  --rule:#2b2b2b;
  --paper:#ffffff;
  --desk:#2b2b2b;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:var(--desk);
  color:var(--ink);
  font-family: 'Poppins Medium', sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{ color:#1a5cc8; text-decoration:underline; }
a:hover{ text-decoration:underline; }

.desk{
  min-height:100%;
  padding:2rem 1rem 3.75rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.75rem;
}

.page{
  width:210mm;
  max-width:100%;
  background:var(--paper);
  box-shadow:0 0.875rem 2.5rem rgba(0,0,0,.45);
  border-radius:0.125rem;
  padding:18mm 18mm 16mm;
  display:flex;
  flex-direction:column;
}

.top{
  display:flex;
  align-items:center;
  gap:2.125rem;
}

.avatarWrap{
  width:7.375rem;
  height:7.375rem;
  border-radius:999px;
  background:#fff;
  box-shadow:0 0.625rem 1.75rem rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.avatar{
  width:5.875rem;
  height:5.875rem;
  border-radius:999px;
  background-image:url("filip.webp"); 
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.topText{ flex:1; min-width:0; }

.name{
  margin:0;
  font-size:1.875rem;
  letter-spacing:0.125rem;
  font-weight:800;
  line-height:1.2;
}

.subtitle{
  margin-top:0.375rem;
  font-size:0.8rem;
  color:var(--muted);
  letter-spacing:0.0625rem;
}

.location{
  margin-top:0.625rem;
  display:flex;
  align-items:center;
  gap:0.625rem;
  font-size:0.75rem;
  color:var(--muted);
}

.pin{
  width:1.125rem;
  height:1.125rem;
  background:#1f1f1f;
  border-radius:0.125rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.pin svg{
  width:0.875rem;
  height:0.875rem;
  display:block;
}

.topRule{
  margin:1.375rem 0 1.125rem;
  height:0.0625rem;
  background:var(--rule);
  opacity:.55;
}

.twoCol{
  display:flex;
  flex:1;
  gap:1.125rem;
}

.left{
  width:38%;
  padding-right:0.625rem;
  display:flex;
  flex-direction:column;
  gap:1.125rem;
  min-width:0;
}

.vLine{
  width:0.0625rem;
  background:var(--rule);
  opacity:.55;
  flex-shrink:0;
}

.right{
  flex:1;
  padding-left:0.75rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  min-width:0;
}

.section{ margin:0; }

.sectionTitle{
  margin:0 0 0.625rem;
  font-size:0.9375rem;
  letter-spacing:0.075rem;
  font-weight:800;
  color:#222;
}

.sectionTitle.small{
  font-size:0.875rem;
  margin-bottom:0.375rem;
}

.itemTitle{
  font-weight:800;
  font-size:0.7875rem;
  margin-bottom:0.125rem;
}

.itemStrong{
  font-weight:700;
  font-size:0.7625rem;
  margin-bottom:0.125rem;
}

.muted{
  color:var(--muted);
  font-size:0.7rem;
  line-height:1.25;
}

.about{
  margin:0;
  color:#222;
  font-size:0.725rem;
  line-height:1.35;
}

.eduItem{
  margin-bottom:0.875rem;
}
.eduItem:last-child{ margin-bottom:0; }

.skills .skillBlock{ margin-top:0.75rem; }
.skillLabel{
  font-size:0.65625rem;
  letter-spacing:0.05625rem;
  font-weight:800;
  margin:0 0 0.375rem;
  color:#222;
}

.xpItem{ margin-top:0.625rem; }
.xpItem:first-of-type{ margin-top:0; }

.itemHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:0.875rem;
  flex-wrap:wrap;
}

.role{
  font-size:0.8125rem;
  font-weight:800;
  margin:0 0 0.125rem;
}

.dates{
  text-align:right;
  font-size:0.7rem;
  color:#222;
  font-weight:700;
  min-width:6.875rem;
  flex-shrink:0;
}

.techLine{
  margin-top:0.375rem;
  font-size:0.7rem;
  color:#222;
}

.tightTop{ margin-top:0.875rem; }

.bullets{
  margin:0.5rem 0 0 0;
  padding-left:1.125rem;
  font-size:0.7rem;
  color:#222;
  line-height:1.35;
}
.bullets li{ margin:0 0 0.4375rem; }
.bullets li:last-child{ margin-bottom:0; }
.bullets.compact li{ margin-bottom:0.375rem; }

.bottomRow{
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  gap:1.25rem;
  padding-top:0.625rem;
}

.mini{
  width:48%;
  min-width:0;
}

.pageHeader{
  padding-top:2mm;
  padding-bottom:4mm;
}

.bigTitle{
  margin:0;
  font-size:1rem;
  font-weight:900;
  letter-spacing:0.075rem;
}

.project{
  margin-top:0.625rem;
}

.projectTitleRow{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  flex-wrap:wrap;
}

.projectTitle{
  font-size:0.8rem;
  font-weight:900;
  margin:0 0 0.375rem;
}

.meta{
  font-size:0.7rem;
  margin:0 0 0.25rem;
}

.subhead{
  margin-top:0.5rem;
  font-size:0.7rem;
  font-weight:800;
}

.splitTop{
  margin-top:1.375rem;
  padding-top:0.375rem;
}

@media print{
  body{ background:#fff; }
  .desk{ padding:0; gap:0; }
  .page{
    box-shadow:none;
    border-radius:0;
    width:210mm;
    min-height:297mm;
    page-break-after:always;
  }
}

@media screen and (max-width: 768px){
  .desk{
    padding:1rem 0.5rem 2rem;
    gap:1rem;
  }

  .page{
    width:100%;
    max-width:210mm;
    padding:12mm 10mm 10mm;
    box-shadow:0 0.5rem 1.5rem rgba(0,0,0,.3);
  }

  .top{
    flex-direction:column;
    align-items:flex-start;
    gap:1rem;
  }

  .avatarWrap{
    width:5rem;
    height:5rem;
  }

  .avatar{
    width:4rem;
    height:4rem;
  }

  .name{
    font-size:1.5rem;
  }

  .twoCol{
    flex-direction:column;
    gap:1rem;
  }

  .left{
    width:100%;
    padding-right:0;
    gap:1.75rem;
  }

  .vLine{
    display:none;
  }

  .right{
    padding-left:0;
    gap:1.5rem;
  }

  .itemHead{
    flex-direction:column;
    gap:0.5rem;
  }

  .dates{
    text-align:left;
    min-width:auto;
  }

  .bottomRow{
    flex-direction:column;
    gap:1rem;
  }

  .mini{
    width:100%;
  }
}

@media screen and (max-width: 480px){
  .page{
    padding:10mm 8mm 8mm;
  }

  .name{
    font-size:1.25rem;
  }

  .left{
    gap:2rem;
  }

  .right{
    gap:1.75rem;
  }

  .sectionTitle{
    font-size:0.875rem;
    margin-bottom:0.875rem;
  }

  .projectTitle{
    font-size:0.75rem;
  }

  .project{
    margin-top:1.25rem;
  }

  .splitTop{
    margin-top:1.75rem;
    padding-top:0.75rem;
  }
}