/* Default dark theme */
:root {
	--bg: #121415;
	--bg-rgb: 18, 20, 21;
	--fg: #e1dfdc;
	--link: #7fdce8;
}

body.light {
	--bg: #e1dfdc;
	--bg-rgb: 225, 223, 220;
	--fg: #121415;
	--link: #1a6d7a;
}

body.eink {
	--bg: #f5f5f0;
	--bg-rgb: 245, 245, 240;
	--fg: #222;
	--link: #555;
}

body {
	font-family: "VT323", monospace;
	background: var(--bg);
	color: var(--fg);
	overflow-wrap: break-word;
	word-break: break-word;
}

.theme-toggle {
	position: fixed !important;
	top: 1rem;
	right: 1rem;
	z-index: 9999;
	cursor: pointer;
	padding: 0.3rem 0.5rem;
	border: 1px solid var(--fg);
	background: var(--bg);
	color: var(--fg);
	font-family: inherit;
	font-size: 1rem;
}

/* I haven't found a nice place to put the color scheme toggle when the viewport is small */
@media screen and (max-width: 700px) {
	.theme-toggle {
		display: none;
	}
}

main {
	max-width: 1000px;
	margin: auto;
}

.regular {
	max-width: 700px;
	margin: auto;
}

img {
	max-width: 100% ;
}

header h1 {
	text-align: center ;
}

footer {
	text-align: center ;
	clear: both ;
}

.last-updated {
	text-align: center;
}

a {
    color: var(--link);
}

#navbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style-type: none;
    padding: 0;
    font-size: large;
    margin: 0;
    padding-bottom: 1rem;
}

#navbar > li {
    padding-left: 1rem;
    padding-right: 1rem;
}

/* For TAGLIST.HTML */
.taglist {
	text-align: center ;
	clear: both ;
}

/* For NEXTPREV.HTML */
#nextprev {
	/* The container for both the previous and next articles. */
}
#prevart {
	float: left ;
	text-align: left ;
}
#nextart {
	float: right ;
	text-align: right ;
}
#nextart,#prevart {
	max-width: 33% ;
}


.float-right {
    width: 200px;
    margin: auto;
    position: relative;
}

.float-right img {
    border: 1px solid var(--fg);
}

.float-right figcaption,
.float-right p,
.float-right span {
    position: absolute;
    bottom: 0.5rem;
    left: 0;
    right: 0;
    text-align: center;
    background: rgba(var(--bg-rgb), 0.2);
    color: var(--fg);
    /* padding: 0.3rem; */
}
@media screen and (min-width: 767px) {
    .float-right {
        width: 220px;
        float: right;
    }
}

.img-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

#firework {
    width: 150px;
    margin: auto;
    border: 2px solid gray;
}