:root {
  --main-link-blue: #1e44db;
  --main-pink: #db4161;
  --main-background: #fffcfa;
  --content-width: 800px;
  --text-dark: #242424;
}

@font-face {
  font-family: 'Noto Serif';
  src: url('/assets/NotoSerif-Regular.woff2');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Noto Serif';
  src: url('/assets/NotoSerif-Bold.woff2');
  font-weight: bold;
  font-style: normal;
  font-display: block;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: 'Noto Serif';
  color: var(--text-dark);
}

body {
  background-color: var(--main-background);
}

ul, ol {
  list-style-type: none;
}

a {
  text-decoration-thickness: 1px;
}

.basic-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;

  padding: 8px 0;

  main {
    padding: 0 8px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    line-height: 1.5;
  }

  > * {
    width: 100%;
    max-width: var(--content-width);
  }
}

.navigation-bar {
  display: flex;
  flex-direction: row;
  font-size: 1.25rem;
  padding: 0 8px;

  #nav-status {
    height: 64px;
    width: 64px;
    padding: 8px;
    border-radius: 8px 0 8px 8px;
    background-color: var(--main-link-blue);

    #img-hover {
      display: none;
    }
  }

  #nav-status:hover {
    #img-default {
      display: none;
    }

    #img-hover {
      display: block;
    }
  }

  nav {
    background: linear-gradient(in oklab to right, var(--main-link-blue), #846cd4);
    align-self: flex-start;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 4px;
    border-radius: 0 4px 4px 0;
  }

  a {
    color: white;
    padding: 0 4px;
    border-radius: 2px;
  }
}

.main-link {
  color: var(--main-link-blue);
}

.contact-information {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 8px;
}

.posts-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.post-entry {
  display: flex;
  flex-direction: column;
  border-left: solid 4px var(--main-pink);
  padding-left: 8px;

  a {
    font-weight: bold;
    font-size: 20px;
    color: var(--text-dark);
  }

  a:visited {
    color: var(--text-dark);
  }
}

.post-article {
  display: flex;
  flex-direction: column;
  gap: 8px;

  h1 {
    font-size: 56px;
    text-wrap: balance;
    text-align: center;
    line-height: 1.25;
  }

  h2, h3 {
    margin-top: 16px;
  }

  header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
  }

  ul {
    list-style-type: disc;
    padding-left: 16px;
  }

  code {
    font-size: 16px;
    line-height: 1;
  }

  figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    align-self: center;
  }

  .code-block {
    overflow-x: auto;
    padding: 4px 0;
    padding-bottom: 16px;
    border: solid 1px black;
  }
}

.gallery {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  overflow-x: scroll;
  padding-bottom: 16px;

  > * {
    flex: 0;
  }
}

/* --- CSS toggle --- */

.theme-toggle {
  --day-bg-color: #1f94e9;
  --day-bg-color-2: #a1cceb;
  --night-bg-color: #142944;
  --night-bg-color-2: #181b49;
  --moon-color-unlit: #525263;
  --sun-color: #f1b553;
  --cloud-color: #eef6fc;
  --easer: ease-in-out;
  --toggle-width: 220px;
  --toggle-height: 100px;
  --toggle-size: calc(0.7 * var(--toggle-height));
  --gap-size: calc((var(--toggle-height) - var(--toggle-size)) / 2);

  position: relative;
  overflow: clip;
  appearance: none;
  cursor: pointer;
  background: linear-gradient(var(--day-bg-color), var(--day-bg-color-2));
  width: var(--toggle-width);
  height: var(--toggle-height);
  border-radius: calc(var(--toggle-height) / 2);
  transition: all 0.5s ease-in-out;
  box-shadow:
    inset -1px 1px 0.1px 2px rgba(0, 0, 0, 0.05),
    inset 1px -1px 0.1px 2px rgba(255, 255, 255, 0.6);
}

.theme-toggle:checked {
  background: linear-gradient(var(--night-bg-color), var(--night-bg-color-2));
  box-shadow:
    inset 1px 1px 0.1px 2px rgba(0, 0, 0, 0.2),
    inset -1px -1px 0.1px 2px rgba(255, 255, 255, 0.3);
}

.theme-toggle::before {
  content: '🟄';
  font-family: 'Noto Serif';
  position: absolute;
  transition: all 0.3s;
  left: 0px;
  top: 0px;
  font-size: 18px;
  color: transparent;
  text-shadow:
    0px 0px 0px transparent,
    46px 12px 0px transparent,
    46px 12px 0px transparent,
    -30px 28px 0px transparent,
    -30px 28px 0px transparent,
    30px 52px 0px transparent,
    30px 52px 0px transparent;
}

.theme-toggle:checked::before {
  color: #ccccd0;
  left: 54px;
  top: 12px;
  transition: all 0.7s;
  transition-delay: 0.2s;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  text-shadow:
    0px 0px 8px white,
    46px 12px 0px #dddddd,
    46px 12px 6px #fdfdfd,
    -30px 28px 0px #bdbdbd,
    -30px 28px 8px #dddddd,
    24px 52px 0px #bdbdbd,
    24px 52px 10px white;
}

/* Sun */
.theme-toggle::after {
  content: '';
  position: absolute;
  width: var(--toggle-size);
  height: var(--toggle-size);
  border-radius: 50%;
  background: var(--sun-color);
  left: var(--gap-size);
  top: var(--gap-size);
  transition: all 0.4s ease-in-out;
  box-shadow:
    0px 0px 5px 4px rgba(247, 218, 150, 0.65),
    /* clouds */ 50px 68px 0px 10px var(--cloud-color),
    110px 36px 0px 6px var(--cloud-color),
    150px 56px 0px 6px var(--cloud-color),
    /* sun glow */ 0px 0px 0.8px 10px rgba(255, 255, 255, 0.1),
    0px 0px 0.5px 30px rgba(255, 255, 255, 0.1),
    0px 0px 0.2px 50px rgba(255, 255, 255, 0.1),
    0px 0px 0.1px 70px rgba(255, 255, 255, 0.08),
    0px 0px 0.1px 90px rgba(255, 255, 255, 0.08),
    0px 0px 0.1px 110px rgba(255, 255, 255, 0.05),
    inset 0px 0px 1px 1px rgba(255, 255, 255, 0.6);
}

/* Moon */
.theme-toggle:checked::after {
  left: calc(var(--toggle-width) - var(--toggle-size) - 1.5 * var(--gap-size));
  background: var(--moon-color-unlit);
  box-shadow:
    0px 0px 12px 4px rgba(255, 255, 255, 0.3),
    /* clouds */ 90px 64px 0px 5px var(--cloud-color),
    170px 36px 0px 3px var(--cloud-color),
    190px 76px 0px 3px var(--cloud-color),
    /* moon glow */ 0px 0px 0.8px 10px rgba(255, 255, 255, 0.01),
    0px 0px 0.5px 30px rgba(255, 255, 255, 0.01),
    0px 0px 0.2px 50px rgba(255, 255, 255, 0.01),
    0px 0px 0.1px 70px rgba(255, 255, 255, 0.01),
    0px 0px 0.1px 90px rgba(255, 255, 255, 0.01),
    0px 0px 0.1px 110px rgba(255, 255, 255, 0.01),
    inset -10px -5px 0.1px 10px rgba(235, 235, 235, 0.8);
}