.red {
  color: var(--accent-red);
}

.orange {
  color: var(--accent-orange);
}

.yellow {
  color: var(--accent-yellow);
}

.green {
  color: var(--accent-green);
}

.cyan {
  color: var(--accent-cyan);
}

.blue {
  color: var(--accent-blue);
}

.indigo {
  color: var(--accent-indigo);
}

.purple {
  color: var(--accent-purple);
}

.magenta {
  color: var(--accent-magenta);
}

.pink {
  color: var(--accent-pink);
}

.white {
  color: var(--white-0);
}

.docker {
  /*
  Docker is protective of their colours.
  https://www.docker.com/company/newsroom/media-resources/
  */
  color: #1d63ed;
}

body > footer {
  padding: var(--spacing-small);
  width: min-content;
  background-color: var(--background-2);
  border-radius: 0 var(--border-radius-large) 0 0;
  font-size: 1.65vh;
  white-space: nowrap;
  position: fixed;
  bottom: 0;
}
body > footer > p {
  margin: 0;
}

.layout_row {
  display: grid;
  grid-auto-flow: column;
  gap: var(--spacing-small);
}
.layout_row > .item {
  padding: calc(var(--spacing-small) * 2);
  background-color: var(--background-1);
  border-radius: var(--border-radius-leaf);
}
.layout_row > .item .title {
  text-align: center;
}

.layout_row + .layout_row {
  margin-top: var(--spacing-small);
}

@media (max-width: 600px) {
  .layout_row {
    grid-auto-flow: row;
  }
}
main.pane {
  grid-area: main;
}
main.pane > .body,
main.pane > footer {
  background-color: var(--background-2);
  border-radius: var(--border-radius-leaf);
}
main.pane > .body {
  padding: var(--spacing-small);
}
main.pane > .body > header {
  text-align: center;
  padding: var(--spacing-small);
  width: max-content;
  margin: 0 auto;
}
main.pane > .body > header .title {
  background-color: var(--background-1);
  border-radius: var(--border-radius-leaf);
  padding: var(--spacing-small);
}
main.pane > .body > header .date {
  display: block;
  font-size: 0.85rem;
  font-weight: normal;
  font-style: italic;
  font-family: var(--font-family-generic);
}
main.pane > .body > .body {
  text-align: start;
}
main.pane > footer {
  margin: var(--spacing-large) auto 0;
  width: min-content;
  font-size: 1.65vh;
  white-space: nowrap;
  padding: var(--spacing-small);
  text-align: center;
}
main.pane > footer > p {
  margin: 0;
}

nav.pane > .nav_header {
  display: grid;
  grid-template-columns: none;
  grid-template-areas: "logo";
}
nav.pane > .nav_header ion-icon {
  grid-area: hamburger;
  display: none;
  align-self: center;
  justify-self: center;
  width: 2rem;
  height: 2rem;
}

@media (max-width: 600px) {
  nav.pane > .nav_header {
    grid-template-columns: min-content 1fr min-content;
    grid-template-areas: "logo blank hamburger";
  }
  nav.pane > .nav_header ion-icon {
    display: block;
  }
}
nav .logo {
  grid-area: logo;
  font-family: var(--font-family-generic);
  text-align: center;
  margin: var(--spacing-small) 0;
}

.dropdown > label.item {
  display: grid;
  grid-template-columns: 1fr min-content;
  align-items: center;
}
.dropdown > label.item > ion-icon {
  align-self: center;
  transition-duration: 0.25s;
}
.dropdown > ul {
  display: none;
  border-bottom-left-radius: var(--border-radius-small);
  border-bottom-right-radius: var(--border-radius-small);
  background-color: var(--background-1);
  padding: 0 var(--spacing-small);
  list-style: none;
}

@media (max-width: 600px) {
  .dropdown > label.item > ion-icon {
    margin-right: var(--padding-mobile);
  }
}
@media (max-width: 1023px) {
  .dropdown > input:checked + label {
    color: var(--highlight-hover);
  }
  .dropdown > input:checked + label + ul {
    display: grid;
  }
}
@media (min-width: 1024px) {
  .dropdown:hover > label.item {
    transform: var(--transform-scale-x);
  }
  .dropdown:hover > label.item > ion-icon {
    rotate: 90deg;
    transition-duration: 0.25s;
  }
  .dropdown:hover > ul {
    display: grid;
  }
}
.menu .title {
  color: inherit;
  text-decoration: inherit;
  font-family: var(--font-family-generic);
  font-weight: bold;
  white-space: nowrap;
  margin: inherit;
  transition: var(--transition-fade);
  display: block;
}

