:root {
    --bg-color: #fff;
    --txt-color: #17171b;
    --hover-color: #454551;
    --btn-color: #17171b;
    --btn-txt-color: #fff;
    --btn-hover-color: #454551;
    --quote-color: #454551;
    --card-shadow-color: #00000033;
}

.btn,
button {
    border: none;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #17171b;
        --txt-color: #e3e7e6;
        --hover-color: #828288;
        --btn-color: #232329;
        --btn-txt-color: #e3e7e6;
        --btn-hover-color: #46464b;
        --quote-color: #b7b7bd;
        --card-shadow-color: #1f2223;
    }

    .btn,
    button {
        border: 0.001rem solid var(--txt-color);
    }
}

body {
    box-sizing: border-box;
    font-family: "Atkinson Hyperlegible", sans-serif;
    color: var(--txt-color);
    background-color: var(--bg-color);
    display: flex;
    min-height: 98vh;
    flex-direction: column;
}

img {
    min-width: 60%;
    max-width: 100%;
    margin: auto;
    display: block;
    height: auto;
    object-fit: cover;
}

.content {
    font-size: 1.4rem;
    text-align: center;
    padding: 3% 20% 0;
    flex: 1;
}

a {
    font-weight: 900;
    transition: all 0.1s;
    color: var(--txt-color);
    text-decoration: underline;
    text-underline-offset: 0.1875rem;
}

a:focus,
a:hover {
    color: var(--hover-color);
    text-decoration: underline;
}

.notices a {
    color: inherit;
    text-decoration: underline;
    font-weight: inherit;
}

.notices a:hover,
.notices a:focus {
    color: inherit;
    text-decoration: underline;
}

.bx {
    vertical-align: middle;
}

.home {
    text-align: left;
}

.img-profile {
    min-width: 0;
    border-radius: 50%;
    border: 0.0625rem solid var(--txt-color);
    width: 12.5rem;
    height: 12.5rem;
}

.profile {
    margin-bottom: 1%;
}

.about,
.contact,
.annotation {
    margin: 3% 0;
}

.annotation {
    font-size: 0.9rem;
}

.badge {
    min-width: 3rem;
    max-width: 10rem;
    margin: 0;
}

.highlight {
    background-color: #fff0a4;
    color: #17171b;
}

.btn,
.btn:focus,
.btn:hover {
    text-decoration: none;
}

.btn {
    font-weight: 700;
    transition: all 0.25s;
    min-width: 25%;
    text-decoration: none;
    text-align: center;
    padding: 0.875rem 1.25rem;
    margin: 0.25rem;
    border-radius: 0.625rem;
    cursor: pointer;
    color: var(--btn-txt-color);
    background-color: var(--btn-color);
}

.btn:hover,
.btn:focus {
    text-decoration: none;
    color: var(--btn-txt-color);
    background-color: var(--btn-hover-color);
}

.btn-mastodon {
    background-color: #5539cc;
}

.btn-mastodon:hover,
.btn-mastodon:focus {
    background-color: #5535e4;
}

.btn-twitter {
    background-color: #00aced;
}

.btn-twitter:hover,
.btn-twitter:focus {
    background-color: #07b9fa;
}

.btn-facebook {
    background-color: #3b5998;
}

.btn-facebook:hover,
.btn-facebook:focus {
    background-color: #4166b6;
}

.btn-linkedin {
    background-color: #0077b5;
}

.btn-linkedin:hover,
.btn-linkedin:focus {
    background-color: #0986c9;
}

form input,
form button {
    font-family: "Atkinson Hyperlegible", sans-serif !important;
    font-size: 1.5rem;
    min-height: 3rem;
}

form input {
    min-height: 3rem;
    padding: 0.75rem 1.25rem;
    display: inline-block;
    border: 0.0625rem solid #ccc;
    border-radius: 0.25rem;
    box-sizing: border-box;
    background-color: var(--bg-color);
    color: var(--txt-color);
}

form button {
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s;
    padding: 0.75rem 1.25rem;
    margin: 0.9375rem;
    border-radius: 0.25rem;
    background-color: #00f;
    color: var(--btn-txt-color);
}

form button:hover {
    background-color: #00d;
}

form .annotation {
    margin: 0;
}

.cta {
    color: var(--btn-txt-color);
    background-image: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);
    font-size: 1.3rem;
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    justify-content: center;
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    top: 0;
    left: 0;
}

.blog-card {
    display: flex;
    flex-direction: row;
    box-shadow: 0 0.1875rem 1.5rem var(--card-shadow-color);
    margin: 1.875rem 0;
    border-radius: 0.625rem;
    overflow: hidden;
}

.card-link,
.card-link:focus,
.card-link:hover {
    all: unset;
}

.card-link {
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
}

.card-link:hover .post-title,
.card-link:hover .post-details {
    transition: color 0.3s ease;
    color: var(--hover-color);
}

.card-link:hover .post-image {
    transition: opacity 0.3s ease;
    opacity: 0.9;
}

.card-link:hover {
    cursor: pointer;
}

.post-image {
    width: 100%;
    transition: opacity 0.3s ease;
    display: block;
    object-fit: cover;
}

.post-details {
    padding: 1.5rem;
}

.post-meta {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.0625rem;
    margin: 0 0 0.75rem;
    padding: 0 0 0.25rem;
}

