/* cyrillic-ext */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/KFOmCnqEu92Fr1Mu72xKOzY.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/KFOmCnqEu92Fr1Mu5mxKOzY.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/KFOmCnqEu92Fr1Mu7mxKOzY.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/KFOmCnqEu92Fr1Mu4WxKOzY.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
    U+03A3-03FF;
}

/* vietnamese */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/KFOmCnqEu92Fr1Mu7WxKOzY.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/KFOmCnqEu92Fr1Mu7GxKOzY.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/KFOmCnqEu92Fr1Mu4mxK.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1,
    U+03A3-03FF;
}

/* vietnamese */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/KFOlCnqEu92Fr1MmWUlfBBc4.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* vietnamese */
@font-face {
  font-family: "Tilt Neon";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/E21L_d7gguXdwD9LEFY2WCeElCNtd-eBqpHp1TzrkJSmwpj5ndxquUK1UOeVJw.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
    U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
    U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
  font-family: "Tilt Neon";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/E21L_d7gguXdwD9LEFY2WCeElCNtd-eBqpHp1TzrkJSmwpj5ndxquUK0UOeVJw.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "Tilt Neon";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/E21L_d7gguXdwD9LEFY2WCeElCNtd-eBqpHp1TzrkJSmwpj5ndxquUK6UOc.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  font-family: Roboto, system-ui, sans-serif;
  letter-spacing: 0.025rem;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  /* color: rgba(255, 255, 255, 0.87);
  background-color: #242424; */

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;

  --black: #111112;
  --mid-black: #1f232b;
  --dark-black: #242424;
  --white: #fefefe;
  --light-gray: #f5f5f5;
  --mid-gray: #dde0e8;
  --dark-gray: #9499a5;
  --darker-gray: #5b5e67;
  --charcoal: #3b3c40;
}

.theme-dark {
  --bg-color: var(--black);
  --header-color: var(--mid-black);
  --footer-color: var(--mid-black);
  --font-color: var(--white);
  --shadow-color: var(--darker-gray);
  --divider-color: var(--charcoal);
  --button-bkg-color: var(--dark-black);
  --button-text-color: var(--font-color);
  --button-text-highlight-color: var(--font-color);
  --button-text-hover-color: var(--font-color);
  --button-shadow-color: var(--darker-gray);
  --button-shadow-hover-color: var(--dark-gray);
  color: var(--font-color);
}

.theme-light {
  --bg-color: var(--white);
  --header-color: var(--light-gray);
  --footer-color: var(--light-gray);
  --font-color: var(--dark-black);
  --shadow-color: var(--dark-gray);
  --divider-color: var(--mid-gray);
  --button-bkg-color: var(--bg-color);
  --button-text-color: var(--charcoal);
  --button-text-highlight-color: var(--black);
  --button-shadow-color: var(--mid-gray);
  --button-shadow-hover-color: var(--dark-gray);
  color: var(--font-color);
}

a {
  font-weight: 500;
  color: var(--font-color);
  /* #e5e7ea; */
  text-decoration: inherit;
  text-underline-offset: 5px;
}

a.link {
  outline: none;
}

a.link:where(:hover, :focus) {
  text-decoration: underline dashed;
  text-underline-offset: 5px;
}

header a:where(:hover, :focus-visible) {
  text-decoration: underline;
}

header a span:first-child {
  color: orange;
}

body {
  margin: 0;
  transition-property: color, background-color;
  transition-duration: 0.5s;
  min-height: 100vh;
  background-color: var(--bg-color);
  display: flex;
  flex-direction: column;
}

.container {
  display: flex;
  flex-direction: column;
  max-width: 80ch;
  margin: auto;
  padding: 2rem;
}

.with-responsive-images img {
  max-width: clamp(256px, 100%, 100%);
}

h1 {
  font-size: clamp(4.2em, 10vw, 6.5em);
  line-height: 1.1;
}

h2 {
  font-size: 2em;
}

h2.mid-size {
  font-size: 1.5em;
}

h2.sub-title {
  margin-top: 0;
  margin-bottom: 3rem;
}

.jump-to-content {
  display: block;
  left: -200rem;
  overflow: hidden;
  padding: 1rem 1.5rem;
  position: absolute;
  top: 3px;
  z-index: 1200;
  background: var(--bg-color);
}

.jump-to-content:before {
  bottom: -1px;
  content: "";
  display: block;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 250ms;
  width: 100%;
}

.jump-to-content:focus {
  left: 0;
}

.main-header {
  display: flex;
  background-color: var(--header-color);
  padding: 1rem;
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 1px solid var(--divider-color);
}

