.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;
}

.viewport_footer {
  margin: 0;
  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;
}

.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 > * {
  background-color: var(--background-2);
  border-radius: var(--border-radius-leaf);
  padding: var(--spacing-small);
  height: min-content;
}
main.pane > * > header {
  text-align: center;
  padding: var(--spacing-small);
  width: max-content;
  margin: 0 auto;
}
main.pane > * > header > .title {
  background-color: var(--background-1);
  border-radius: var(--border-radius-leaf);
  padding: var(--spacing-small);
}
main.pane > * > header > .date {
  display: block;
  font-size: 0.85rem;
  font-weight: normal;
  font-style: italic;
  font-family: var(--font-family-generic);
}

main.pane > footer {
  grid-area: main;
  margin: var(--spacing-large) auto 0;
  width: min-content;
  font-size: 1.65vh;
  white-space: nowrap;
  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);
  font-size: 3.3vh;
  font-weight: bold;
  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 > .title {
  font-weight: bold;
  margin: 0 0 0.5rem;
}
.location > .page {
  margin: 0;
}

nav.pane .quick_links {
  --item-padding: 0.25rem;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}
nav.pane .quick_links > a,
nav.pane .quick_links > div {
  background-color: var(--background-2);
  transition: var(--transition-fade);
}
nav.pane .quick_links > a ion-icon,
nav.pane .quick_links > div ion-icon {
  width: var(--item-size);
}
nav.pane .quick_links > *: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,
  nav.pane .quick_links > div {
    background-color: var(--background-1);
  }
}
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);
    width: 100%;
    padding: 0 var(--spacing-small);
  }
  nav.pane .menu,
  nav.pane .quick_links,
  nav.pane .location {
    display: none;
  }
  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;
  padding: 0;
  width: min-content;
  height: min-content;
  display: grid;
  grid-auto-flow: row dense;
}
.pane.spacer .spacer_container {
  padding: var(--spacing-small);
  background-color: var(--background-2);
  border-radius: var(--border-radius-leaf);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.pane.spacer .spacer_container > .title {
  font-size: 2.5vh;
  font-family: var(--font-family-title);
  font-weight: bold;
  text-align: center;
}

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

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

@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;
  gap: var(--item-padding);
}
.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;
  font-size: var(--font-size-generic);
}
.quick_links > a > p,
.quick_links > div > p {
  margin: 0;
  color: var(--white-1);
}
.quick_links > a ion-icon,
.quick_links > div ion-icon {
  margin: auto;
  padding: 0;
}

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

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

@media (max-width: 600px) {
  .section_list > li > header {
    column-gap: var(--spacing-small);
  }
  .section_list > li > header ~ * {
    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;
  width: 100%;
  overflow-x: hidden;
  margin: 0;
}
body .kao-banner {
  grid-area: banner;
}

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

h1 {
  font-size: 3.3vh;
}

h2 {
  font-size: 2.5vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-title);
}

p,
a,
li {
  font-family: var(--font-family-generic);
}

ul {
  list-style-type: disc;
}

pre {
  max-width: inherit;
  max-height: 30em;
  overflow: scroll;
}

blockquote {
  margin: 1rem;
  padding-left: 1rem;
  border-radius: var(--border-radius-small);
  border-left: 3px solid var(--accent-green);
  background-color: var(--background-4);
}

code {
  background-color: var(--background-4);
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  border-radius: var(--border-radius-small);
}

@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,
  .viewport_footer {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
  }
}
@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";
  }
}

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