@font-face {
  font-family: 'kiwi soda';
  src: url('asset/KiwiSoda.ttf');
}

@font-face {
  font-family: 'alagard';
  src: url('asset/alagard.ttf');
}

@font-face {
  font-family: 'w95';
  src: url('asset/W95FA.otf');
}

* {
  padding: 0;
  margin: 0;
  line-height: 1.05em;
  box-sizing: border-box;
}

html {
  position: relative;
  font-size: 1.15em;
  min-height: 100svh;
  width: 100svw;
}

html[crt='true']::after {
  content: '';
  display: block;
  position: absolute;
  background-image: linear-gradient(#2525d350, #ffffff00);
  inset: 0;
  z-index: 2;
  background-size: 100% 4px, 5px 100%;
  pointer-events: none;
}

body {
  font-family: 'w95';
  color: #000;
}

h1, h2, h3, h4 {
  font-family: 'kiwi soda';
}

h1 {
  font-size: 2.5rem;
  line-height: 1.1em;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.25rem;
}

ul, ol {
  padding-left: 1.5rem;
}

.collapse {
  list-style-type: none;
  padding-left: 0;
}

a {
  color: #0000b9;
}

button {
  font-family: 'w95';
  font-size: 1rem;
  color: #000;
}

label {
  margin-left: 0.5ch;
}

.back-button {
  font-style: italic;

  &::before {
    content: '← ';
  }
}

.back-button + * {
  margin-top: 1rlh;
}

:is(ul, ol, p)
+ :where(ul, ol, p) {
  margin-top: 1rlh;
}

.page {
  display: none;
}

.active-page {
  display: revert;
}

/* format start */

.index-wrapper {
  margin: auto;
  display: grid;
  gap: 0.5rlh;
  margin-top: 16px;
  max-height: calc(100svh - 16px);

  @media only screen and (width >= 650px) {
    width: 490px;
    grid-template:
      'head head' auto
      'side main' 1fr / min(17ch, 160px) 350px;
  }

  @media only screen and (width < 650px) {
    width: min(490px, calc(100svw - 32px));
    grid-template:
      'head' auto
      'side' auto
      'menuBtn' auto
      'main' 1fr / auto;
  }
}

.index-header {
  grid-area: head;
  text-align: center;
  
  @media only screen and (width >= 650px) {
    width: fit-content;
    margin-left: 32px;
  }
}

.site-title {
  @media only screen and (width >= 450px) {
    &::before {
      content: '★ ';
    }
    
    &::after {
      content: ' ☆';
    }
  }

  @media only screen and (width < 450px) {
    &::before {
      content: '★☆ ';
    }
  }
}

.index-sidebar {
  grid-area: side;
  
  @media only screen and (width < 650px) {
    &[status='open'] {
      display: revert;
    }

    &[status='closed'] {
      display: none;
    }
  }
}

.index-nav > ul {
  display: flex;
  flex-direction: column;
  font-style: italic;
}

.settings {
  margin-top: 0.5rlh;
}

.mobile-menu-button {
  @media only screen and (width >= 650px) {
    display: none;
  }

  @media only screen and (width < 650px) {
    width: 100%;
    margin-top: 0.5rlh;
    font-size: 1em;
    grid-area: 'menuBtn';
  }
}

.index-main {
  grid-area: main;
  overflow-y: auto;
}

/* format end */

/* index start */

.box-container {
  border: 1px solid #000;
  margin-top: 0.5rlh;
  border-radius: 4px;
}

.box-title {
  background: #000;
  color: #fff;
  font-weight: bold;
  padding: 0.125em 0.25em;
  border-radius: 4px 4px 0 0;
  font-size: 1.5rem;
}

.box-content {
  padding: 0.125em 0.25em 0.25em 0.25em;
  overflow-y: auto;
  height: 7rlh;
}

.update-entry
+ .update-entry {
  margin-top: 0.5rlh;
}

.update-id {
  font-weight: bold;
}

/* index end */

/* blog start */

.blog-day-wrapper
+ .blog-day-wrapper {
  margin-top: 1rlh;
}

.blog-post
+ .blog-post {
  margin-top: 0.5rlh;
}

.blog-day {
  font-weight: bold;
}

.blog-time {
  font-style: italic;
  margin-left: 1.5ch;
}

/* blog end */

/* privacy start */

.privacy-wrapper {
  padding: 16px;
  max-width: 450px;
}

/* privacy end */

/* sources start */

.sources-wrapper {
  padding: 16px;
}

/* sources end */

/* sitemap start */

.sitemap-wrapper {
  padding: 16px;
}

.sitemap-nav ul {
  display: flex;
  flex-direction: column;
}

.sitemap-nav ul > ul {
  list-style-type: none;
  padding-left: 1rlh;
}

.sitemap-nav ul > ul > li::before {
  content: '→ ';
}

/* sitemap end */