:root {
--bg: black;
--text: rgb(239, 225, 204); /*--text--*/
--first: gold; /*--title, bigletts--*/
--second: rgb(255, 136, 136); /*--links--*/
--third: rgb(237, 182, 93); /*--headers--*/
--fourth: rgb(217, 182, 241); /*--tiny text--*/
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: var(--text);
font-weight: normal;
list-style: none;
text-decoration: none;
image-rendering:pixelated;
}

/*--FONTS--*/
@font-face {
    font-family: "plain11";
    src: url("/pics/assets/fonts/RuneScape-Plain-11.ttf") format("truetype");}
@font-face {
    font-family: "plain12";
    src: url("/pics/assets/fonts/RuneScape-Plain-12.ttf") format("truetype");}
@font-face {
    font-family: "quill8";
    src: url("/pics/assets/fonts/RuneScape-Quill-8.ttf") format("truetype");}
@font-face {
    font-family: "quill";
    src: url("/pics/assets/fonts/RuneScape-Quill.ttf") format("truetype");}

/*--BORDERS--*/
.braid-border {
border: 20px solid;
border-image: url("/pics/assets/borders/braidborder.png") 
    10 / 20px / 0 round;} 
.flower-border {
border: 15px solid;
border-image: url("/pics/assets/borders/flowerborder.png") 
    10 / 15px / 0 round;} 
.fmn-border {
border: 15px solid;
border-image: url("/pics/assets/borders/fmnborder.png") 
    10 / 15px / 0 round;}
.goldiflower-border {
border: 34px solid;
border-image: url("/pics/assets/borders/goldiflowerborder.png") 
    34 / 34px / 0 round;}
.jelly-border {
border: 24px solid;
border-image: url("/pics/assets/borders/jelly-border2.png") 
    16 / 24px / 0 round;}
.salmon-border {
border: 30px solid;
border-image: url("/pics/assets/borders/salmonborder.png") 
    30 / 30px / 0 round;}
.vine-border {
border: 15px solid;
border-image: url("/pics/assets/borders/vine-border.png") 
    10 / 15px / 0 round;}
.vinewrap-border {
border: 20px solid;
border-image: url("/pics/assets/borders/vinewrap.png") 
    16 / 32px / 0 round;}
.waves-border {
border: 22px solid;
border-image: url("/pics/assets/borders/wavesborder.png") 
    11 / 22px / 0 round;}





.paper-border {
border: 10px solid;
border-image: url("/pics/assets/borders/paperborder.png")
    10 / 10px / 0 round;}

.med-border {
border: 27px solid;
border-image: url("/pics/assets/borders/medborder.png") 
    18 / 27px / 0 round;}

.knot-border {
border: 32px solid;
border-image: url("/pics/assets/borders/knotborder2.png") 
    16 / 32px / 0 round;}
.knot-banner {
border-top: 32px solid;
border-bottom: 32px solid;
border-image: url("/pics/assets/borders/knotborder2.png");
border-image-slice: 16;
border-image-repeat: round;}

.rose-border {
border: 15px solid;
border-image: url("/pics/assets/borders/rose-border.png") 
    10 / 15px / 0 round;}
.rose-banner {
border-top: 30px solid;
border-bottom: 30px solid;
border-image: url("/pics/assets/borders/rose-border.png");
border-image-slice: 10;
border-image-repeat: round;}

.dandelion-border {
border: 15px solid;
border-image: url("/pics/assets/borders/dandelionborder.png") 
    10 / 15px / 0 round;}
.dandelion-banner {
border-top: 30px solid;
border-bottom: 30px solid;
border-image: url("/pics/assets/borders/dandelionborder.png");
border-image-slice: 10;
border-image-repeat: round;}

.flower-bottom {
border-bottom: 15px solid;
border-image: url("/pics/assets/borders/flowerbottom.png") 
    100 / 15px / 0 round;}

.sunflower-border {
border: 24px solid;
border-image: url("/pics/assets/borders/sunflowersideborder.png") 
    12 / 24px / 0 round;
border-top: none;
border-bottom: none;}

/*--HEADERS--*/
h1 {
text-align: center;
font-family: "quill";
font-size: 4rem;
color: var(--first);}

h2 {
text-decoration: underline dotted var(--third) .1rem;
font-family: "quill8";
font-size: 2rem;
color: var(--third);}

h3 {
font-size: 1.5rem;
color: var(--fourth);}

/*--TEXT STUFF--*/
p {
text-align: justify;
margin: .5rem 0;}

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

a:hover {
background-color: var(--text);
color: var(--bg);}

.illustrated {
height: 5.75rem;
float: left;
margin-right: .25rem;}

.bigletter {
float: left; 
font-size: 5rem; 
line-height: 2.5rem;
font-family: "quill";
color: var(--first);}

span.red {
color: red;}

span.green {
color: green;}

span.blue {
color: blue;}

/*--CONTENT--*/
body {
padding: .5rem;
font-family: "plain11";
font-size: 2rem;
background-color: var(--bg);}

main {
width: 900px;
max-width: 100%;
margin: 0 auto 6rem;
padding: .5rem;
border: 10px solid;
border-image: url("/pics/assets/borders/paperborder.png")
    5 / 10px / 0 round;}

div {
display: flow-root;}

ol, ul {
padding: .5rem;}

li {
color: inherit;}

ol {
margin: auto;
width: fit-content;
text-align: center;}

ul li {
list-style: "+" inside;
margin-left: 1rem;}

ul.recipe li {
list-style: decimal inside;}

.gap {
margin-bottom: 1rem;}

/*--IMAGE STUFF--*/
img {
max-width: 100%;}

.imgdesc {
text-align: center;
padding: .5rem;
width: 25%;}
.imgdesc img {
width: 100%;}

.right {
float: right;}
.left {
float: left;}

.gallery {
clear: both;
display: flex;
flex-wrap: wrap;
justify-content: center;}

.art.gallery img {
height: 256px;
padding: .5rem;}

.border.art.gallery img {
margin: .5rem;}



@media screen and (orientation:portrait) {
main{width:auto;}
h2{text-align:center;}
.imgdesc{display:block; width:85%; max-width:100%; float:none; margin:.5rem auto;}
.gallery .imgdesc{width:50%;}
.gallery .imgdesc.wide{width:auto;}
.art.gallery img{width:85%; height:auto;}
#page {width:auto;}
}