@import url("https://cdn.jsdelivr.net/npm/water.css@2.1.1/out/water.css");

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(stockholm-opensans-light.woff) format("woff");
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(stockholm-opensans-regular.woff) format("woff");
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(stockholm-opensans-bold.woff) format("woff");
}


.ubuntu-condensed-regular {
  font-family: "Ubuntu Condensed", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.comic-relief-regular {
  font-family: "Comic Relief", system-ui;
  font-weight: 400;
  font-style: normal;
}

.comic-relief-bold {
  font-family: "Comic Relief", system-ui;
  font-weight: 700;
  font-style: normal;
}

/* Variables */


:root {
    --bg: #11283a;
    --text:#fafafa;
    --font: "Comic Relief", "Open Sans", sans-serif;
	--font-sans: Verdana, Open Sans, sans-serif;
	--font-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
	--font-mono: font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
	/*--font: var(--font-sans);*/
	--reg-weight: 400;
	--bold-weight: 700;
	--transition: 0.2s;
	--link-active: inherit;
	--heading: #0080ff;
	--link: blue;
}

body {
    color: var(--text);
    background-color: var(--bg);
	font-family: var(--font);
	font-weight: var(--reg-weight);
	font-size: 16px;
}

h1,h2,h3,h4,h5,h6,b,strong {
    color: var(--text);
	font-weight: var(--bold-weight);
}
td{background-color: var(--bg); border-bottom: 1px solid #11285b; vertical-align: baseline;}
code,pre,tt,details,summary {
    background-color: #333;
	font-family: var(--font-mono);
	font-size: 1em;
	font-weight: 400;
}

/* LAYOUTS */

/* Navbar */

header nav ul {
	list-style-type: none;
	padding-left: 0px;
}
header nav ul li {
	display: inline-block;
	padding-right: 10px;
}
/* Header */

.header .sitename h1 {
    font-size: 1.6em;
    font-weight: 600;
}
.header .sitename h1 a {
    color: var(--heading);
    text-decoration: none;
}
.header .sitename p {
    color: var(--text);
}
.header .sitename-logo {
    display: inline-block;
    background-image: url(rule.png);
    background-size: cover;
    width: 28px;
    height: 28px;
    margin: 0 10px 5px 0;
    vertical-align: middle;
}
hr {
    background-color: 1px solid #333;
}
button {
    background-color: #11284c;
    border: 1px solid #11284f;
}
botton a:link {
    color: #fff;
}
botton a:hover {
    color: #fff;
}
/*Navigation*/

navigation {
    margin-top: 1em;
    margin-bottom: 1em;
    line-height: 2;
}
.navigation a {
    /*color: var(--text);*/
    border-bottom: solid 1px var(--bg);
    text-decoration: none;
    padding: 0;
    /*color: #00b0ff;*/
}
.navigation a:hover {
    border-bottom: solid 1px var(--link);
}
.navigation ul {
    margin: 0 -0.3em;
    padding: 0;
    list-style: none;
}
.navigation li {
    display: inline;
    padding: 0 0.3em;
}
.navigation li a.active {
    border-bottom: solid 1px var(--link-active);
}
.navigation ul li {
    display: inline-block;
    position: relative;
    cursor: pointer;
    margin: 0;
}
.navigation ul li ul {
    padding: 0.3em;
    position: absolute;
    width: 13em;
    background: var(--bg);
    z-index: 100;
    display: none;
}
.navigation ul li ul {
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.2);
}
.navigation ul li ul li {
    display: block;
}
.navigation > ul > li:hover > ul {
    display: block;
}
.navigation-banner {
    clear: both;
}

/* Page-index */
/* thanks https://every-layout.dev/layouts/sidebar/ */

/*.layout-doc main {*/
/*	display: flex;*/
/*	flex-wrap: wrap;*/
/*	gap: 1rem;*/
/*}*/

/* Page-index sidebar */

/*.layout-doc main nav {*/
/*	flex-basis: 20ch;*/
/*	flex-grow: 1;*/
/*}*/
/*.layout-doc main nav ol {*/
/*	/*margin-top: 1.5em;*/
/*}*/

/* Main content */

.main img {
border-radius: 20px;
}
/* LISTS */

ul, ol {padding: 0 1em;}

/* Images */

/* Homepage header image */
header > img {
	margin-top: 1.5em;
}
header > img+h1 {margin-top: 12px;}

figcaption {font-size: smaller;}

/* Footer */

footer {font-size: 0.9em;}

body footer {text-align: center;}

/* Extension classes */

	.anchor-link {
		opacity: 0;
	}
	:hover > .anchor-link {
		opacity: 0.9;
	}

	/* Wiki */

.layout-wiki .entry header p {
	font-size: 0.9em;
}

	/* Previous/next extension */

.previousnext {margin-bottom: 15px;}
.previous + .next {float: right; display: inline-block;}

	/* Breadcrumbs */

.breadcrumb {
	background-color: var(--background);
	border-radius: 1em;
	display: inline-block;
	font-size: smaller;
	padding: 1em;
	margin-bottom: 1em;
}