@font-face {
    font-family: "Recursive Sans Linear Static";
    src: url("fonts/RecursiveSansLnrSt-Regular.woff2");
}
@font-face {
    font-family: "Recursive Sans Linear Static";
    src: url("fonts/RecursiveSansLnrSt-Bold.woff2");
    font-weight: bold;
}
@font-face {
    font-family: "Recursive Sans Linear Static";
    src: url("fonts/RecursiveSansLnrSt-Italic.woff2");
    font-style: italic;
}
@font-face {
    font-family: "Recursive Sans Linear Static";
    src: url("fonts/RecursiveSansLnrSt-BoldItalic.woff2");
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "Capriola";
    src: url("fonts/Capriola-Regular.ttf");
}

body {
    background-image: url("backgrounds-icons/hexagons-static.png");
    background-size: 339px auto;
    background-repeat: repeat;
    background-attachment: fixed;
}

canvas {
    position: fixed;
    left: 0px;
    top: 0px;
    margin: 0;
    padding: 0;
    border: 0px solid cornflowerblue;
    z-index: -1;
}

#main {
    /* background-color: #EAFAF5; */
    max-width: 850;
    padding: 25px;
    margin: auto;
    color: #000000;
    padding-top: 0px;
}

p,
div {
    font-family: "Recursive Sans Linear Static", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Capriola", sans-serif;
}

h1 {
    color: royalblue;
}

h2 {
    /*border-top: solid 2px lightskyblue;*/
    padding-top: 4px;
    margin: 12px;
}

.small {
    font-size: smaller;
    text-align: center;
    font-style: italic;
}

#toggle-desc {
    max-width: 220;
    /*margin: auto;*/
    background-color: cornflowerblue;
    color: white;
    padding: 8px;
    border-radius: 12px;
    position: sticky;
    top: 12px;
}

#toggle-desc > div {
    width: fit-content;
    margin: 0;
    padding: 0;
}

label.toggle {
    float: right;
    position: relative;
    top: 8px;
}

input.toggle {
    visibility: hidden;
}
span.toggle {
    background-image: url("backgrounds-icons/checkbox-off.svg");
    background-size: cover;
    position: absolute;
    top: -6px;
    left: -14px;
    width: 32px;
    height: 32px;
	cursor: pointer;
}

input.toggle:checked ~ span.toggle {
    background-image: url("backgrounds-icons/checkbox-on.svg");
}

div.narration {
    font-style: italic;
}

div.boxed {
    padding: 0px;
    margin: 12px 0px;
    border: solid 2px cornflowerblue;
    border-radius: 12px;
    background-color: #ffffff;
}
div.boxed p,
div,
h1,
h3,
h4,
h5,
h6 {
    padding: 12px;
    margin: 0px;
}
div.boxed > * > p {
    padding: 0px;
}

div.boxed > *:first-child {
    margin-top: 0px;
}
div.boxed > *:last-child {
    margin-bottom: 0px;
}

div.boxed > h1 {
    background-color: powderblue;
    border-bottom: solid 2px cornflowerblue;
    border-radius: 10px;
}

a {
    color: darkcyan;
    border-radius: 6px;
}
a:visited {
    color: slateblue;
}
a:hover {
    background-color: powderblue;
}

img {
    width: 100%;
    height: auto;
    margin: 4px 0px;
    border: 2px solid powderblue;
    border-radius: 9px;
}

div.pictures {
    padding: 0px;
    display: block;
    margin: auto;
    width: 70%;
}

div.pictures.left {
    display: inline-block;
    width: 47.8%;
    margin-right: 4px;
}

#lantern {
    width: 48.2%;
    margin: 4px 0px 4px 4px;
}