/* to do:
- font embedding
- field span padding left with icons
*/

@font-face {
  font-family: CantarellRegular;
  src: url(Cantarell-Regular.ttf);
}
@font-face {
  font-family: CantarellBold;
  src: url(Cantarell-Bold.ttf);
}
@font-face {
  font-family: CantarellOblique;
  src: url(Cantarell-Oblique.ttf);
}
@font-face {
  font-family: UbuntuRegular;
  src: url(Ubuntu-Regular.ttf);
}
@font-face {
  font-family: UbuntuBold;
  src: url(Ubuntu-B-hinting.ttf);
}
@font-face {
  font-family: UbuntuLight;
  src: url(Ubuntu-L-hinting.ttf);
}
@font-face {
  font-family: UbuntuItalic;
  src: url(Ubuntu-Italic.ttf);
}
@font-face {
  font-family: UbuntuLightItalic;
  src: url(Ubuntu-LightItalic.ttf);
}
@font-face {
  font-family: UbuntuMediumItalic;
  src: url(Ubuntu-MI-hinting.ttf);
}

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

body {
  min-width: 240mm;
  min-height: 300mm;
  width: auto;
  height: auto;
  background-color: hsl(0, 0%, 35%);
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#fixed {
  display: block;
  width: 10mm;
  height: 10mm;
  position: fixed;
  bottom: 8mm;
  right: 12mm;
  
  font-family: UbuntuBold;
  font-size: 8mm;
  
  text-align: center;
  line-height: 10mm;
  color: hsl(0, 0%, 45%);
  
  background-color: hsl(0, 0%, 25%);
  border-radius: 50%;
  cursor: default;
  
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#fixed:hover {
  color: hsl(0, 0%, 65%);
  
  background-color: hsl(0, 0%, 15%);
}

#help {
  visibility: hidden;
  display: block;
  width: 70mm;
  height: auto;
  min-height: 17mm;
  position: fixed;
  bottom: 5mm;
  right: 15mm;
  margin-right: 10mm;
  padding: 5mm;
  padding-bottom: 3.5mm;
  padding-top: 4mm;
  
  font-family: UbuntuLight;
  font-size: 3.5mm;
  
  text-align: justify;
  line-height: 120%;
  
  background-color: hsl(0, 0%, 15%);
  border-radius: 3mm;
}

#backplate {
  position: fixed;
  bottom: 5mm;
  right: 10mm;
  width: 17mm;
  height: 40mm;
  visibility: hidden;
  
  background: transparent;
}

#fixed:hover #backplate {
  visibility: visible;
}

#pdf {
  display: block;
  padding: 0mm;
  padding-top: 1.5mm;
  font-size: 4.5mm;
  font-family: UbuntuRegular;
  
  text-align: center;
  line-height: 100%;
  color: hsl(0, 0%, 80%);
}

#triangle {
  display: block;
  position: fixed;
  bottom: 10mm;
  right: 19mm;
  
  border-top: 3mm solid hsla(0, 0%, 15%, 0.01);
  border-bottom: 3mm solid hsla(0, 0%, 15%, 0.01);
  border-left: 2mm solid hsl(0, 0%, 15%);
  border-right: 4mm solid hsla(0, 0%, 15%, 0.01);
}

#fixed:hover #help {
  visibility: visible;
}

header {
  margin-top: 3mm;
  margin-bottom: 3mm;
}

.page {
  width: 210mm;
  height: 297mm;
  margin: 2mm;
  padding: 13mm;
  
  border-style: solid;
  border-width: 0.3mm;
  border-color: rgb(0, 0, 0);
  
  box-shadow: 1.5mm 1.5mm 2mm 0mm rgba(0, 0, 0, 0.5);
  
  background-color: hsl(0, 0%, 100%);
  
  font-family: UbuntuRegular;
}

.pageContent {
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: content-box;
  overflow: hidden;
}

h1 {
  font-size: 8.6mm;
  font-family: CantarellRegular;
  letter-spacing: 0mm;
}

