/**
* Variables
**/

:root {
  --dark-c-bg: hsla(240, 12%, 8%, 1);
  --dark-c-border: hsla(240, 14%, 10%, 1);
  --dark-c-code: hsla(240, 14%, 15%, 1);
  --dark-c-code-text: hsla(84, 61%, 63%, 1);
  --c-white: hsla(0, 0%, 100%, 1);
  --dark-c-text: hsla(0, 0%, 100%, 1);
  --dark-c-text-muted: hsla(0, 0%, 60%, 1);
  --dark-c-copy-muted: hsla(0, 0%, 80%, 1);
  /* --dark-c-base: hsla(166, 100%, 50%, 1); */
  --dark-c-base: hsla(281, 100%, 60%, 1);
  --dark-c-base-60: hsla(281, 100%, 65%, 1);
  --dark-c-base-70: hsla(281, 100%, 75%, 1);
  --dark-c-base-80: hsla(281, 100%, 85%, 1);
  --dark-c-base-90: hsla(281, 100%, 95%, 1);
  --general-c-25: hsla(0, 0%, 100%, 0.25);
  --general-c-50: hsla(0, 0%, 100%, 0.5);
  --general-c-75: hsla(0, 0%, 100%, 0.75);
  --general-c-10: hsla(0, 0%, 100%, 0.1);

  --10px: 0.625rem;
  --11px: 0.6875rem;
  --12px: 0.75rem;
  --13px: 0.8125rem;
  --14px: 0.875rem;
  --15px: 0.9375rem;
  --16px: 1rem;
  --17px: 1.0625rem;
  --18px: 1.125rem;
  --19px: 1.1875rem;
  --20px: 1.25rem;
  --21px: 1.3125rem;
  --22px: 1.375rem;
  --23px: 1.4375rem;
  --24px: 1.5rem;
  --25px: 1.5625rem;
  --26px: 1.625rem;
  --27px: 1.6875rem;
  --28px: 1.75rem;
  --29px: 1.8125rem;
  --30px: 1.875rem;
  --31px: 1.9375rem;
  --32px: 2rem;
  --33px: 2.0625rem;
  --34px: 2.125rem;
  --35px: 2.1875rem;
  --36px: 2.25rem;
  --37px: 2.3125rem;
  --38px: 2.275rem;
  --39px: 2.4375rem;
  --40px: 2.5rem;
  --41px: 2.5625rem;
  --42px: 2.625rem;
  --43px: 2.6875rem;
  --44px: 2.75rem;
  --45px: 2.8125rem;
  --46px: 2.875rem;
  --47px: 2.9375rem;
  --48px: 3rem;
}

/**
* P3 Colors if supported
**/

@supports (color: color(display-p3 1 1 1)) {
  :root {
    --dark-c-base: color(display-p3 0.688 0.25 1);
    --dark-c-base-60: color(display-p3 0.7 0.3 1);
    --dark-c-base-70: color(display-p3 0.725 0.4 1);
    --dark-c-base-80: color(display-p3 0.75 0.5 1);
    --dark-c-base-90: color(display-p3 0.85 0.75 1);
  }
}

