/* poppins-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/poppins-v23-latin_latin-ext-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/poppins-v23-latin_latin-ext-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/poppins-v23-latin_latin-ext-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/poppins-v23-latin_latin-ext-700italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-900 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/poppins-v23-latin_latin-ext-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-900italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: italic;
  font-weight: 900;
  src: url("../fonts/poppins-v23-latin_latin-ext-900italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-regular - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/inter-v18-latin_latin-ext-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/inter-v18-latin_latin-ext-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/inter-v18-latin_latin-ext-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-700italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/inter-v18-latin_latin-ext-700italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-900 - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/inter-v18-latin_latin-ext-900.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-900italic - latin_latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter";
  font-style: italic;
  font-weight: 900;
  src: url("../fonts/inter-v18-latin_latin-ext-900italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
  font-family: "Hack";
  src: url("../fonts/hack-regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Hack";
  src: url("../fonts/hack-italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Hack";
  src: url("../fonts/hack-bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Hack";
  src: url("../fonts/hack-bold-italic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
}
/*
Themes
*/
:root,
[data-selected-theme=grayscalelight] {
  --color-bg: #fff;
  --color-bg-2: #f8f8f8;
  --color-ui: #ddd;
  --color-ui-2: #888;
  --color-ui-3: #555;
  --color-tx: #111;
  --color-link: #36c;
  --color-hover: rgb(25.5, 51, 102);
  --color-active: rgb(153, 178.5, 229.5);
  --font-sans: Inter, sans-serif;
  --font-disp: Poppins, sans-serif;
  --font-mono: Hack, monospace;
  --border-radius: 15px;
}

/*
[data-selected-theme="light"] {
  --color-background: #aabf7e; //aabf7e
  --text-normal: #191b19; //191b19
  --text-invert: #fff;
  --text-subtle: #595959; //595959
  --color-primary: #344f1f; //344f1f
  --color-secondary: #60941a; //60941a
  --color-link: #309bae; //309bae
  --color-paper: #e8efd7; //e8efd7
}
*/
/*
Themed elements
*/
body {
  font-family: var(--font-sans);
  background: var(--color-bg);
}

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

pre,
code,
.monospace {
  font-family: var(--font-mono);
  font-size: 95%;
}

a {
  color: var(--color-link);
  text-decoration: dotted underline;
}
a:hover {
  color: var(--color-hover);
  text-decoration: solid underline;
}
a:active {
  color: var(--color-active);
}

h1 {
  color: var(--color-tx);
}

h2,
h3,
h4,
h5,
h6 {
  color: var(--color-tx);
}

hr {
  border: none;
  border-top: solid 1px var(--color-ui-2);
  margin-top: 15px;
}

.site {
  color: var(--color-tx);
}

.idcard {
  margin: auto;
  background: rgb(252.7769230769, 248.3307692308, 242.7730769231);
  background: linear-gradient(120deg, #594 5%, #39a 19%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0) 20%, #39a 20%, #39a 21%, rgba(0, 0, 0, 0) 21%, rgba(0, 0, 0, 0) 86%, #39a 86%, #39a 87%, rgba(0, 0, 0, 0) 87%, rgba(0, 0, 0, 0) 88%, #39a 88%, #594 99%);
  border: solid var(--color-bg-2) 2px;
  border-radius: var(--border-radius);
}
.idcard__header {
  padding: 15px;
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background: rgb(252.7769230769, 248.3307692308, 242.7730769231);
  background: linear-gradient(120deg, #594 5%, #39a 37%);
  text-transform: uppercase;
  font-weight: bold;
}
.idcard__header h3 {
  margin-top: 0px;
  text-align: center;
  color: rgb(252.7769230769, 248.3307692308, 242.7730769231);
}
.idcard__picture {
  max-width: 200px;
  margin: auto;
  margin-top: 20px;
}
.idcard__bio {
  padding: 15px;
  width: max-content;
}
.idcard__bio p {
  margin-top: 5px;
}
.idcard__label {
  font-weight: bold;
  font-size: 85%;
  color: #36c;
}

.box {
  border-radius: var(--border-radius);
  border: dashed 1px var(--color-ui);
  background-color: var(--color-bg-2);
}

.pad {
  padding: 15px;
  padding-top: 0;
}

.gap {
  gap: 15px;
}

code,
pre {
  border: solid var(--color-ui-2) 1px;
  border-radius: 3px;
  background-color: var(--color-ui);
  padding: 0 2px;
}

.category {
  border-radius: 15px;
  background-color: var(--color-link);
  color: var(--color-bg);
  padding: 0 5px;
}

.page--about {
  display: flex;
  flex-direction: column;
}
@media only screen and (min-width: 600px) {
  .page--about {
    display: grid;
    grid: "main idcard" auto "main funfacts" auto "main interests" auto "social social" auto/auto auto;
  }
}
@media only screen and (min-width: 768px) {
  .page--about {
    grid: "main main idcard" auto "main main ." auto "interests funfacts funfacts" auto ". social ." auto/auto auto auto;
  }
}
.page--about .main-content {
  grid-area: main;
}
.page--about .social {
  grid-area: social;
}
.page--about .interests {
  grid-area: interests;
}
.page--about .funfacts {
  grid-area: funfacts;
}

.idcard {
  display: flex;
  flex-direction: column;
  grid-area: idcard;
}

.page--home {
  display: grid;
}
@media only screen and (min-width: 600px) {
  .page--home {
    grid: "main ." auto "main social" auto ". social" auto "badges updates" auto ". updates" auto/1fr auto;
  }
  .page--home .home__main {
    grid-area: main;
  }
  .page--home .home__social {
    grid-area: social;
  }
  .page--home .home__updates {
    grid-area: updates;
  }
  .page--home .home__badges {
    grid-area: badges;
  }
}

#skip-navigation {
  position: fixed;
  top: -100%;
  right: 0;
}
#skip-navigation:focus {
  top: 0;
}

.site {
  display: flex;
  flex-direction: column;
  width: min(1000px, 100vw);
  margin: auto;
}

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