style.css

:root {
  --gray: rgba(51,51,51,.6);
  --silver: rgb(204, 204, 204);
  --slate: rgb(51, 51, 51);
  --merlot: rgb(50, 1, 79);
  --purple: rgb(184, 69, 252);
  --washed-purple: rgba(185, 69, 252, 0.10);
}

/* sizing */
.h100vh { min-height: 100vh }
.mw9 { max-width: 80rem }

/* font */
.noto { font-family: 'Noto Sans JP', sans-serif }
.noto-serif { font-family: 'Noto Serif JP', Georgia, serif }

/* bg */
.bg-merlot { background-color: var(--merlot) }
.bg-dots { background-image: radial-gradient(rgba(255,255,255,.3) 1px, transparent 1px), radial-gradient(rgba(255,255,255,.3) 1px, transparent 1px); background-size: 75px 75px; background-position: 0px 0px,40px 25px }
.bg-parallax {  background-attachment: fixed }

/* color */
.merlot { color: var(--merlot) }

/* opacity */
.hover-o-100:hover { opacity: 1 }

/* transform */
.ty--50 { transform: translateY(-50%);}

/* text */
main h1, main h2, main h3, main h4, main h5 { margin-bottom: 0; font-weight: 400 }
main h1 { margin-top: 0; font-size: 2.5rem }
main h2 { margin-top: 3rem; font-size: 2em; color: var(--gray) }
main h3 { margin-top: 2rem; font-size: 1.5em }
main h2 + h3 { margin-top: .5rem }
main p { line-height: 1.4 }

a { color: inherit; transition: color .125s ease-in }
main a:visited, .sidebar a:visited { color: inherit }
main a:hover, .sidebar a:hover { color: var(--merlot) }

blockquote { margin-left: 0; margin-right: 0; padding: 1rem; border-left: 4px solid var(--purple); background: var(--washed-purple) }
blockquote p { margin: 0 }

/* tables */
table { text-align: left; border-collapse: collapse }
td, th { padding: .5rem; border-bottom: 1px solid var(--silver) }

/* code */
code[class*="language-"], pre[class*="language-"] { font-size: .75rem }
pre[class*="language-"] { padding: 1rem }
pre { overflow-x: auto; overflow-wrap: normal; white-space: pre; font-size: .875rem; margin: 1rem 0; padding: 1rem; color: #eff0f9; background: #333 }
code { vertical-align: middle; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; background-color: var(--washed-purple) }
pre > code { background-color: inherit }
h2 > code, h3 > code, p > code { padding: 0 .25rem }

@media screen and (min-width: 60em) {
    code[class*="language-"], pre[class*="language-"] { font-size: .875rem }
}