.post-title {
    transition: color 0.5s ease;
    font-size: 1.125rem;
    line-height: 1.4;
    color: var(--txt-color);
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.post-tags {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.0625rem;
    margin: 0 0 0.75rem;
    padding: 0 0 0.25rem;
}

@supports (display: grid) {
    .post-image {
        height: 100%;
    }

    .blog-card {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 1fr;
    }
}

article,
.blog {
    text-align: left;
}

.share {
    padding: 1%;
}

.meta {
    font-size: 0.9em;
    margin-bottom: 3%;
}

pre {
    font-family: "Source Code Pro", monospace;
    font-size: 1rem;
    overflow: auto;
    background-color: var(--btn-color);
    color: var(--btn-txt-color);
    border-radius: 0.325rem;
    display: block;
    line-height: 2;
    padding: 1rem;
}

blockquote {
    padding-left: 1rem;
    position: relative;
    border-left: dotted 0.07rem var(--txt-color);
    color: var(--quote-color);
	margin: 1.5rem 0;
}

blockquote p {
    font-size: 1.3rem;
    position: relative;
}

.wp-caption {
	max-width: 100%;
	margin: 1rem 0;
}

.wp-caption-text {
	font-size: 0.875rem;
	color: var(--hover-color);
	font-style: italic;
	margin-top: 0.5rem;
	text-align: center;
}

.wp-element-caption {
	font-size: 0.875rem;
	text-align: center;
	margin-top: 0.5rem;
	padding: 0.5rem 1rem;
}

.wp-block-quote {
	border-left: 4px solid var(--quote-color);
	padding-left: 1rem;
	margin: 1.5rem 0;
	background: rgba(0, 0, 0, 0.02);
	padding: 1rem 1rem 1rem 1.5rem;
	border-radius: 0 0.25rem 0.25rem 0;
}

.wp-block-quote cite {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.9rem;
	font-weight: bold;
	color: var(--hover-color);
}

.wp-block-pullquote {
	text-align: center;
	border-top: 4px solid var(--quote-color);
	border-bottom: 4px solid var(--quote-color);
	padding: 2rem 0;
	margin: 2rem 0;
	font-size: 1.2rem;
	font-style: italic;
}

.wp-block-pullquote cite {
	display: block;
	margin-top: 1rem;
	font-size: 0.9rem;
	font-weight: bold;
	font-style: normal;
	color: var(--hover-color);
}

.alignleft {
	float: left;
	margin: 0 1rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0 0 1rem 1rem;
}

.aligncenter {
	display: block;
	margin: 0 auto;
}

.alignwide {
	width: 100vw;
	max-width: calc(100vw - 2rem);
	margin-left: calc(50% - 50vw + 1rem);
}

.alignfull {
	width: 100vw;
	max-width: calc(100vw - 0rem);
	margin-left: calc(50% - 50vw);
}

em {
    font-family: Georgia, serif;
}

.left {
    text-align: left;
}

.center {
    text-align: center;
}

.footer,
.pagination {
    margin-top: 3%;
    padding-bottom: 2%;
    position: relative;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 9;
}

.footer .footer-copyright,
.pagination .pagination-newer {
    float: left;
    margin-left: 15%;
}

.footer .footer-link,
.pagination .pagination-older {
    float: right;
    margin-right: 15%;
}

.footer {
    font-size: 1.1rem;
}

.pagination {
    font-size: 1.5rem;
}

nav {
    margin-top: 3rem;
    font-size: 1.6em;
}

nav a,
nav a:focus,
nav a:hover {
    text-decoration: none;
    text-underline-offset: 0;
}

nav .nav-brand {
    float: left;
    margin-left: 15%;
    color: var(--txt-color);
}

nav .nav-btn {
    float: right;
    margin-right: 15%;
}

.center {
    text-align: center;
}

.ybdnb {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    z-index: -1;
}

@media only screen and (max-width: 68.75rem) {
    body {
        min-height: 94vh;
    }

    nav {
        font-size: 1.4rem;
    }

    nav .nav-brand {
        margin-left: 5%;
    }

    nav .nav-btn {
        margin-right: 5%;
    }

    .cta {
        font-size: 1.1rem;
        line-height: 1.5rem;
        height: 3.1rem;
    }

    .cta a {
        display: block;
    }

    .profile {
        margin-top: 15%;
    }

    .content {
        font-size: 1.15rem;
        padding: 5% 5% 0;
    }

    img {
        width: 100%;
    }

    .social,
    .share {
        display: flex;
        align-items: baseline;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    .btn {
        min-width: 25%;
        margin: 0.4375rem;
    }

    form input {
        max-width: 55%;
    }

    form input,
    form button {
        font-size: 1rem;
    }

    .blog-card {
        flex-wrap: wrap;
    }

    @supports (display: grid) {
        .blog-card {
            grid-template-columns: auto;
            grid-template-rows: 12rem 1fr;
        }
    }

    .footer {
        font-size: 1rem;
        margin-top: 3%;
        padding-bottom: 5%;
        position: relative;
    }

    .footer .footer-copyright {
        float: left;
        margin-left: 5%;
    }

    .footer .footer-link {
        float: right;
        margin-right: 5%;
    }

    .pagination {
        margin-bottom: 15%;
        font-size: 1.4rem;
    }
}