/* flotsam.css */
/*  */
/* Smooth scrolling. Respect users who prefer less motion. */
/* https://maelstromwebservices.com/blog/tutorials/create-a-smooth-scrolling-anchor/ */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* LAYOUT, ALIGNMENT, ET CETERA */
/* ============================ */

.fs-inline-heading {
    display: inline;
    font-size: 1em;
}
.fs-narrow-content {
	min-width: 300px;
	max-width: 40vw;
	margin-left: auto;
	margin-right: auto;
}

.fs-float-left {
    float: left;
    margin-right: 0.5em;
}

.fs-float-right {
    float: right;
    margin-left: 0.5em;
}

.fs-fixed {
    position: fixed;
    top: 0;
    right: 0;
}

.fs-max-200 {
	max-width: 200px;
}

.fs-max-300 {
	max-width: 300px;
}

.fs-max-400 {
	max-width: 400px;
}

.fs-max-500 {
	max-width: 500px;
}

.fs-flex-center-content {
    align-content: center;
}

/* BACKGROUNDS, BORDERS */
/* ==================== */

.fs-center-background {
    background-position: center;
    background-repeat: no-repeat;
}

.fs-background-contain {
    background-size: contain;
}

.fs-background-cover {
    background-size: cover;
}

.fs-fixed-background {
    background-attachment: fixed;
}

.fs-pastel-brown-card {
	background-color: rgb(130, 102, 82);
	border-color: rgb(89, 72, 59);
}

.fs-pastel-cyan-card {
	background-color: rgb(78, 185, 170);
	border-color: rgb(67, 130, 121);
}

.fs-pastel-hotpink-card {
	background-color: rgb(201, 132, 204);
	border-color: rgb(184, 87, 187);
}

.fs-pastel-mauve-card {
	background-color: rgb(142, 114, 157);
	border-color: rgb(102, 78, 125);
}

.fs-pastel-orange-card {
	background-color: rgb(189, 125, 79);
	border-color: rgb(140, 94, 61);
}

.fs-pastel-chartreuse-card {
	background-color: rgb(167, 191, 79);
	border-color: rgb(136, 153, 73);
}

.fs-pastel-green-card {
	background-color: rgb(116, 181, 120);
	border-color: rgb(75, 127, 79);
}

.fs-pastel-yellow-card {
	background-color: rgb(236, 227, 153);
	border-color: rgb(185, 175, 95);
}

.fs-pastel-blue-card {
	background-color: rgb(80, 120, 159);
	border-color: rgb(54, 79, 104);
}

.fs-fat-border {
	border-style: solid;
	border-width: 0.5em;
}

.fs-opaque-box-50 {
    background-color: rgba(0, 0, 0, 0.5);
}

.fs-opaque-box-70 {
    background-color: rgba(0, 0, 0, 0.70);
}

.fs-cyan-ridge-box {
	border-style: ridge;
	border-color: cadetblue;
	border-width: 5px;
}

.fs-green-ridge-box {
	border-style: ridge;
	border-color: #64db4c;
	border-width: 5px;
}

.fs-gold-ridge-box {
	border-style: ridge;
	border-color: gold;
	border-width: 5px;
}

.fs-sienna-ridge-box {
	border-style: ridge;
	border-color: sienna;
	border-width: 5px;
}

.fs-silver-ridge-box {
	border-style: ridge;
	border-color: gray;
	border-width: 5px;
}

/* TEXT DECORATIONS */
/* ================ */

body {
    font-family: Georgia, serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: cursive !important;
}

.fs-hilite-anchor:target {
	color: black;
	background-color: gold;
}

.fs-italic {
    font-style: italic;
}

.fs-underline {
	text-decoration: underline;
}

.fs-new-thing {
    color: chartreuse;
    text-decoration: underline;
}

.fs-full-justified-text {
	text-align: justify;
	text-justify: inter-word;
}

.fs-text-lightpink {
	color: lightpink;
}

.fs-text-lightblue {
	color: lightsteelblue;
}

.fs-text-lightgreen {
	color: darkseagreen;
}

.fs-yellow-code {
	background-color: black;
	color: yellow;
}

.fs-rpg-rolls {
    vertical-align: super;
    color: #d4d2aa;
    display: none;
    margin-top: 1em;
}