:root {
  --bg: #ffffff;
  --fg: #111111;
  --muted: #777777;
  --line: #e3e3e3;
}

:root.dark {
  --bg: #111111;
  --fg: #f4f4f4;
  --muted: #a8a8a8;
  --line: #333333;
}

:root.red {
  --bg: #fff5f2;
  --fg: #6f160f;
  --muted: #a15d55;
  --line: #e8c4bf;
}

:root.blue {
  --bg: #f2f7ff;
  --fg: #102f70;
  --muted: #6077a8;
  --line: #c6d5ef;
}

:root.blue-primary {
  --fg: rgb(239, 245, 255);
  --bg: rgb(0, 68, 255);
  --muted: rgb(239, 245, 255);
  --line: rgb(239, 245, 255);
}

:root.purple {
  --bg: #fbf4ff;
  --fg: #4f176f;
  --muted: #84609a;
  --line: #dec8eb;
}

:root.green {
  --bg: #f4fff8;
  --fg: #145233;
  --muted: #5f8b72;
  --line: #c5e3d1;
}

:root.orange {
  --bg: #fff8ec;
  --fg: #6d3500;
  --muted: #9a7042;
  --line: #ead2ae;
}

:root.pink {
  --bg: #fff3fa;
  --fg: #74154f;
  --muted: #9d5e82;
  --line: #ecc7dc;
}

:root.cyan {
  --bg: #effdff;
  --fg: #07535f;
  --muted: #5b9098;
  --line: #bfe3e8;
}

:root.yellow {
  --bg: #fffce8;
  --fg: #5a4700;
  --muted: #8a7a3e;
  --line: #e6dca4;
}

:root.gray {
  --bg: #f5f5f5;
  --fg: #262626;
  --muted: #737373;
  --line: #d4d4d4;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding-bottom: 72px;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.cv-card {
  width: min(100% - 32px, 560px);
  margin: 48px auto;
}

header {
  margin-bottom: 40px;
}

.site,
h1,
.role {
  margin: 0;
}

.site {
  color: var(--muted);
  margin-bottom: 28px;
}

h1 {
  font-size: 18px;
  font-weight: 400;
}

.description {
  margin-top: 28px;
  max-width: 48ch;
}

h2 {
  margin: 32px 0 8px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 400;
}

h3 {
  margin: 20px 0 8px;
  font-size: 16px;
  font-weight: 400;
}

article {
  margin-bottom: 28px;
}

a {
  color: inherit;
}

.role {
  color: var(--muted);
}

.row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) max-content;
  gap: 16px;
  align-items: baseline;
  width: 100%;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
}

header .row {
  border: 0;
  padding: 0;
}

.row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.controls {
  position: fixed;
  left: 16px;
  bottom: 16px;
  display: flex;
  gap: 8px;
}

.theme-button,
.language-button {
  padding: 6px 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.row span:nth-child(2) {
  color: var(--muted);
  text-align: right;
}

.row span:last-child {
  color: var(--muted);
  text-align: right;
}

.education-row {
  grid-template-columns: minmax(130px, 0.9fr) minmax(0, 1fr) max-content;
}

.education-row span:nth-child(2) {
  text-align: left;
}

a.row:hover,
.theme-button:hover,
.language-button:hover {
  background: var(--fg);
  color: var(--bg);
}

a.row:hover span {
  color: var(--bg);
}

ul {
  margin: 0 0 18px;
  padding-left: 20px;
}

p {
  margin: 0 0 12px;
}

@media (max-width: 560px) {
  .cv-card {
    margin-top: 28px;
  }

  .row {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 8px;
  }

  .education-row {
    grid-template-columns: 1fr;
  }

  .row span:nth-child(2) {
    grid-column: 1 / 2;
    grid-row: 2;
    text-align: left;
  }

  .education-row span:last-child {
    grid-column: 1;
    grid-row: auto;
    text-align: left;
  }
}