@media (max-width: 600px) {
  .nav_title {
    padding: var(--padding-mobile);
  }
}
@media (min-width: 1024px) {
  .menu .title:hover {
    color: var(--highlight-hover);
    transition: var(--transition-cut);
  }
}
nav .menu {
  padding: 0;
  list-style: none;
  display: grid;
  grid-auto-flow: row;
  gap: var(--spacing-medium);
  align-self: center;
  margin: 0;
}
nav .menu hr {
  border-color: var(--accent-pink);
  margin: 0 var(--spacing-small);
}

.menu .item {
  color: inherit;
  text-decoration: none;
  padding: 0 var(--spacing-small);
  background-color: var(--background-2);
  border-radius: var(--border-radius-small);
  transition: var(--transition-fade);
}
.menu .item:hover,
.menu .dropdown:hover .item {
  transform: var(--transform-scale-x);
  transition: var(--transition-cut);
}
.menu .item:hover .title,
.menu .item:hover ion-icon,
.menu .dropdown:hover .item .title,
.menu .dropdown:hover .item ion-icon {
  color: var(--highlight-hover);
  transition: var(--transition-cut);
}

@media (max-width: 600px) {
  .menu .item {
    padding: var(--padding-mobile);
    background-color: var(--background-1);
  }
  .menu .item:hover,
  .menu .dropdown:hover .item {
    transform: none;
  }
}
.location {
  margin: 0;
  padding: var(--spacing-small);
  background-color: var(--background-2);
  border-radius: var(--border-radius-leaf);
  text-align: center;
}
.location > header h4 {
  font-weight: bold;
  margin: 0 0 0.5rem;
}
.location .page {
  margin: 0;
}

nav.pane .quick_links {
  --item-padding: 0.25rem;
  justify-content: space-between;
}
nav.pane .quick_links a {
  background-color: var(--background-2);
  transition: var(--transition-fade);
}
nav.pane .quick_links a ion-icon {
  width: var(--item-size);
}
nav.pane .quick_links a:hover {
  transition: var(--transition-cut);
  transform: var(--transform-scale-x) var(--transform-scale-y);
}
nav.pane .quick_links .phantom {
  width: calc(var(--item-size) + var(--item-padding) * 2);
  background-color: inherit;
}

@media (max-width: 600px) {
  nav.pane .quick_links {
    margin-bottom: var(--spacing-small);
    --item-padding: var(--padding-mobile);
  }
  nav.pane .quick_links > a {
    background-color: var(--background-1);
  }
  nav.pane .quick_links > .phantom {
    background-color: inherit;
  }
}
nav.pane {
  grid-area: nav;
  --padding-mobile: 0.35rem;
  height: min-content;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: var(--spacing-large);
  left: var(--spacing-large);
  color: var(--accent-pink);
}
nav.pane input[type=checkbox] {
  display: none;
}

