body {
  margin: 0 ;
  padding: 0 ;
  color: #333 ;
  font-family: 'Noto Sans Korean', sans-serif;
  background: #f5f5f5 ;
}

.resume-wrapper {
  position: relative ;
  width: 960px ;
  margin: 30px auto 60px ;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  background: #fff ;
}

/* tlacitko stazeni PDF */
.print-btn {
  position: absolute ;
  top: 20px ;
  right: 20px ;
  z-index: 100 ;
  display: inline-flex ;
  align-items: center ;
  gap: 8px ;
  padding: 10px 14px ;
  background: #fff ;
  color: #333 ;
  border: 1px solid #ededed ;
  border-radius: 8px ;
  font-family: inherit ;
  font-size: 14px ;
  cursor: pointer ;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) ;
}
.print-btn:hover {
  background: #f5f5f5 ;
}
.print-btn i {
  color: #9bb4d6 ;
  font-size: 18px ;
}


/* header */
header {
  position: relative ;
  padding: 30px ;
  border-bottom: 1px solid #ededed ;
}
header h1 {
  position: absolute ;
  bottom: 60px ;
  right: 180px ;
  z-index: 1 ;
  font-size: 42px ;
}
header .name-container {
  position: absolute ;
  left: 370px ;
  bottom: 10px ;
  z-index: 1 ;
  height: 30px ;
  padding-left: 10px ;
  margin: 0 ;
  font-size: 25px ;
  line-height: 30px ;
}
header .job-container {
  position: absolute ;
  left: 770px ;
  bottom: -20px ;
  z-index: 1 ;
  height: 20px ;
  padding-left: 10px ;
  margin: 0 ;
  color: #666 ;
  font-size: 14px ;
  font-weight: normal ;
  line-height: 20px ;
}
header .profile-picture {
  position: absolute ;
  right : 190px ;
  bottom: -50px ;
  z-index: 2 ;
  width: 100px ;
  height: 100px ;
  border-radius: 50% ;
}
header .profile-picture img {
  width: 100px ;
  height: 100px ;
  border-radius: 50% ;
  border: 1px solid rgba(0, 0, 0, 0.1) ;
}
header .contact-container {
  position: relative ;
  top: 0px ;
  left: 30px ;
}
header .contact-container .contact-list li {
  position: relative ;
  height: 25px ;
  padding-left: 25px ;
  color: #666 ;
  font-size: 13px ;
  line-height: 25px ;
  text-align: left ;
}
header .contact-container .contact-list li span {
  position: absolute ;
  top: 0 ;
  left: 0 ;
  z-index: 1 ;
  width: 25px ;
  height: 25px ;
  text-align: center ;
}


/* main */
#main {
  position: relative ;
}

#main > .resume-item-wrapper {
  position: relative ;
  top: 0 ;
  left: 0 ;
  width: 720px ;
  padding: 75px 0 40px ;
  border-right: 1px solid #ededed ;
}

#main .resume-item {
  position: relative ;
  padding: 0 60px ;
  margin-bottom: 60px ;
}
#main .resume-item .inner {
  padding-bottom: 30px ;
  border-bottom: 1px solid #ededed ;
}
#main .resume-item h2 {
  position: absolute ;
  top: -10px ;
  right: -240px ;
  z-index: 1 ;
  width: 240px ;
  height: 30px ;
  padding: 0 30px ;
  font-size: 24px ;
  text-align: left ;
  text-transform: capitalize ;
}
#main ul li {
  position: relative ;
  margin: 0 0 30px ;
}

/* logo vlevo od polozky (experience + vzdelani + o mne) */
.experience ul li,
.project ul li,
.about ul li {
  padding-left: 68px ;
  min-height: 48px ;
}
.experience ul li .item-logo,
.project ul li .item-logo,
.about ul li .item-logo {
  position: absolute ;
  top: 0 ;
  left: 0 ;
  z-index: 1 ;
  width: 48px ;
  height: 48px ;
  border-radius: 8px ;
  object-fit: contain ;
  background: #fff ;
  border: 1px solid #ededed ;
}
.experience ul li .item-logo--placeholder,
.project ul li .item-logo--placeholder,
.about ul li .item-logo--placeholder {
  display: flex ;
  align-items: center ;
  justify-content: center ;
  color: #9bb4d6 ;
  font-size: 22px ;
}

