:root {
  /* Color palette https://coolors.co/fcba04-a50104-590004-250001-f3f3f3 */
  --main-color-palette-turkey-red: #A50104;
  --main-color-palette-black-bean: #250001;
  --main-color-palette-whitesmoke: #F3F3F3;
  --main-background-color-dark-theme: #1A1A1A;

  --cv-color-duration-light-theme: oklch(18.97% 0 209.84 / 82.51%);
  --cv-color-duration-dark-theme: oklch(66% 0 59.29 / 54.3%);
  --cv-row-color-light-theme-odd: hsl(0, 0%, 100%);
  --cv-row-color-light-theme-even: var(--main-color-palette-whitesmoke);
  --cv-row-color-dark-theme-odd: var(--main-background-color-dark-theme);
  --cv-row-color-dark-theme-even: hsl(0, 0%, 8%);

  --videoplayer-button-bg-color: #333;
  --videoplayer-button-hover-bg-color: #007BFF;
  --videoplayer-border-color: var(--cv-color-duration-dark-theme);

  /* Font Sizes */
  --base-font-size: 1.8rem;
  --heading-1-font-size: 1.8rem;
  --heading-2-font-size: 1.6rem;
  --content-font-size: .8rem;

  /* Font Weights */
  --base-font-weight: 200;
  --heading-font-weight: 400;
  --subheading-font-weight: 300;

  /* Spacing */
  --body-padding: 3vh 10vw;
  --body-line-height: 1.25;
  --heading-margin: 1.2rem 0 .2rem 0;
  --paragraph-margin-bottom: .7rem;
  --small-text-margin-right: .125rem;

  /* Spacing CV */
  --width-full: 100%;
  --width-quarter: 25%;
  --width-three-quarters: 75%;
  --padding-small: .2rem;
  --font-weight-normal: 400;
}

html {
  font-size: var(--base-font-size);
  font-weight: var(--base-font-weight);
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  padding: var(--body-padding);
  line-height: var(--body-line-height);
}

a {
  position: relative;
  color: var(--main-color-palette-black-bean);
  display: inline-block;
  text-decoration: none;
}

a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: var(--main-color-palette-turkey-red);
  visibility: hidden;
  transform: scaleX(0);
  transition: all .3s ease-in-out;
}

a:hover:before {
  visibility: visible;
  transform: scaleX(1);
}

h1 {
  font-size: var(--heading-1-font-size);
  font-weight: var(--heading-font-weight);
  margin: var(--heading-margin);
}

h2 {
  font-size: var(--heading-2-font-size);
  font-weight: var(--subheading-font-weight);
  margin: var(--heading-margin);
}

p {
  margin-top: 0;
  margin-bottom: var(--paragraph-margin-bottom);
}

a:first-child, a + a {
  margin-right: var(--small-text-margin-right);
}

li:first-child, li + li {
  margin-right: var(--small-text-margin-right);
}

/* Classes */

.content {
  margin-bottom: 8vh;
  font-size: var(--content-font-size);
  max-width: 38rem;
}

.heading-addition {
  font-weight: var(--subheading-font-weight);
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: -.5rem;
}

.col {
  flex: 0 0 auto;
  flex-grow: 1;
  flex-basis: 12rem;
  padding-right: .5rem;
  padding-left: .5rem;
}

/* Media Queries */

@media print {
  body, table, tr, td, ul, li {
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
  }

  @page {
    margin: 2.5cm;
  }

  html {
    font-size: 12pt;
  }

  h1 {
    margin-top: 0;
  }

  body {
    margin: 0;
    padding: 0;
  }

  a {
    color: inherit;
  }

  .content {
    margin: 0;
  }
}

@media screen {
  a:hover {
    color: var(--main-color-palette-turkey-red);
  }
}

@media screen and (max-width: 767px) {
  body {
    padding: 1vh 5vw;
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--main-background-color-dark-theme);
    color: var(--main-color-palette-whitesmoke);
  }

  a {
    color: var(--main-color-palette-whitesmoke);
  }
}