.logo {
  flex: 1;
}

.logo span:first-child {
  font-size: 2rem;
  line-height: 1rem;
  float: left;
  margin-right: 0.5rem;
}

.main-header nav {
  flex: 0 0 146px;
  gap: 0.5rem;
  display: flex;
  justify-content: space-around;
}

.main-header nav a:focus {
  text-decoration: underline dashed;
  outline: none;
}

main {
  flex: 1 auto;
}

#theme-toggle {
  border: none;
  border-radius: 50%;
  font-size: 1em;
  background-color: var(--bg-color);
  padding: 0.1625rem 0.125rem;
  line-height: 1rem;
  margin-right: 1rem;
  margin-left: 0.5rem;
  height: 1.5rem;
  width: 1.5rem;

  &:hover {
    cursor: pointer;
  }
}

#theme-toggle::before {
  content: "🔆";
}

.theme-light #theme-toggle::before {
  content: "🌛";
}

.home-title {
  background-color: var(--header-color);
}

.home-title h1 {
  font-family: "Tilt Neon";
  font-weight: bold;
  line-height: 0.9em;
  letter-spacing: 0.01em;
  margin-bottom: 0;
  margin-top: 1.5rem;
}

figure {
  margin: 2rem 0;
}

figure img {
  float: left;
  margin-right: 2rem;
  border: 1px solid;
}

aside {
  font-size: 0.875rem;
}

img {
  border-radius: 4px;
  box-shadow: 1px 1px var(--shadow-color);
}

figure h3 {
  margin: 0;
}

figcaption p:first-child {
  margin-top: 0;
}

em {
  font-size: 1.5em;
}

section+hr {
  max-width: min(80ch, calc(100% - 4rem));
}

.blogs article {
  padding: 0 1rem 1rem;
  margin-left: -1rem;
  margin-bottom: 1rem;
  transition-property: color, background-color;
  transition-duration: 0.3s;
  position: relative;
  color: var(--font-color);
  background-color: var(--header-color);
  box-shadow: 2px 2px 2px -1px var(--dark-black);
  border-radius: 4px;
}

.blogs article a {
  color: var(--font-color);
  display: flex;
  flex-direction: column;
}

.blogs article:focus-within {
  outline-style: dashed;
}

.blogs article:focus-within a {
  outline: none;
}

.blogs article a span {
  color: #9ca3af;
  font-size: 0.875rem;
}

.blogs article h3 {
  font-size: 1.25rem;
}

a.emphasized-link {
  text-decoration: underline dashed;
}

a.emphasized-link:hover {
  text-decoration: underline;
}

.pretty {
  text-wrap: pretty;
}

.m-auto {
  margin: auto;
  margin-bottom: 1rem;
}

.moto {
  font-size: 1.25em;
}

.link-active {
  text-decoration: underline;
}

.hidden-mobile {
  display: none;
}

footer {
  position: static;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  padding: 2rem;
  background-color: var(--footer-color);
  font-size: 20px;
  border-top: 1px solid var(--divider-color);
}

.grid-right {
  grid-area: right-end;
}

.btn {
  appearance: none;
  background-color: var(--button-bkg-color);
  border-radius: 4px;
  border-width: 0;
  box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, var(--button-shadow-color) 0 -3px 0 inset;
  box-sizing: border-box;
  color: var(--button-text-color);
  padding: 1rem;
  font-size: 0.875rem;
}

@media screen and (min-width: 37rem) {
  :root {
    font-size: 20px;
  }

  .hidden-mobile {
    display: initial;
  }
}

@media screen and (max-width: 37rem) {
  figure img {
    width: clamp(256px, 100%, 100%);
  }
}

@media screen and (min-width: 48rem) {
  .blogs article {
    padding-bottom: 2rem;
    background-color: transparent;
    box-shadow: none;
    margin-bottom: 0;

    &:hover {
      color: var(--font-color);
      background-color: var(--header-color);
      box-shadow: 2px 2px 2px -1px var(--dark-black);
      border-radius: 4px;
    }

    &:hover::after {
      content: " →";
      position: absolute;
      bottom: 0;
      right: 1rem;
    }
  }

  .btn:focus-within {
    outline: dashed;
  }

  .btn:hover {
    color: var(--button-text-hover-color);
    box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, var(--button-shadow-hover-color) 0 -3px 0 inset;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-style: dashed;
  }

  .btn:hover .icon,
  .btn:focus-within .icon {
    color: var(--button-text-hover-color);
  }
}