/* o mne */
.about h3 {
  font-size: 18px ;
  margin-bottom: 4px ;
}
.about .detail {
  font-size: 14px ;
  color: #333 ;
}

/* profil */
.summary .detail {
  font-size: 14px ;
  color: #333 ;
  line-height: 1.5 ;
}


/* experience */
.experience h3 {
  font-size: 18px ;
}
.experience .company {
  margin: 0 0 10px ;
  color: #959595 ;
  font-size: 13px ;
  font-weight: normal ;
}
.experience .date {
  position: absolute ;
  top: 5px ;
  right: 0 ;
  color: #bbb ;
  font-size: 12px ;
}
.experience .detail {
  font-size: 14px ;
}


/* project */
.project ul li {
  font-size: 0 ;
  line-height: 16px ;
}
.project h3 {
  position: relative ;
  display: inline ;
  color: #666 ;
  font-size: 16px ;
}
.project h3::after {
  content: ' - ' ;
}
.project .detail {
  display: inline ;
  font-size: 14px ;
}
.project .tags {
  font-size: 12px ;
  color: #999 ;
}


/* skill */
.skill {
  margin-bottom: 0!important ;
}
.skill ul li {
  height: 15px ;
}
.skill h3 {
  float: left ;
  width: 30% ;
  height: 100% ;
  font-size: 14px ;
  font-weight: normal ;
  line-height: 14px ;
}
.skill .skill-bar {
  float: left ;
  width: 70% ;
  height: 100% ;
  background: #f5f5f5 ;
}
.skill .skill-bar .bar {
  display: block ;
  width: 60% ;
  height: 100% ;
  background: #666 ;
}


/* footer */
footer {
  position: absolute ;
  bottom: -30px ;
  left: 0 ;
  width: 100% ;
  padding: 0 30px ;
  font-size: 12px ;
  text-align: left ;
  color: #bbb ;
}
footer a {
  font-weight: bold ;
}


/* ==========================================================================
   Responsive - tablet a mobilní zařízení
   ========================================================================== */
@media (max-width: 980px) {
  .resume-wrapper {
    width: auto ;
    max-width: 720px ;
    margin: 0 auto ;
    box-shadow: none ;
  }

  /* header */
  header {
    padding: 70px 20px 30px ;
    text-align: center ;
  }
  header .name-container,
  header .job-container {
    position: static ;
    left: auto ;
    right: auto ;
    bottom: auto ;
    height: auto ;
    padding: 0 ;
    line-height: normal ;
    text-align: center ;
  }
  header .name-container {
    font-size: 24px ;
    margin-top: 10px ;
  }
  header .job-container {
    font-size: 15px ;
    margin: 4px 0 0 ;
  }
  header .profile-picture {
    position: static ;
    right: auto ;
    bottom: auto ;
    width: 120px ;
    height: 120px ;
    margin: 0 auto ;
  }
  header .profile-picture img {
    width: 120px ;
    height: 120px ;
  }
  header .contact-container {
    top: auto ;
    left: auto ;
    margin-top: 20px ;
    display: inline-block ;
    text-align: left ;
  }

  /* main */
  #main > .resume-item-wrapper {
    width: 100% ;
    padding: 40px 0 ;
    border-right: none ;
  }
  #main .resume-item {
    padding: 0 20px ;
    margin-bottom: 40px ;
  }
  /* nadpisy sekcí ze sidebaru nad obsah */
  #main .resume-item h2 {
    position: static ;
    top: auto ;
    right: auto ;
    width: auto ;
    height: auto ;
    padding: 0 0 15px ;
    font-size: 22px ;
  }

  /* experience - datum pod nadpis, ne absolutně vpravo */
  .experience .date {
    position: static ;
    top: auto ;
    right: auto ;
    display: block ;
    margin: 4px 0 8px ;
  }

  /* footer */
  footer {
    position: static ;
    bottom: auto ;
    padding: 20px ;
    text-align: center ;
  }
}

