.columns {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-evenly;
}
.columns > * {
  flex: 1;
}

.max-80 {
  max-width: 80vw;
  margin-left: auto;
  margin-right: auto;
}

.page-keys main {
  margin-bottom: 2rem;
}
.page-keys h2:has(+ p) {
  margin-bottom: 0;
}
.page-keys h2 + p {
  margin-top: 0.25rem;
}
.page-keys .key {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.page-keys .key input, .page-keys .key textarea {
  background-color: light-dark(oklch(85.75% 0.0145 268.48deg), #313244);
  border: none;
  padding: 1rem;
  width: 100%;
  line-height: 2em;
  line-break: anywhere;
  resize: none;
}
.page-keys .key input:focus-visible, .page-keys .key input:focus, .page-keys .key textarea:focus-visible, .page-keys .key textarea:focus {
  outline: none;
}
.page-keys .key button {
  background-color: light-dark(oklch(80.83% 0.0174 271.2deg), #45475a);
  border: 0;
  padding: 1rem;
  width: auto;
  cursor: pointer;
}
.page-keys .key button:hover, .page-keys .key button:active, .page-keys .key button:focus {
  background-color: light-dark(oklch(75.84% 0.0205 273.15deg), #585b70);
}
.page-keys .key button:hover img, .page-keys .key button:active img, .page-keys .key button:focus img {
  color: contrast-color(light-dark(oklch(75.84% 0.0205 273.15deg), #585b70));
}
.page-keys .key button img {
  height: 1.5em;
  color: contrast-color(light-dark(oklch(80.83% 0.0174 271.2deg), #45475a));
}

footer .image-block {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
footer .image-block img {
  height: 31px;
  image-rendering: pixelated;
}

.post main img {
  max-width: 100%;
}
.post {
  margin-bottom: 2rem;
}

@font-face {
  font-family: "Open Sans";
  src: local("Open Sans"), url("/static/fonts/OpenSans.woff2") format("woff2"), url("/static/fonts/OpenSans.ttf") format("TrueType");
}
@font-face {
  font-family: "Open Sans";
  font-style: italic;
  src: local("Open Sans Italic"), url("/static/fonts/OpenSansItalic.woff2") format("woff2"), url("/static/fonts/OpenSansItalic.ttf") format("TrueType");
}
@font-face {
  font-family: "Maple";
    src: local("MapleMono"), url("/static/fonts/MapleMono[wght].woff2") format("woff2"), url("/static/fonts/MapleMono[wght].ttf") format("TrueType");
}
@font-face {
  font-family: "Maple";
  font-style: italic;
    src: local("MapleMono Italic"), url("/static/fonts/OpenSansItalic.woff2") format("woff2"), url("/static/fonts/MapleMono-Italic[wght].ttf") format("TrueType");
}
:root {
  color-scheme: light dark;
}

body {
  font-family: "Maple", "Open Sans", apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background-color: light-dark(oklch(95.78% 0.0058 264.53deg), #1e1e2e);
  color: light-dark(oklch(43.55% 0.043 279.33deg), #cdd6f4);
  margin: 0;
}

strong {
  color: oklch(from light-dark(light-dark(oklch(55.47% 0.2503 297.02deg), #cba6f7), light-dark(oklch(60.23% 0.0981 201.1deg), #94e2d5)) calc(l * 1.09) c calc(h + 2));
}

a {
  color: light-dark(light-dark(oklch(55.47% 0.2503 297.02deg), #cba6f7), light-dark(oklch(60.23% 0.0981 201.1deg), #94e2d5));
  text-decoration-style: dotted;
}
a:hover, a:active, a:focus {
  color: oklch(from light-dark(light-dark(oklch(55.47% 0.2503 297.02deg), #cba6f7), light-dark(oklch(60.23% 0.0981 201.1deg), #94e2d5)) calc(l * 1.09) c calc(h + 2));
  text-decoration-style: solid;
}

header#home-header {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, 1fr);
  max-width: 80vw;
  margin-left: auto;
  margin-right: auto;
}
@media (width <= 768px) {
  header#home-header {
    grid-template-columns: 1fr;
  }
}
header#home-header img#front-image {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
}
header#home-header #neomoji img {
  height: 1.5em;
}
header#home-header h1 {
  text-align: center;
}

#on-the-internet .columns ul {
  list-style: none;
}
#on-the-internet .columns img, #on-the-internet .columns svg {
  height: 1em;
  width: 1em;
  fill: light-dark(oklch(43.55% 0.043 279.33deg), #cdd6f4);
}
@media (width <= 768px) {
  #on-the-internet .columns {
    flex-direction: column;
    gap: 0;
  }
}

#main-projects > div {
  display: flex;
  gap: 1rem;
}
@media (width <= 768px) {
  #main-projects > div {
    flex-direction: column;
    align-items: center;
  }
}
#main-projects > div img {
  height: 10rem;
}
#main-projects {
  margin-bottom: 2rem;
}

.page-regio43 .video-zone {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
}
.page-regio43 .video-zone #video-player {
  aspect-ratio: 16/9;
  max-width: 80%;
  max-height: 50vh;
  width: 100%;
}
.page-regio43 h1 {
  padding: 0 1rem;
  text-align: center;
}
.page-regio43 main {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  grid-template-columns: repeat(4, 1fr);
}
.page-regio43 main > div img {
  width: 100%;
}
.page-regio43 main > div p {
  margin: 0.5em;
}
.page-regio43 main > div p a {
  text-decoration: none;
  color: black;
}
@media screen and (max-width: 992px) {
  .page-regio43 main {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 768px) {
  .page-regio43 main {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 576px) {
  .page-regio43 main {
    grid-template-columns: 1fr;
  }
}

nav {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin: 2rem;
}
@media (width <= 768px) {
  nav {
    flex-direction: column;
    gap: 1rem;
  }
}
nav img {
  height: 3rem;
}
nav ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0;
  margin: 0;
}
nav ul a {
  color: light-dark(light-dark(oklch(55.47% 0.2503 297.02deg), #cba6f7), light-dark(oklch(60.23% 0.0981 201.1deg), #94e2d5));
  text-decoration: none;
}
nav ul a:not(:has(img)):hover, nav ul a:not(:has(img)):active, nav ul a:not(:has(img)):focus {
  text-decoration: underline;
}
nav ul:nth-child(1) img {
  border-radius: 3rem;
  overflow: hidden;
}
nav ul:nth-child(1) a {
  font-weight: bold;
  text-decoration: none;
  font-size: 1.3rem;
}
@media (width <= 768px) {
  nav ul:nth-child(2) {
    flex-wrap: wrap;
  }
}

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