:root {
  --site-width: 62rem;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --background: #f6f5f3;
    --text: #2d2f33;
    --link: #1d7bb8;
    --link-hover: #145a86;
    --accent-1: #ebe9e6;
    --accent-2: #d0cdca;
    --accent-3: #7a7c80;
    --highlight: #e4e1de;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: #1e242b; 
    --text: #e4e4e4;
    --link: #66c2ff;
    --link-hover: #81d4fa;
    --accent-1: #2c3239;
    --accent-2: #454b52;
    --accent-3: #b2b3b5;
    --highlight: #3a4148;
  }
}

body {
  line-height: 1.7;
}

article p {
  margin-bottom: 2rem;
}

footer > p:nth-child(1) {
    display: none;
}

@media only screen and (max-width: 768px) {
  body {
    line-height: 1.55;
  }
}

/* === Search === */
.nav-item:last-of-type {
	margin-left: 1rem;
}
.nav-item a[href$="/search/"] {
    text-indent: -9999px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    line-height: 1;
	border-radius: 50%;
	padding: 3px;
}
.nav-item a[href$="/search/"]:after {
    color: var(--accent-3);
    font-family: "Phosphor";
    font-display: swap;
    text-indent: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    margin-left: auto;
    line-height: 0;
	font-size: 1.6rem;
}
.nav-item > a[href$="/search/"]:hover {
    text-decoration: none;
}
.nav-item a:after {
	transition: all 0.2s ease-in-out;
}
.nav-item a[href$="/search/"]:after {
    content: "\e30c" / "Search";
}
.nav-item a[href$="/search/"]:hover:after {
    color: var(--link-hover);
}
@media only screen and (max-width: 768px) {
	.nav-item {margin-left: 0}
	.nav-item a[href$="/search/"] {
        text-indent: 0;
        display: block;
        margin: 0;
    }
	.nav-item a[href$="/search/"]:after {
        content: "";
    }
	.nav-item > a[href$="/search/"]:hover {
        text-decoration: underline;
		background: var(--background);
    }
}