style.css

/**
 * Theme Name: Octothorpe
 * Theme URI: https://github.com/lsquo/octothorpe
 * Description: Octothorpe is a theme for blogging.
 * Version: 1.1.5
 * Author: Lsquo
 * Author URI: https://lsquo.com
 * Text Domain: octothorpe
 * Tags: one-column, accessibility-ready, custom-menu, featured-images, footer-widgets, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, blog
 * License: GPLv2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:focus {
	outline: 0.1rem dashed #4d90fe;
}

html {}

body {
	font-family: 'Noto Serif', serif;
	font-size: 1.2rem;
	line-height: 1.8;
	overflow-wrap: break-word;
	padding: 3rem 6%;
	word-wrap: break-word;
}

header {}

footer {}

article {}

article::after {
	clear: both;
	content: "";
	display: block;
}

section {}

nav {
	margin: 0 0 2rem 0;
}

aside {}

div {}

span {}

br {
	line-height: 1;
}

hr {
	margin: 0 0 2rem 0;
}

h1 {
	clear: both;
	font-family: 'Boogaloo', cursive;
	font-size: 4rem;
	font-weight: 400;
	line-height: 1;
	margin: 0 0 2rem 0;
}

h2 {
	clear: both;
	font-family: 'Boogaloo', cursive;
	font-size: 3rem;
	font-weight: 400;
	line-height: 1;
	margin: 0 0 2rem 0;
}

h3 {
	clear: both;
	font-family: 'Boogaloo', cursive;
	font-size: 2.7rem;
	font-weight: 400;
	line-height: 1;
	margin: 0 0 2rem 0;
}

h4 {
	clear: both;
	font-family: 'Boogaloo', cursive;
	font-size: 2.4rem;
	font-weight: 400;
	line-height: 1;
	margin: 0 0 2rem 0;
}

h5 {
	clear: both;
	font-family: 'Boogaloo', cursive;
	font-size: 2.1rem;
	font-weight: 400;
	line-height: 1;
	margin: 0 0 2rem 0;
}

h6 {
	clear: both;
	font-family: 'Boogaloo', cursive;
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 1;
	margin: 0 0 2rem 0;
}

p {
	margin: 0 0 2rem 0;
}

a {}

a:link {
	color: #0000ee;
	text-decoration: underline;
}

a:visited {
	color: #551a8b;
	text-decoration: underline;
}

address {
	font-style: normal;
	margin: 0 0 2rem 0;
}

ol {
	padding: 0 0 0 3rem;
	margin: 0 0 2rem 0;
}

ul {
	list-style: square;
	padding: 0 0 0 3rem;
	margin: 0 0 2rem 0;
}

li {}

dl {}

dt {
	text-decoration: underline;
}

dd {
	margin: 0 0 2rem 0;
}

blockquote {
	font-style: italic;
	margin: 0 0 2rem 0;
	padding: 0 2rem 0 2rem;
	quotes: none;
}

blockquote::before {
	content: none;
}

blockquote::after {
	content: none;
}

q {}

cite {
	font-style: italic;
}

em {
	font-style: italic;
}

strong {
	font-weight: bold;
}

small {
	font-size: 90%;
}

s {
	text-decoration: line-through;
}

ins {
	text-decoration: underline;
}

del {
	text-decoration: line-through;
}

mark {
	background-color: #ffff00;
}

sub {
	vertical-align: sub;
}

sup {
	vertical-align: super;
}

i {
	font-style: italic;
}

b {
	font-weight: bold;
}

u {
	text-decoration: underline;
}

dfn {
	font-style: italic;
}

abbr {
	font-variant: none;
	text-decoration: dotted underline;
}

time {}

pre {
	background-color: #fafafa;
	border: 0.1rem dashed #555;
	font-family: 'Source Code Pro', monospace;
	font-size: 80%;
	margin: 0 0 2rem 0;
	padding: 1rem 1.8rem;
	white-space: pre-wrap;
}

code {
	font-family: 'Source Code Pro', monospace;
}

samp {
	font-family: 'Source Code Pro', monospace;
}

kbd {
	font-family: 'Source Code Pro', monospace;
}

var {
	font-style: italic;
}

figure {
	margin: 0 0 2rem 0;
}

figcaption {
	font-size: 1rem;
	margin: 0 0 1rem 0;
}

img {
	border-style: none;
	display: block;
	height: auto;
	margin: 0 0 2rem 0;
	max-width: 100%;
}

iframe {
	margin: 0 0 2rem 0;
	max-width: 100%;
}

embed {
	margin: 0 0 2rem 0;
	max-width: 100%;
}

object {
	margin: 0 0 2rem 0;
	max-width: 100%;
}

video {
	margin: 0 0 2rem 0;
	max-width: 100%;
}

audio {
	margin: 0 0 2rem 0;
	max-width: 100%;
}

canvas {
	margin: 0 0 2rem 0;
	max-width: 100%;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0 0 2rem 0;
}

caption {
	font-size: 1rem;
	margin: 0 0 1rem 0;
	text-align: left;
}

colgroup {}

col {}

tbody {}

thead {}

tfoot {}

tr {}

td {
	border-color: #555;
	border-style: dashed;
	border-width: 0.1rem;
	padding: 0.2rem 1rem;
	text-align: left;
}

th {
	background-color: #eee;
	border-color: #555;
	border-style: dashed;
	border-width: 0.1rem;
	font-weight: 400;
	padding: 0.2rem 1rem;
	text-align: left;
}

form {}

fieldset {
	border-color: #555;
	border-style: dashed;
	border-width: 0.1rem;
	margin: 0 0 2rem 0;
	padding: 2rem 2rem 0 2rem;
}

legend {}

label {
	display: block;
	margin: 0 0 1rem 0;
}

input {
	border-color: #555;
	border-style: dashed;
	border-width: 0.1rem;
	font-family: inherit;
	font-size: inherit;
	margin: 0 0 2rem 0;
	padding: 0.5rem 1rem;
	width: 100%;
}

input[type="button"] {
	background-color: #eee;
	cursor: pointer;
	padding: 0.5rem 3rem;
	width: auto;
}

input[type="checkbox"] {
	margin: 0;
	padding: 0;
	width: auto;
}

input[type="color"] {
	background-color: transparent;
	height: 2.5rem;
	padding: 0;
	width: 2.5rem;
}

input[type="date"] {}

input[type="datetime"] {}

input[type="datetime-local"] {}

input[type="email"] {}

input[type="file"] {}

input[type="hidden"] {}

input[type="image"] {}

input[type="month"] {}

input[type="number"] {}

input[type="password"] {}

input[type="radio"] {
	margin: 0;
	padding: 0;
	width: auto;
}

input[type="range"] {
	border-style: none;
	padding: 0;
}

input[type="reset"] {
	background-color: #eee;
	cursor: pointer;
	padding: 0.5rem 3rem;
	width: auto;
}

input[type="search"] {}

input[type="submit"] {
	background-color: #eee;
	cursor: pointer;
	padding: 0.5rem 3rem;
	width: auto;
}

input[type="tel"] {}

input[type="text"] {}

input[type="time"] {}

input[type="url"] {}

input[type="week"] {}

button {
	background-color: #eee;
	border-color: #555;
	border-style: dashed;
	border-width: 0.1rem;
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
	margin: 0 0 2rem 0;
	padding: 0.5rem 3rem;
}

textarea {
	border-color: #555;
	border-style: dashed;
	border-width: 0.1rem;
	font-family: inherit;
	font-size: inherit;
	margin: 0 0 2rem 0;
	padding: 1rem;
	width: 100%;
}

select {
	background-color: #fff;
	border-color: #555;
	border-style: dashed;
	border-width: 0.1rem;
	font-family: inherit;
	font-size: inherit;
	margin: 0 0 2rem 0;
	padding: 0.5rem 1rem;
	width: 100%;
}

optgroup {}

option {}

output {}

progress {}

meter {}

details {}

summary {}

figure img {
	margin: 0 0 1rem 0;
}

#brand {
	margin: 0 auto;
	max-width: 6rem;
}

ul.menu {
	list-style: none;
	padding: 0;
	text-align: center;
}

ul.menu li {
	display: inline;
	margin: 0 1rem;
	white-space: nowrap;
}

.tagcloud {
	margin: 0 0 2rem 0;
}

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

.post-list li {
	margin: 0 0 2rem 0;
}

.post-list time {
	display: block;
}

.comment-list {
	list-style: none;
	padding: 0;
}

.comment-list ul.children {
	list-style: none;
	padding: 0 0 0 1rem;
}

#comment {
	margin: 0;
}

.sticky time {
	color: #e60000;
}

.mejs-container {
	margin: 0 0 2rem 0;
}

.current-menu-item a {
	color: #000;
}

.sticky {}

.wp-caption {}

.wp-caption-text {}

.screen-reader-text {
	clip: rect(0.1rem, 0.1rem, 0.1rem, 0.1rem);
	height: 0.1rem;
	overflow: hidden;
	position: absolute;
	width: 0.1rem;
}

.screen-reader-text:focus {
	clip: auto;
	height: auto;
	overflow: visible;
	position: static;
	width: auto;
}

.gallery-caption {}

.bypostauthor {}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

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

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

.gallery {
	margin: 0 0 2rem 0;
}

.gallery-item {
	display: inline-block;
	margin: 0;
	text-align: center;
	vertical-align: top;
	width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-item img {
	margin: 0 auto 1rem auto;
}

@media (min-width: 34em) {
	.comment-list ul.children {
		padding: 0 0 0 2rem;
	}
}

@media (min-width: 68em) {
	body {
		padding: 3rem 20%;
	}

	blockquote {
		padding: 0 6rem;
	}
}