header:hover h1 {
  color: hsla(0, 80%, 35%, 1);
}

_:-moz-tree-row(hover), h1 {
    letter-spacing: -0.5mm;
}

#image {
  width: 30mm;
  height: 30mm;
  
  display: inline-block;
  vertical-align: middle;
  margin: 2mm;
  margin-left: 0mm;
  
  background-image: radial-gradient(hsla(0, 0%, 100%, 0) 40%, white 72%), url('cv.jpg');
  background-size: 30mm 30mm, 30mm 30mm;
  background-position: 0mm 0mm, 0.5mm 0.5mm;
  background-clip: border-box;
  background-origin: border-box;
  
  border-radius: 50%;
  border: 1mm solid white;
  
  filter: grayscale(100%) contrast(150%) brightness(110%);
  
  cursor: pointer;
}

header:hover #image {
  background-image: url('cv.jpg');
  background-size: 30mm 30mm;
  background-position: 0.5mm 0.5mm;
  filter: grayscale(30%) contrast(130%) brightness(120%);
}

#general {
  width: auto;
  display: inline-block;
  vertical-align: middle;
  margin-left: -2mm;
  text-align: center;
}

#description {
  margin-top: -1.5mm;
  font-family: CantarellOblique;
  font-size: 4mm;
  color: hsla(0, 0%, 25%, 1);
}

.columnContent {
  flex-grow: 1;
  display: flex;
}

.left-column {
  flex: 1;
  padding-right: 3.5mm;
  display: inline-block;
  vertical-align: top;
}

.right-column {
  flex: 1;
  padding-left: 5mm;
  display: inline-block;
  vertical-align: top;
}

#rule {
  width: 0.4mm;
  box-sizing: content-box;
  
  padding: 0mm;
  
  align-items: stretch;
  
  display: inline-block;
  vertical-align: middle;
  background: linear-gradient(hsla(0, 0%, 100%, 0) 0%, hsla(0, 80%, 35%, 0.5) 20%, hsla(0, 80%, 35%, 0.5) 80%, hsla(0, 0%, 100%, 0) 100%);
  
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

section {
  box-sizing: border-box;
}

.part {
  margin-bottom: 10mm;
}

.part > * {
  line-height: 110%;
}

#info {
  margin-right: 2mm;
  font-family: UbuntuMediumItalic;
  font-size: 4mm;
  text-align: justify;
  
  color: hsla(0, 0%, 25%, 1);
}

.contact {
  font-family: UbuntuLightItalic;
  font-size: 3.5mm;
  padding: 1mm;
  
  color: hsla(0, 0%, 0%, 1);
}

.contain {
  display: flex;
}

.icon {
  width: 5mm;
  height: 5mm;
  position: relative;
  top: -0.5mm;
  margin: 0mm;
  margin-left: 5mm;
  margin-right: 1.5mm;
  padding: 0mm;
  display: inline-block;
  
  background-size: 5mm 5mm;
  background-repeat: no-repeat;
  
  filter: grayscale(100%);
}

.lnk {
  display: inline-block;
  margin: 0mm;
  padding: 0mm;
  width: auto;
}

#bdicon {
  background-image: url('icons-07.png');
}

#emicon {
  background-image: url('icons-06.png');
}

#telicon {
  background-image: url('icons-05.png');
}

#adricon {
  background-image: url('icons-04.png');
}

#fbicon {
  background-image: url('icons-01.png');
}

#liicon {
  background-image: url('icons-02.png');
}

#ghicon {
  background-image: url('icons-03.png');
}

#wsicon {
  background-image: url('icons-08.png');
}

#glicon {
  background-image: url('icons-09.png');
}

#soicon {
  background-image: url('icons-10.png');
}

a {
  text-decoration: none;
}

.contact a {
  margin: 0mm;
  padding: 0mm;
  color: inherit;
}

.contain:hover .icon {
  filter: none;
}