@media (max-width: 480px) {
  header .name-container {
    font-size: 21px ;
  }
  #main .resume-item h2 {
    font-size: 20px ;
  }
  /* skill bary - popisek nad lištu, ať se nemačká */
  .skill ul li {
    height: auto ;
    overflow: hidden ;
  }
  .skill h3 {
    float: none ;
    width: 100% ;
    margin-bottom: 6px ;
  }
  .skill .skill-bar {
    float: none ;
    width: 100% ;
    height: 12px ;
  }
}


/* ==========================================================================
   Print - desktopovy vzhled na papire (A4)
   ========================================================================== */
@page {
  margin: 12mm ;
}
@media print {
  body {
    background: #fff ;
    color: #000 ;
    font-size: 11px ;
  }
  .no-print,
  .print-btn {
    display: none !important ;
  }
  .resume-wrapper {
    width: 100% ;
    max-width: 100% ;
    margin: 0 ;
    box-shadow: none ;
  }

  /* hlavicka - zachovat barevne pozadi */
  header {
    -webkit-print-color-adjust: exact ;
    print-color-adjust: exact ;
    padding: 25px 30px ;
    text-align: left ;
  }
  header .name-container {
    position: absolute ;
    left: 35% ;
    right: auto ;
    bottom: 10px ;
    height: 30px ;
    padding-left: 10px ;
    margin: 0 ;
    font-size: 22px ;
    line-height: 30px ;
    text-align: left ;
  }
  header .profile-picture {
    position: absolute ;
    right: 15% ;
    bottom: -50px ;
    width: 90px ;
    height: 90px ;
    margin: 0 ;
  }
  header .profile-picture img {
    width: 90px ;
    height: 90px ;
  }
  header .contact-container {
    position: relative ;
    top: 0 ;
    left: 30px ;
    margin-top: 0 ;
    display: block ;
    text-align: left ;
  }

  /* obnovit desktopovy vzhled sekci - nadpisy vpravo */
  #main > .resume-item-wrapper {
    width: 82% ;
    padding: 45px 0 20px ;
    border-right: 1px solid #ededed ;
  }
  #main .resume-item {
    padding: 0 40px ;
    margin-bottom: 22px ;
  }
  #main .resume-item .inner {
    padding-bottom: 16px ;
  }
  #main ul li {
    margin: 0 0 14px ;
  }
  #main .resume-item h2 {
    position: absolute ;
    top: -8px ;
    right: -22% ;
    width: 22% ;
    height: 30px ;
    padding: 0 16px ;
    font-size: 19px ;
    text-align: left ;
  }
  .experience h3,
  .about h3,
  .project h3 {
    font-size: 14px ;
  }
  .experience .company {
    margin-bottom: 5px ;
  }
  .summary .detail,
  .experience .detail,
  .about .detail,
  .project .detail {
    font-size: 11px ;
    line-height: 1.35 ;
  }

  /* datum zpet vpravo */
  .experience .date {
    position: absolute ;
    top: 5px ;
    right: 0 ;
    display: inline ;
    margin: 0 ;
  }

  /* nelamat jednotlive polozky pres stranky, sekce plynou za sebou */
  #main ul li {
    break-inside: avoid ;
    page-break-inside: avoid ;
  }

  /* patka */
  footer {
    position: static ;
    bottom: auto ;
    padding: 8px 40px ;
    text-align: left ;
    break-before: avoid ;
    page-break-before: avoid ;
    break-inside: avoid ;
    page-break-inside: avoid ;
  }

  a {
    color: #000 ;
  }
}