/* CV-specific styles */
:root {
  --bg-body: #fff;
  --fg-body: #333;
  --fg-primary: #20b200;
  --fg-secondary: #ff19c8;
  --font-base: 100%;
  --font-base-large: 150%;
  --font-title: 3.47em;
  --font-copy: 0.875em;
  --font-small: 0.75em;
}

/* Fonts */
@font-face {
  font-display: swap;
  font-family: 'Patua One';
  font-style: normal;
  font-weight: 400;
  src: local('Patua One'), local('PatuaOne-Regular'),
    url('/fonts/patua-one-v6-latin-regular.woff2') format('woff2'),
    url('/fonts/patua-one-v6-latin-regular.woff') format('woff'),
    url('/fonts/patua-one-v6-latin-regular.ttf') format('truetype');
}

@font-face {
  font-display: swap;
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
    url('/fonts/roboto-v16-latin-regular.woff2') format('woff2'),
    url('/fonts/roboto-v16-latin-regular.woff') format('woff'),
    url('/fonts/roboto-v16-latin-regular.ttf') format('truetype');
}

@font-face {
  font-display: swap;
  font-family: Roboto;
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'),
    url('/fonts/roboto-v16-latin-700.woff2') format('woff2'),
    url('/fonts/roboto-v16-latin-700.woff') format('woff'),
    url('/fonts/roboto-v16-latin-700.ttf') format('truetype');
}

/* Reset */
html {
  font-size: 100.01%;
}

html, body {
  height: 100%;
}

html, body, header, footer, section, article, h1, h2, h3, h4,
p, div, span, code, a, picture, img, ol, ul, li, dl, dt, dd,
abbr, time {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

body {
  padding: 0 1em;
  background-color: var(--bg-body);
  color: var(--fg-body);
  font-family: roboto, tahoma, verdana, freesans, clean, sans-serif;
  font-size: var(--font-base);
}

footer, section {
  display: block;
}

h1 {
  margin-top: 0.4em;
  margin-bottom: -0.2em;
  font-family: 'Patua One', serif;
  font-size: var(--font-title);
  font-weight: bold;
  font-kerning: none;
  letter-spacing: 0.02em;
  color: var(--fg-primary);
}

h2 {
  font-family: 'Patua One', serif;
  margin-top: 2em;
  margin-bottom: 0.2em;
  font-size: var(--font-copy);
  font-weight: normal;
}

h3 {
  font-size: var(--font-copy);
  font-weight: bold;
  line-height: 1.4;
}

p, dt, dd, br {
  font-size: var(--font-copy);
  font-style: normal;
  line-height: 1.4;
  word-spacing: 0.1em;
}

p, dd {
  font-weight: normal;
}

dl, p {
  margin-bottom: 1em;
}

dt {
  margin-right: 0.3em;
  float: left;
  clear: left;
  font-weight: bold;
}

li {
  list-style: none;
}

a {
  color: var(--fg-primary);
  text-decoration: none;
  cursor: pointer;

  &:hover, &:active {
    color: var(--fg-secondary);
  }
}

code {
  font-family: consolas, monaco, "lucida console", monospace, serif;
  font-size: 0.8em;
}

/* Utility classes */
.clearfix {
  zoom: 1;

  &:before, &:after {
    content: '.';
    display: block;
    height: 0;
    overflow: hidden;
  }

  &:after {
    clear: both;
  }
}

.visually-hidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.break-below {
  margin-bottom: 1em;
}

.no-break-below {
  margin-bottom: 0;
}

.smallprint {
  margin-top: 3em;
  font-size: var(--font-small);
}

/* Responsive */
@media (min-width: 480px) {
  body {
    padding-left: 4em;
    padding-right: 4em;
  }

  p, h3, dl {
    margin-left: 2em;
  }

  .undo-indent {
    margin-left: -2em;
  }
}

@media (min-width: 540px) {
  body {
    padding-left: 2em;
    padding-right: 2em;
  }
}

@media (min-width: 640px) {
  body {
    padding-left: 4em;
    padding-right: 4em;
  }
}

@media (min-width: 800px) {
  body {
    padding-left: 8em;
    padding-right: 8em;
  }
}

@media (min-width: 1024px) {
  body {
    font-size: var(--font-base-large);
    padding-left: 4em;
    padding-right: 4em;
  }
}

@media (min-width: 1200px) {
  body {
    padding-left: 8em;
    padding-right: 8em;
  }
}

@media print {
  body {
    padding: 0;
    margin-top: -2em;
  }

  h2 {
    margin-top: 0;
  }

  .smallprint {
    display: none;
  }
}