@font-face {
  font-family: "PlexMono";
  src: url("../fonts/IBMPlexMono-Medium.woff2") format("woff2"),
    url("../fonts/IBMPlexMono-Medium.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PlexMono";
  src: url("../fonts/IBMPlexMono-Text.woff2") format("woff2"),
    url("../fonts/IBMPlexMono-Text.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Karmilla";
  src: url("../fonts/karmilla-regular-015-webfont.woff2") format("woff2"),
    url("../fonts/karmilla-regular-015-webfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Karmilla";
  src: url("../fonts/karmilla-bold-015-webfont.woff2") format("woff2"),
    url("../fonts/karmilla-bold-015-webfont.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

html {
  background: var(--dark-c-bg);
  overflow-y: scroll;
  cursor: default;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: var(--dark-c-border);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern=1";
  height: 100%;
  color: var(--dark-c-text);
}

body {
  background-color: var(--dark-c-bg);
  font-family: "Karmilla", sans-serif;
  font-weight: 400;
}

em {
  font-weight: 500;
  font-family: "PlexMono", monospace;
  color: var(--dark-c-base-80);
}

strong {
  font-weight: 700;
  color: var(--dark-c-base-90);
}

blockquote {
  background-color: var(--dark-c-border);
  padding: 0rem 2rem;
  font-family: "PlexMono", monospace;
  border-left: 2px solid var(--dark-c-base);
  margin: 2rem 0;
}

section.article blockquote p {
  font-size: clamp(1rem, 5vw - 1rem, 1.313rem);
}

header {
  margin-top: clamp(1rem, 1vw + 1rem, 2rem);
}

h2 {
  font-size: clamp(1.313rem, 1vw + 1rem, 1.875rem);
  font-weight: 600;
  letter-spacing: 0.02rem;
}

article h2 {
  font-size: clamp(1.313rem, 1vw + 1rem, 1.875rem);
  text-transform: none;
  margin-top: clamp(1.5rem, 2vw + 1rem, 3rem);
  font-weight: 600;
}

article h3 {
  font-size: clamp(1.125rem, 1vw + 1rem, 1.5rem);
  text-transform: none;
  margin-top: clamp(1rem, 1vw + 1rem, 2rem);
  font-weight: 600;
}

header nav {
  display: flex;
  justify-content: space-between;
  padding-inline: clamp(2rem, 4vw + 1rem, 6rem);
  padding-top: clamp(1rem, 2rem, 4rem);
  padding-bottom: clamp(1rem, 2rem, 4rem);
  height: 5rem;
  gap: clamp(0.5rem, 1rem, 2rem);
  font-family: "Karmilla", sans-serif;
  font-weight: 600;
}

header nav > div {
  align-items: center;
  display: flex;
  height: auto;
}

header nav .logo {
  min-width: 7ch;
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  font-size: clamp(var(--12px), var(--14px), var(--16px));
}

header nav .menu {
  font-size: clamp(var(--12px), var(--14px), var(--16px));
}

header nav a,
header nav a:link {
  color: var(--c-white);
  border-bottom: 0;
  padding-bottom: 0;
}

.nav-line-grad {
  height: 2px;
  margin-top: 7px;
  width: clamp(16rem, 84vw, 92%);
  background: linear-gradient(270deg, #c5077c 0%, #06ddfb 47.92%, #fbc506 100%);
  min-width: 2rem;
  background-size: 200% 200%;
  animation: gradient 30s ease-in-out infinite;
}

.wrapper {
  width: clamp(14rem, 90vw, 90rem);
  margin: 0 auto;
  padding: clamp(1rem, 1vw + 1rem, 4rem);
}

img {
  height: auto;
  max-width: 100%;
}

p {
  font-size: clamp(1.125rem, 1vw + 1rem, 1.75rem);
  line-height: 1.7;
  padding: 2rem 0;
}

.intro {
  display: flex;
  gap: clamp(2rem, 5vw + 1.25rem, 6rem);
  line-height: 1.7;
  justify-content: space-between;
  flex-wrap: wrap;
}

.intro > :first-child {
  flex-basis: 15rem;
  flex-grow: 1;
}

.intro > :last-child {
  flex-basis: 15rem;
  flex-grow: 1;
}

.intro p,
.intro h1 {
  font-family: "PlexMono", monospace;
  font-weight: 500;
  font-size: clamp(0.875rem, 5vw - 1rem, 1.5rem);
  line-height: 1.8;
  flex: 0 0 46%;
  letter-spacing: 0.05rem;
  padding: 2rem 0;
}

.intro h1 + p {
  color: var(--dark-c-text-muted);
  margin-top: calc(1.8 * var(--48px));
}

hr {
  height: 0.5rem;
  background: linear-gradient(270deg, #06ddfb 0%, #fbc506 43.75%, #c5077c 100%);
  width: 100%;
  margin: clamp(4rem, 5vw + 1rem, 12rem) 0;
  opacity: 1;
}

hr.muted {
  height: 0.125rem;
  background: linear-gradient(270deg, #06ddfb 0%, #fbc506 43.75%, #c5077c 100%);
  width: 100%;
  margin: clamp(4rem, 5vw + 1rem, 12rem) 0;
  opacity: 0.1;
}

a,
a:link {
  color: var(--dark-c-base);
  text-decoration: none;
  border-bottom: 0.02rem solid;
  padding-bottom: 0.15rem;
  transition: padding-bottom 350ms ease-in-out, color 250ms ease-in-out;
}

figure.youtube {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
}

figure.youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

section.articles article {
  margin: clamp(1rem, 2vw + 1rem, 2rem) 0;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(81, 61, 90, 0.5);
}

section.articles article a,
section.articles article a:link {
  color: var(--c-white);
}

section.articles .category {
  white-space: nowrap;
  margin-bottom: 1rem;
}

section.article,
section.articles {
  max-width: 60rem;
  margin: 0 auto;
  margin-top: clamp(2rem, 5vw + 1rem, 6rem);
}

.home section.articles {
  max-width: 50%;
}

section.article h1 {
  font-size: clamp(1.5rem, 3vw + 1rem, 3rem);
  font-weight: 600;
  background: linear-gradient(160deg, #9747ff 0%, #fbc506 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

section.articles h2 {
  font-size: clamp(1.125rem, 1vw + 1rem, 2.5rem);
  font-weight: 600;
  color: var(--dark-c-base-90);
  transition: color 500ms ease-in-out;
}

.home section.articles h3 {
  font-size: clamp(1.125rem, 1vw + 1rem, 1.5rem);
  font-weight: 600;
  color: var(--dark-c-base-90);
  transition: color 500ms ease-in-out;
}

.home .title {
  font-size: clamp(0.875rem, 5vw - 1rem, 1.313rem);
  padding-bottom: 0.3rem;
  transition: color 500ms ease-in-out;
}

.home .teasers article a,
.home .teasers article a:link {
  border-bottom: unset;
  padding-bottom: unset;
  color: var(--dark-c-base-90);
}

section.article p {
  font-size: clamp(1rem, 1vw + 1rem, 1.5rem);
  font-weight: 400;
}

section.articles p {
  font-size: clamp(1rem, 5vw - 1rem, 1.5rem);
  font-weight: 400;
}
/**
section.article p + p {
  text-indent: 2rem;
}
**/
article .meta {
  padding: 1.5rem 0;
  display: flex;
  width: 100%;
  font-size: var(--14px);
  justify-content: flex-start;
  font-family: "PlexMono", monospace;
  flex-wrap: wrap;
  gap: 10%;
}

article .tags {
  padding: 2rem 0;
  border-top: 2px solid var(--general-c-10);
  margin-top: 2rem;
}

article .tags ul {
  display: flex;
  gap: 2%;
  flex-wrap: wrap;
}

article .tags li {
  border: 1px solid rgba(81, 61, 90, 0.5);
  border-radius: 0.25rem;
  background: linear-gradient(
    360deg,
    rgba(81, 61, 90, 0.1) 0%,
    rgba(128, 0, 255, 0.1) 100%
  );
  padding: 0.25rem 0.5rem;
  display: inline-block;
  font-size: var(--12px);
  font-family: "PlexMono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  font-weight: 600;
  transition: border 200ms ease-in-out;
}

.article-published {
  display: inline-block;
}

.firstpublished {
  padding: 2rem 0;
  font-family: "PlexMono", monospace;
  opacity: 0.75;
}

article figure figcaption {
  text-align: center;
  color: var(--dark-c-text-muted);
  padding: 2rem 0;
  font-family: "PlexMono", monospace;
  font-size: clamp(0.625rem, 5vw - 1rem, 0.875rem);
}

figcaption em {
  color: var(--dark-c-text-muted);
}

.tags a,
.tags a:link {
  border-bottom: unset;
  color: var(--c-white);
}

.home article h1,
section.articles h1 {
  margin-top: 0.5rem;
  font-weight: 600;
  font-size: clamp(1.5rem, 2vw + 1rem, 2.625rem);
}

.articles article {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 4rem;
}

.articles article h2 {
  margin: 0;
}

.category {
  border: 1px solid rgba(81, 61, 90, 0.75);
  border-radius: 0.25rem;
  background-color: rgba(81, 61, 90, 0.25);
  padding: 0.25rem 0.5rem;
  display: inline-block;
  font-size: clamp(0.5rem, 5vw - 1rem, 0.75rem);
  font-family: "PlexMono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  font-weight: 600;
  color: var(--c-white);
  white-space: nowrap;
}

.article .category {
  margin-bottom: 1rem;
}

article p ~ p {
  color: var(--dark-c-copy-muted);
}

.muted {
  color: var(--dark-c-text-muted);
}

article.teaser a,
article.teaser a:link {
  border-bottom: none;
  font-size: var(--21px);
}

.article-headline {
  padding: 1rem 0;
}

article figure {
  left: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  position: relative;
  right: 50%;
  width: 100vw;
}

article img {
  width: 90vw;
  margin: 0 auto;
  display: block;
  max-width: 80rem;
  border-radius: 0.25rem;
}

.home .teasers {
  display: flex;
  align-items: flex-start;
  gap: 6rem;
  justify-content: space-between;
  flex-wrap: wrap;
}

.home .teasers section {
  flex-basis: 44%;
  flex-grow: 1;
}

.home .teasers section article {
  display: flex;
  justify-content: space-between;
  padding: 1.3rem 0;
  gap: 2rem;
  align-items: center;
}

/* CSS Simple Pre Code */
pre {
  background: var(--dark-c-code);
  white-space: pre;
  word-wrap: break-word;
  overflow: auto;
  border-radius: 0.25rem;
  font-size: clamp(1rem, 1vw + 1rem, 1.5rem);
}

pre code {
  font-family: "PlexMono", monospace;
  display: block;
  padding: 1rem 1.5rem;
  line-height: 1.6;
  overflow-x: auto;
  color: #ddd;
  border: none;
  font-size: clamp(1rem, 1vw + 1rem, 1.5rem);
}

pre .language-bash {
  color: #91a7ff;
}

pre .language-html {
  color: #aed581;
}

pre .language-javascript {
  color: #ffa726;
}

pre .language-php {
  color: #4dd0e1;
}

p code {
  font-family: "PlexMono", monospace;
  font-size: clamp(1rem, 1vw - 0.5rem, 1.75rem);
  padding: 0.25rem;
  word-wrap: break-word;
  background: var(--dark-c-code);
  color: var(--dark-c-code-text);
  border-radius: 0.25rem;
}

pre {
  white-space: pre; /* CSS 2.0 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3.0 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -hp-pre-wrap; /* HP Printers */
  word-wrap: break-word; /* IE 5+ */
}

p {
  white-space: pre; /* CSS 2.0 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3.0 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -hp-pre-wrap; /* HP Printers */
  word-wrap: break-word; /* IE 5+ */
}

/**
.home .teasers article.no-flex {
  justify-content: flex-start;
  gap: 1rem;
}

**/

ul {
  padding: 1rem 0;
}

.default ul li {
  line-height: 2;
}

nav.pagination {
  display: flex;
  justify-content: space-between;
  padding: unset;
  font-weight: 500;
}

nav.pagination a {
  color: var(--c-white);
}

nav.pagination .prev {
  margin-left: auto;
}

footer {
  text-align: center;
}

footer nav {
  margin: 0 auto;
  max-width: 60rem;
}

footer ul {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

footer ul li {
}

footer nav a,
footer nav a:link {
  color: var(--c-white);
  text-decoration: none;
  border-bottom: 0.02rem solid;
  padding-bottom: 0.15rem;
  letter-spacing: 0.01rem;
  font-weight: 600;
}

.home footer hr {
  max-width: 100%;
}

footer hr {
  height: 0.25rem;
  background: linear-gradient(270deg, #06ddfb 0%, #fbc506 43.75%, #c5077c 100%);
  width: 100%;
  margin: clamp(1.5rem, 3vw + 1rem, 4rem) auto;
  opacity: 1;
  max-width: 60rem;
}

.muted {
  color: var(--dark-c-text-muted);
}

.small {
  font-size: 0.8rem;
  padding-top: 0.5rem;
}

.small a {
  border-bottom: unset;
  color: var(--c-white);
}

.seperate {
  max-width: 10rem;
  margin: 1rem auto 2rem auto;
  color: var(--dark-c-base-80);
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/**
* Media Queries
**/

@media all and (max-width: 53rem) {
  .intro h1 + p {
    margin-top: 1rem;
  }
}

@media (hover: hover) and (pointer: fine) {
  nav a:hover {
    padding-bottom: 0;
  }

  a:hover {
    padding-bottom: 0.3rem;
    border-bottom: 0.05rem solid;
    color: var(--dark-c-base-80);
  }

  .small a:hover {
    border-bottom: unset;
  }

  nav.pagination a:hover {
    padding-bottom: 0.15rem;
  }

  .home .teasers article a:hover {
    transition: color 500ms ease-in-out;
  }

  section.articles h2:hover,
  .home .title:hover {
    color: var(--dark-c-base-70);
    transition: color 500ms ease-in-out;
  }

  article .tags li:hover {
    border-bottom: unset;
    border: 1px solid rgba(189, 80, 239, 0.5);
    transition: border 250ms ease-in-out;
  }
}