.part h2 {
  padding-top: 0mm;
  padding-bottom: 0mm;
  line-height: 110%;
  font-size: 5mm;
  font-family: CantarellRegular;
  letter-spacing: 0.25mm;
  
  color: hsla(0, 80%, 35%, 1);
}

.part:hover h2 {
  color: hsla(0, 80%, 50%, 1);
}

.part h3 {
  margin-top: 6mm;
  font-size: 3.3mm;
  font-family: UbuntuMediumItalic;
  font-weight: normal;
  letter-spacing: 0.25mm;
}

.part h3:first-of-type {
  margin-top: 3mm;
}

.part .skill h3 {
  margin-top: 2mm;
  margin-bottom: 0.5mm;
  line-height: initial;
}

.part:hover h3 {
  color: hsla(0, 80%, 50%, 1);
}

.part span, .part sup {
  padding: 0mm;
}

.sub {
  margin: 1.2mm;
  padding: 0mm;
  padding-left: 4mm;
  
  font-family: UbuntuRegular;
  font-size: 3.5mm;
}

.field {
  font-family: UbuntuLightItalic;
  font-size: 3.3mm;
  color: hsl(0, 0%, 25%);
}

.subtitle {
  padding: 0mm;
  line-height: 80%;
}

.bar {
  width: 100%;
  height: 2.5mm;
  padding: 0mm;
  border: 0.3mm solid #ff8888;
  background-color: #cccccc;
  background-clip: content-box;
}

.skill {
  padding: 0mm;
  overflow-wrap: anywhere;
}

.skill:hover .bar {
  background-color: red;
}

.bar[data-percent="100"] {
  padding-right: 0%;
}
.bar[data-percent="90"] {
  padding-right: 10%;
}
.bar[data-percent="80"] {
  padding-right: 20%;
}
.bar[data-percent="70"] {
  padding-right: 30%;
}
.bar[data-percent="60"] {
  padding-right: 40%;
}
.bar[data-percent="50"] {
  padding-right: 50%;
}
.bar[data-percent="40"] {
  padding-right: 60%;
}
.bar[data-percent="30"] {
  padding-right: 70%;
}
.bar[data-percent="20"] {
  padding-right: 80%;
}
.bar[data-percent="10"] {
  padding-right: 90%;
}
.bar[data-percent="0"] {
  padding-right: 100%;
}

#notes {
  font-size: 90%;
  font-family: UbuntuLightItalic;
}

#notes a, .field a {
  font-family: UbuntuMediumItalic;
}

#notes a:hover, .field a:hover, .contact a:hover {
  font-weight: bold;
}

@-moz-document url-prefix() {
  #notes a:hover, .field a:hover, .contact a:hover {
    letter-spacing: -0.07mm;
  }
}

::selection {
  background-color: hsla(0, 80%, 30%, 1);
  color: hsl(0, 0%, 100%);
}

.skills-grid {
  margin-top: 4mm;
  margin-bottom: 6mm;
  display: grid;
  width: 100%;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 4mm;
  align-items: end;
}

a:link, a:visited, a:hover, a:active {
  color: hsla(0, 80%, 50%, 1);
}

@media print {
  @page {
    size: A4;
    margin: 0mm;
  }
  #fixed {  
    display: none;
  }

  html, body {
    min-width: initial;
    width: 210mm;
    height: 297mm;
    background-color: rgb(255, 255, 255);
  }

  .page {
    margin: 0mm;
    width: 210mm;
    height: 297mm;
    box-shadow: none;
    border-color: transparent;
  }

  .contact a {
    color: hsla(0, 80%, 50%, 1);
    font-weight: bold;
  }

  .contain .icon {
    filter: none;
  }

  .part h2 {
    color: hsla(0, 80%, 50%, 1);
  }

  header h1 {
    color: hsla(0, 80%, 35%, 1);
  }

  header #image {
    background-image: url('cv.jpg');
    background-size: 30mm 30mm;
    background-position: 0.5mm 0.5mm;
    filter: grayscale(30%) contrast(130%) brightness(120%);
  }
}