@media (max-width: 600px) {
  nav.pane {
    background-color: var(--background-2);
    border-radius: var(--border-radius-leaf);
    padding: 0 var(--spacing-small);
  }
  nav.pane .menu,
  nav.pane .quick_links,
  nav.pane .location {
    display: none;
  }
  nav.pane > * {
    width: 100%;
  }
  nav.pane > input:checked + label {
    color: var(--highlight-hover);
  }
  nav.pane > input:checked + label + .menu {
    display: grid;
  }
  nav.pane > input:checked + label + .menu + .location + .quick_links {
    display: flex;
  }
}
.pane.spacer {
  grid-area: spacer;
  width: min-content;
  height: calc(100vh - var(--spacing-large) * 2);
  display: grid;
  grid-auto-flow: row dense;
}
.pane.spacer .spacer_container {
  padding: var(--spacing-small);
  background-color: var(--background-2);
  height: 100%;
  border-radius: var(--border-radius-leaf);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.pane.spacer .spacer_container p {
  margin: 0;
  text-align: center;
}

.spacer_container.blog_recent_posts {
  justify-content: start !important;
}

.pane {
  margin: var(--spacing-large);
}

@media (max-width: 600px) {
  .pane {
    width: calc((50% - var(--spacing-small)) * 2);
  }
}
@media (min-width: 601px) {
  nav.pane,
  .pane.spacer {
    gap: var(--spacing-medium);
    position: sticky;
    top: var(--spacing-large);
  }
}
.quick_links {
  --item-padding: 0.35rem;
  --item-size: calc(1rem + var(--item-padding));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.quick_links > a,
.quick_links > div {
  display: grid;
  background-color: var(--background-3);
  border-radius: var(--border-radius-leaf);
  padding: var(--item-padding);
  gap: var(--item-padding);
  align-items: center;
  justify-content: center;
  grid-auto-flow: column;
  text-decoration: none;
  color: var(--white-1);
}
.quick_links > a > *,
.quick_links > div > * {
  margin: 0;
  padding: 0;
  font-size: var(--font-size-generic);
}

.section_list {
  display: grid;
  width: 100%;
}
.section_list > section + section {
  margin-top: var(--spacing-small);
}
.section_list > section {
  width: inherit;
}
.section_list > section > header {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 1fr min-content;
  column-gap: calc(var(--spacing-small) * 2);
  background-color: var(--background-3);
  border-radius: var(--border-radius-leaf);
  padding: var(--spacing-small);
  text-align: start;
  width: inherit;
}
.section_list > section > header .name,
.section_list > section > header .subtitle,
.section_list > section > header .status {
  margin: inherit;
}
.section_list > section > header .subtitle {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: normal;
  font-style: italic;
  font-family: var(--font-family-generic);
}
.section_list > section > header .status {
  align-self: center;
  white-space: nowrap;
  text-decoration: none;
  font-size: 1.17rem;
  font-weight: bold;
}
.section_list > section > .body {
  padding: 0 calc(var(--spacing-small) * 2);
}
.section_list > section > .body ul {
  font-family: var(--font-family-generic);
}
.section_list > section > .body ul li + li {
  margin-top: 0.5em;
}

.spacer_container {
  justify-content: start;
}
.spacer_container .section_list > section > header {
  background-color: var(--background-1);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .section_list section > header {
    column-gap: var(--spacing-small);
  }
  .section_list section > .body {
    padding: 0;
  }
}
:root {
  --accent-red: #cb4c4cff;
  --accent-orange: #e18142ff;
  --accent-yellow: #e4d281ff;
  --accent-green: #c5e689ff;
  --accent-cyan: #a7edefff;
  --accent-blue: #5f62e2ff;
  --accent-indigo: #874ac0ff;
  --accent-purple: #a355d3ff;
  --accent-magenta: #df67dfff;
  --accent-pink: #ff9f9fff;
  --background-0: #130b21ff;
  --background-1: #170d28ff;
  --background-2: #231833ff;
  --background-3: #211635ff;
  --background-4: #2a223eff;
  --block-0: #0d0d0dff;
  --block-1: #1a1a1aff;
  --block-2: #272727ff;
  --highlight-hover: #944db6ff;
  --white-0: #bfbfbfff;
  --white-1: #d9d9d9ff;
  --white-2: #e5e5e5ff;
  --white-3: #f5f5f5ff;
  --font-size-generic: 1.85vh;
  --font-family-generic: "Liberation Sans", Arial, Sans-Serif;
  --font-family-title: "Liberation Serif", Arial, Sans-Serif;
  --border-radius-small: calc(var(--border-radius-large) / 2);
  --border-radius-large: 1rem;
  --border-radius-leaf: var(--border-radius-small) var(--border-radius-large);
  --spacing-small: 0.75rem;
  --spacing-medium: 1rem;
  --spacing-large: 1.5rem;
  --spacing-thicc: calc(var(--spacing-large) * 4);
  --transition-fade: 0.4s ease-out;
  --transition-cut: none;
  --transform-scale-x: scaleX(1.15);
  --transform-scale-y: scaleY(1.15);
  font-size: var(--font-size-generic);
  color: var(--white-1);
}

body {
  display: grid;
  background-color: var(--background-0);
  grid-template-rows: min-content auto;
  margin: 0;
}
body .kao-banner {
  grid-area: banner;
}

* {
  color-scheme: dark;
  box-sizing: border-box;
  /* outline: 1px solid red; */
}

h1 {
  font-size: 3.3vh;
  font-family: var(--font-family-title);
}

h2 {
  font-size: 2.5vh;
  font-family: var(--font-family-title);
}

h3,
h4,
h5,
h6,
p,
a {
  font-family: var(--font-family-generic);
}

@media (max-width: 600px) {
  :root {
    --spacing-large: var(--spacing-small);
  }
  body {
    grid-template-columns: none;
    grid-template-areas: "banner" "nav" "main" "spacer";
    justify-items: center;
  }
  .pane.spacer,
  .footer {
    position: static;
    top: auto;
    left: auto;
    right: auto;
  }
}
@media (min-width: 601px) and (max-width: 1023px) {
  body {
    grid-template-columns: min-content 1fr;
    grid-template-areas: "banner banner" "nav main" "spacer main";
  }
}
@media (min-width: 1024px) {
  body {
    grid-template-columns: min-content 1fr min-content;
    grid-template-areas: "banner banner banner" "nav main spacer";
  }
}
.r90 {
  rotate: 90deg;
}

.pane_details {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.pane_details .spacer_container {
  height: min-content !important;
  width: 100%;
  padding-top: 0 !important;
}

.about_me {
  padding: 0 var(--spacing-thicc) var(--spacing-small);
}

.early_history {
  justify-self: center;
}

.prog_languages *,
.software * {
  margin: 0.5rem;
}

.software_row {
  grid-template-columns: 60% auto;
}

@media (max-width: 600px) {
  .awards,
  .certifications,
  .education,
  .prog_languages,
  .software,
  .work_history {
    width: 100%;
  }
}

/*# sourceMappingURL=style.css.map */