blog/themes/typing/source/css/typing.css

@charset "utf-8";

html {
  -webkit-text-size-adjust: 100%;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
}

[type="button"],
[type="reset"],
[type="submit"],
button {
  -webkit-appearance: button;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

html.borderbox *,
html.borderbox :after,
html.borderbox :before {
  box-sizing: border-box;
}

article,
aside,
blockquote,
body,
button,
code,
dd,
details,
dl,
dt,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hr,
input,
legend,
li,
menu,
nav,
ol,
p,
pre,
section,
td,
textarea,
th,
ul {
  margin: 0;
  padding: 0;
}

body,
button,
input,
select,
textarea {
  font: 300 1em/1.8 sans-serif;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset,
img {
  border: 0;
}

blockquote {
  position: relative;
  font-weight: 400;
}

@media only screen and (max-width: 640px) {
  blockquote {
    margin: 1em 0;
  }
}

abbr,
acronym {
  border-bottom: 1px dotted;
  -webkit-font-feature-settings: normal;
  font-feature-settings: normal;
  font-variant: normal;
}

abbr {
  cursor: help;
}

del {
  text-decoration: line-through;
}

address,
caption,
cite,
code,
dfn,
em,
th,
var {
  font-style: normal;
  font-weight: 400;
}

ol,
ul {
  list-style: none;
}

caption,
th {
  text-align: left;
}

q:after,
q:before {
  content: "";
}

:root sub,
:root sup {
  vertical-align: baseline;
}

.typo a {
  border-bottom: 1px solid #1abc9c;
}

.typo a:hover {
  border-bottom-color: #555;
  color: #555;
}

.typo a:hover,
a,
ins {
  text-decoration: none;
}

.typo-u,
u {
  text-decoration: underline;
}

mark {
  background: #fffdd1;
  border-bottom: 1px solid #ffedce;
  padding: 2px;
  margin: 0 5px;
}

code,
pre,
pre tt {
  font-family: monospace, monospace;
}

pre {
  background: #f8f8f8;
  border: 1px solid #ddd;
  padding: 1em 1.5em;
  display: block;
  -webkit-overflow-scrolling: touch;
}

hr {
  border: none;
  border-bottom: 1px solid #cfcfcf;
  margin-bottom: 1em;
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

.typo-small,
figcaption,
small {
  font-size: 0.9em;
  color: #888;
}

[draggable] {
  cursor: move;
}

.clearfix:after,
.clearfix:before {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
}

.textwrap,
.textwrap td,
.textwrap th {
  word-wrap: break-word;
  word-break: break-all;
}

.textwrap-table {
  table-layout: fixed;
}

.typo dl,
.typo form,
.typo hr,
.typo ol,
.typo p,
.typo pre,
.typo table,
.typo ul,
.typo-dl,
.typo-form,
.typo-hr,
.typo-ol,
.typo-p,
.typo-pre,
.typo-table,
.typo-ul,
blockquote {
  margin-bottom: 1.2em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 100;
  color: #000;
  line-height: 1.35;
}

.typo h1,
.typo h2,
.typo h3,
.typo h4,
.typo h5,
.typo h6,
.typo-h1,
.typo-h2,
.typo-h3,
.typo-h4,
.typo-h5,
.typo-h6 {
  margin-top: 1.2em;
  margin-bottom: 0.6em;
  line-height: 1.35;
}

.typo h1,
.typo-h1 {
  font-size: 2em;
}

.typo h2,
.typo-h2 {
  font-size: 1.8em;
}

.typo h3,
.typo-h3 {
  font-size: 1.6em;
}

.typo h4,
.typo-h4 {
  font-size: 1.4em;
}

.typo h5,
.typo h6,
.typo-h5,
.typo-h6 {
  font-size: 1.2em;
}

.typo ul,
.typo-ul {
  margin-left: 1.3em;
  list-style: disc;
}

.typo ol,
.typo-ol {
  list-style: decimal;
  margin-left: 1.9em;
}

.typo li ol,
.typo li ul,
.typo-ol ol,
.typo-ol ul,
.typo-ul ol,
.typo-ul ul {
  margin-bottom: 0.8em;
  margin-left: 2em;
}

.typo li ul,
.typo-ol ul,
.typo-ul ul {
  list-style: circle;
}

.typo table caption,
.typo table td,
.typo table th,
.typo-table td,
.typo-table th {
  border: 1px solid #ddd;
  padding: 0.5em 1em;
  color: #666;
}

.typo table th,
.typo-table th {
  background: #fbfbfb;
}

.typo table thead th,
.typo-table thead th {
  background: #f1f1f1;
}

.typo table caption {
  border-bottom: none;
}

.typo-input,
.typo-textarea {
  -webkit-appearance: none;
  border-radius: 0;
}

.typo em,
.typo-em,
caption,
legend {
  color: #000;
  font-weight: inherit;
}

.typo-em {
  position: relative;
}

.typo-em:after {
  position: absolute;
  top: 0.65em;
  left: 0;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  content: "・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・";
}

.typo img {
  max-width: 100%;
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-rendering: optimizelegibility;
  font-family: sans-serif;
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

progress {
  vertical-align: baseline;
}

[hidden],
template {
  display: none;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  color: #222;
  transition: color 0.25s linear;
  cursor: pointer;
}

a:active,
a:hover {
  outline-width: 0;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

dfn {
  font-style: italic;
}

h1 {
  font-size: 1.5em;
  margin: 0.5em 0;
}

mark {
  background-color: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 0.9em;
  background-color: #f3f5f6;
}

figure {
  margin: 1em 40px;
}

button,
input,
optgroup,
select,
textarea {
  font: inherit;
  margin: 0;
}

optgroup {
  font-weight: 700;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

[type="reset"],
[type="submit"],
button,
html [type="button"] {
  -webkit-appearance: button;
}

[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

.article .article-entry blockquote footer cite a:hover,
.article .article-nav-link-wrap:hover {
  color: #22c5e5;
  border-bottom: 1px solid;
  transition: color 0.1s linear;
}

.archive-container hr,
.archive-footer hr,
.article .article-footer hr,
.article hr,
.category-container hr,
.home hr,
.post-footer hr,
.tag-container hr {
  height: 1px;
  border: 0;
  background-image: -webkit-linear-gradient(
    0deg,
    transparent,
    #d5d5d5,
    transparent
  );
}

.main-nav-link {
  margin-right: 10px;
  color: #cacdd0;
  padding-bottom: 5px;
  display: inline-block;
  border: 0;
}

body,
html {
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-font-feature-settings: "liga" on;
  transition: 0.25s;
}

body {
  margin: 0;
  font-family: serif;
  font-size: 1.2em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: serif;
}

a,
a:hover {
  text-decoration: none;
}

em {
  font-style: italic;
  font-weight: lighter;
}

b,
strong {
  color: #000;
  font-weight: 700;
}

blockquote {
  color: #666;
  border-left: 2px solid #666;
  padding-left: 1em;
  margin: 1em 3em 1em -1em;
}

.footer {
  box-sizing: border-box;
}

.home-footer {
  padding: 50px 0;
}

.archive-footer a,
.archive-footer b,
.archive-footer strong,
.post-footer a,
.post-footer b,
.post-footer strong {
  color: #cacdd0;;
}

.container {
  width: 100%;
}

.copyright,
.footer-content,
.footer-links {
  text-align: center;
  width: 100%;
  font-size: 0.9em;
  color: #cacdd0;
}

.copyright li,
.footer-content li,
.footer-links li {
  display: inline-block;
}

.copyright a,
.footer-content a,
.footer-links a {
  color: #cacdd0;
}

.copyright a:hover,
.footer-content a:hover,
.footer-links a:hover {
  color: #fff;
}

.archive-footer,
.post-footer {
  padding: 1em 0;
  color: #cacdd0;
}

.footer-content {
  margin: 0 auto;
  text-align: left;
}

.footer-links {
  font-size: 0.9em;
  padding: 0;
}

.footer-links a {
  text-decoration: none;
}

.footer-links li {
  margin: 0 5px;
}

.home-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home {
  font-weight: lighter;
  line-height: 1.4;
  color: #505050;
  text-align: center;
  position: relative;
}

.home a {
  border-bottom: 1px solid #eee;
}

.home .content {
  width: 60%;
  max-width: 500px;
  position: relative;
  margin: 0 auto;
}

.home h1,
.home strong {
  color: #222;
}

.home hr {
  width: 80%;
  max-width: 300px;
  margin: 20px auto;
}

.home li {
  list-style: none;
}

.home .profile {
  width: 100%;
}

.home .profile h1 {
  font-weight: 300;
}

.archive-container,
.category-container,
.tag-container {
  width: 80%;
  margin: 1em auto 0;
  position: relative;
  line-height: 1;
  text-align: left;
  font-size: 1em;
  max-width: 700px;
}

.archive-container article,
.category-container article,
.tag-container article {
  margin-bottom: 15px;
}

.archive-container a,
.archive-container a:hover,
.category-container a,
.category-container a:hover,
.tag-container a,
.tag-container a:hover {
  border: 0;
}

.archive-container .header,
.category-container .header,
.tag-container .header {
  font-size: 1.1em;
}

.archive-container .archive-article-header > a,
.archive-container .archive-article-header > h1,
.category-container .archive-article-header > a,
.category-container .archive-article-header > h1,
.tag-container .archive-article-header > a,
.tag-container .archive-article-header > h1 {
  vertical-align: middle;
}

.archive-container .archive-article-header h1,
.category-container .archive-article-header h1,
.tag-container .archive-article-header h1 {
  width: calc(100% - 120px);
  font-size: 1em;
  margin: 0;
}

.archive-container hr,
.category-container hr,
.tag-container hr {
  width: 60%;
  margin: 1em 0;
  background-image: -webkit-linear-gradient(
    0deg,
    #d5d5d5,
    #d5d5d5,
    transparent
  );
}

.archive-container .archive-article-date,
.category-container .archive-article-date,
.tag-container .archive-article-date {
  font-size: 1em;
  color: #cacdd0;
}

.archive-article-date {
  margin-right: 0.5em;
}

.archive-container .archive-article-title,
.category-container .archive-article-title,
.tag-container .archive-article-title {
  font-weight: 200;
}

.archive-container .archive-year-wrap,
.category-container .archive-year-wrap,
.tag-container .archive-year-wrap {
  margin-bottom: 20px;
}

.archive-container .page-nav,
.category-container .page-nav,
.tag-container .page-nav {
  text-align: center;
  margin-top: 30px;
  color: #cacdd0;;
}

.archive-container .page-nav a,
.category-container .page-nav a,
.tag-container .page-nav a {
  color: #cacdd0;
}

.archive-container .extend,
.archive-container .page-number,
.category-container .extend,
.category-container .page-number,
.tag-container .extend,
.tag-container .page-number {
  margin-right: 15px;
}

.article {
  width: 80%;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}

.article .header {
  font-size: 1.1em;
  margin-top: 1em;
}

.article .main-nav-link:hover {
  border: 0;
}

.article hr {
  width: 80%;
  background-image: -webkit-linear-gradient(
    0deg,
    #d5d5d5,
    #d5d5d5,
    transparent
  );
}

.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  font-weight: bolder;
}

.article .article-title {
  font-size: 2em;
}

.article a.fancybox,
.article a.fancybox-item {
  border: 0;
}

.article .caption {
  color: #cacdd0;
  display: block;
  font-size: 14px;
  text-align: center;
}

.article .article-entry {
  word-break: break-word;
}

.article .article-entry img {
  display: block;
  margin: auto;
}

.article .article-entry blockquote footer {
  text-align: center;
  font-size: 80%;
  color: #cacdd0;
}

.article .article-entry blockquote footer cite {
  font-style: italic;
}

.article .article-entry blockquote footer cite a {
  color: #cacdd0;
  border-bottom: 1px solid #eee;
  transition: color 0.25s linear;
}

.article .article-entry blockquote footer cite:before {
  content: "—";
  padding: 0 0.5em;
}

.article .article-entry blockquote footer strong {
  color: #cacdd0;
  font-weight: 400;
}

.article .article-entry table caption,
.article .article-entry table td,
.article .article-entry table th,
.article .article-entry td,
.article .article-entry th {
  word-break: normal;
}

.article .article-entry .pullquote {
  width: 45%;
  border: 0;
}

.article .article-entry .pullquote.left {
  float: left;
  text-align: left;
}

.article .article-entry .pullquote.right {
  float: right;
  text-align: right;
}

.article .article-entry .video-container {
  position: relative;
  padding-top: 56.25%;
  margin-bottom: 30px;
  height: 0;
  overflow: hidden;
}

.article .article-entry .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
}

.article .article-nav {
  max-width: 100%;
}

.article .article-nav-link-wrap {
  display: inline-block;
  color: #cacdd0;
  padding: 0 10px;
  width: 49%;
  box-sizing: border-box;
  vertical-align: top;
  border: 0;
}

.article .article-nav-link-wrap strong {
  color: #cacdd0;
}

.article .article-nav-link-wrap:hover {
  border-bottom: 0;
}

.article .article-nav-link-wrap.newer {
  text-align: right;
}

.article .article-nav-link-wrap.older {
  text-align: left;
}

.article .article-footer,
.article .article-footer hr {
  margin-top: 1em;
}

.article .article-meta {
  font-size: 0.9em;
  color: #cacdd0;
}

.article .article-meta a {
  color: #cacdd0;
}

.article .article-meta .label {
  margin-right: 10px;
}

.article .article-meta .article-category,
.article .article-meta .article-tag-list {
  display: inline-block;
}

.article .article-meta .article-tag-list-item {
  display: inline-block;
  margin-right: 5px;
}

.article .article-meta .article-tag-list-item:before {
  content: "#";
}

.article .article-gallery img {
  width: 100%;
}

.article-type-page .article-footer {
  display: none;
}

.dark {
  color: #e6e6e6;
}

.dark,
.dark .container,
.dark .footer {
  background-color: #000;
}

.dark a {
  color: #e6e6e6;
}

.dark a:hover {
  color: #fff;
}

.dark .home {
  color: #e6e6e6;
}

.dark .home h1,
.dark .home strong {
  color: #e6e6e6;
}

.dark .home a {
  border-bottom: 1px solid #e6e6e6;
}

.dark .home a:hover {
  border-bottom: 1px solid #fff;
}

.dark code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 0.9em;
  background-color: #333;
}

.dark .archive-container .header .main-nav-link,
.dark .article .header .main-nav-link,
.dark .category-container .header .main-nav-link,
.dark .tag-container .header .main-nav-link {
  color: #e6e6e6;
}

.dark .archive-container .header .main-nav-link:hover,
.dark .article .header .main-nav-link:hover,
.dark .category-container .header .main-nav-link:hover,
.dark .tag-container .header .main-nav-link:hover {
  color: #fff;
}

.dark .archive-container .article-nav,
.dark .archive-container .page-nav,
.dark .article .article-nav,
.dark .article .page-nav,
.dark .category-container .article-nav,
.dark .category-container .page-nav,
.dark .tag-container .article-nav,
.dark .tag-container .page-nav {
  color: #e6e6e6;
}

.dark .archive-container .article-nav a,
.dark .archive-container .page-nav a,
.dark .article .article-nav a,
.dark .article .page-nav a,
.dark .category-container .article-nav a,
.dark .category-container .page-nav a,
.dark .tag-container .article-nav a,
.dark .tag-container .page-nav a {
  color: #e6e6e6;
}

.dark .archive-container .article-nav a:hover,
.dark .archive-container .page-nav a:hover,
.dark .article .article-nav a:hover,
.dark .article .page-nav a:hover,
.dark .category-container .article-nav a:hover,
.dark .category-container .page-nav a:hover,
.dark .tag-container .article-nav a:hover,
.dark .tag-container .page-nav a:hover {
  color: #fff;
}

.dark .archive-container .article-entry blockquote footer strong,
.dark .archive-container .article-meta a,
.dark .article .article-entry blockquote footer strong,
.dark .article .article-meta a,
.dark .category-container .article-entry blockquote footer strong,
.dark .category-container .article-meta a,
.dark .tag-container .article-entry blockquote footer strong,
.dark .tag-container .article-meta a {
  color: #e6e6e6;
}

.dark blockquote {
  color: #e6e6e6;
}

.dark b,
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark strong {
  color: #e6e6e6;
}

.dark .typo em,
.dark .typo-em,
.dark caption,
.dark legend {
  color: #e6e6e6;
}

.dark .typo table caption,
.dark .typo table td,
.dark .typo-table td {
  border: 1px solid #ddd;
  color: #e6e6e6;
}

.dark .article-entry .highlight,
.dark .article-entry pre {
  color: #e6e6e6;
  background-color: #333;
}

.dark .article-entry .highlight table caption,
.dark .article-entry .highlight table td,
.dark .article-entry .highlight td {
  border: 0;
}

.dark .article-entry .highlight .line.marked {
  background: #444;
}

.article-entry .highlight,
.article-entry pre {
  padding: 1em;
  background: #f3f5f6;
  color: #4d4d4c;
  font-size: 0.9em;
  overflow: auto;
  line-height: 1.8;
}

.article-entry .highlight .gutter pre {
  color: #cacdd0;
  font-size: 0.9em;
}

.article-entry figure.highlight {
  margin: 0;
}

.article-entry pre code {
  background: 0 0;
  text-shadow: none;
  padding: 0;
}

.article-entry .highlight pre {
  border: 0;
  margin: 0;
  padding: 0;
}

.article-entry .highlight table {
  margin: 0;
  width: 100%;
}

.article-entry .highlight td {
  border: 0;
  padding: 0;
}

.article-entry .highlight figcaption {
  color: #8e908c;
}

.article-entry .highlight figcaption a {
  float: right;
}

.article-entry .highlight .line {
  height: 25px;
}

.article-entry .highlight .line.marked {
  background: #e6e6e6;
}

pre .comment,
pre .title {
  color: #8e908c;
}

pre .attribute,
pre .css .class,
pre .css .id,
pre .css .pseudo,
pre .html .doctype,
pre .regexp,
pre .ruby .constant,
pre .tag,
pre .variable,
pre .xml .doctype,
pre .xml .pi,
pre .xml .tag .title {
  color: #c82829;
}

pre .built_in,
pre .constant,
pre .literal,
pre .number,
pre .params,
pre .preprocessor {
  color: #f5871f;
}

pre .class,
pre .css .rules .attribute,
pre .header,
pre .inheritance,
pre .ruby .class .title,
pre .ruby .symbol,
pre .string,
pre .value,
pre .xml .cdata {
  color: #718c00;
}

pre .css .hexcolor {
  color: #3e999f;
}

pre .coffeescript .title,
pre .function,
pre .javascript .title,
pre .perl .sub,
pre .python .decorator,
pre .python .title,
pre .ruby .function .title,
pre .ruby .title .keyword {
  color: #4271ae;
}

pre .javascript .function,
pre .keyword {
  color: #8959a8;
}

/* hide mobile nav menu and its checkbox */
/* when it's not mobile */
.mobile-nav,
#mobile-menu-toggle,
.mobile-nav-link {
  display: none;
}

/* set line-height in /archives page */
.mobile-nav-menu {
  line-height: 1.8;
}

/* overlap other elements */
.mobile-nav-link {
  background: #000;
  border: 2px solid #999;
  border-radius: 5px;
  right: 0;
  margin-left: 5px;
  padding: 10px;
  position: absolute;
  text-align: left;
}

/* search bar */
.searchContainer {
  border-radius: 5px;
  width: 10em;
  color:#e6e6e6;
  background-color:#333;
  outline: 0;
  float: right;
  height: 1.8em;
  position: relative;
}

/* inline-block to position them in same line */
.searchBox,
.searchBtn{
  display:inline-block;
  color: inherit;
  background-color: inherit;
}

/* hide the border and fill the height to parent's */
.searchBox {
  border: 0;
  border-radius: 5px;
  height:100%;
  width: 85%;
  padding-left: 0.2em;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

/* highlight the text box when focused */
.searchBox:focus {
  border: 1px solid #1abc9c;
}

/* align the button to center */
.searchBtn {
  width: 10%;
  position: absolute;
  top: 50%;
  transform: translate(30%, -50%);
}

/* fill the svg with parent's font color */
svg {
  fill: currentColor;
}

/* don't underline specific <a> tag */
.no-underline {
  border-bottom: none;
}

@media (max-width: 768px) {
  body {
    font-size: 1.2em;
  }

  .article-title {
    font-size: 1.8rem;
  }

  /* hide desktop nav */
  .main-nav {
    display: none;
  }

  /* display mobile nav */
  .mobile-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* display links when menu button is clicked */
  /* use grid to display each link in new line */
  #mobile-menu-toggle:checked + .mobile-nav-link {
    display: grid;
    display: -ms-grid;
  }
}

@media (max-width: 468px) {
  body {
    font-size: 1em;
  }

  .home {
    color: #e6e6e6;
  }

  .home a {
    color: #e6e6e6;
  }

  .archive-container .archive-footer,
  .archive-container .post-footer {
    padding: 1em;
  }

  .archive-container .archive-article-header > a,
  .archive-container .archive-article-header > h1 {
    width: 100%;
  }
}

@media (max-width: 320px) {
  body {
    font-size: 0.9em;
  }

  .article {
    font-size: 1em;
  }

  .archive-container .archive-footer,
  .archive-container .post-footer {
    padding: 1em;
  }

  .footer,
  .footer-content {
    font-size: 0.9em;
  }
}

.copy-button {
  background-color: #333;
  border: 1px solid #999;
  border-radius: 5px;
  color: #d8d8d8;
  cursor: pointer;
  font-size: 0.8em;
  line-height: 1em;
  padding: 5px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.copy-button:hover {
  background-color: #3f3f3f;
}