body {
padding:0;margin:0;
overflow-x:hidden;
/*this^ shouldn't ever matter but juuuuuuust in case yk*/
background:url(../site-pics/sycamore5.gif) top left;
background-size:calc(100% - 137.02px);
}
.header {
width:100%;padding:0;margin:0;
height:144px;
background:url(../site-pics/pawtiles.png) repeat;
display:flex;
z-index: 4
}
.header > img {
height:144px;width:auto
}
.banner {
color:#1c2439;
padding:5px 15px;
min-width:400px;
max-width:600px;
height:130px;
margin:auto;
background:url(../site-pics/pawtiles.png) repeat;
filter: drop-shadow(0 0 10px #00000088);
}
.banner img {
float:right;
background:linear-gradient(270deg,#f3fcff,transparent);
}
.banner h1, .banner h2 {
vertical-align:middle;
font-size:2.1em;
}
.banner h2 {font-size:1.25em;}

.header-hr {
width:calc (100% - 5px);
height:10px;
background-color:#104111;
border-bottom:5px solid #7c715b;
z-index:5;
filter: drop-shadow(0 0 10px #00000088);
}
.body {
display:flex;flex-direction:row-reverse;
}
.header-buttons {
padding:5px;
min-height:100%;max-width:150px;
z-index:3;
filter: drop-shadow(0 0 -10px #00000088);
}
.header-buttons, .sticky {
background-color:#104111;
display:flex;
flex-direction:column;
justify-content:top;
}
.sticky {position:sticky;top:0;left:0;
gap:20px;border-bottom:20px solid #104111}

.header-buttons a {
color:#f3fcff;
text-decoration:none;
font-size:1.2em;
}
.header-buttons hr {
margin:-5px;border:2.5px solid #7c715b
}
.header-buttons img {   /*also applies to the banner tho isn't visible since that's solid*/
background:linear-gradient(0deg, #e0e0cd 0%, transparent 100%);
width:100%;
}
.zigzag-footer {margin:auto;flex-grow:1;width:75%;background-image:url('../site-pics/zigzags.png')}

.top, .bottom {
width:0px;height:0px;
border-left:20px solid transparent;border-right:20px solid transparent;
z-index:10;
}
.top {
position:fixed;bottom:60px;right:20px;
border-bottom:35px solid #f0f8fb;
}
.top > p {
position: absolute;left:-8px;top:4px;font-size:12px
}
.bottom {
position:fixed;bottom:20px;right:20px;
border-top:35px solid #f0f8fb;
}
.bottom > p {
position: absolute;left:-16px;top:-44px;font-size:12px
}

.content {
color:#1c2439;
margin:0 auto;padding:5px;
padding-top:10px;
width:1000px;
background:linear-gradient(90deg, #f3fcffaa 0%, #f3fcffee 40%, #f3fcffee 60%, #f3fcffaa 100%);
filter: drop-shadow(0 0 10px #00000088);
}
.wider.content {
width:1200px;
}
.bg-colored {
background-color:#f3fcff;
}
h3 {margin-bottom:-2px;margin-top:0}
pre {display:inline;color:#2244aa;background-color:#f3fcff99;padding:5px}

.fomalhaut-basket {
float:right
}
.quick-links {
color:#2244aa;
margin:5px;
}
.quick-links hr {
margin:0;
border:1px solid #2244aa;
}
.quick-links > a {
color:#2244aa;
text-decoration:none;
}
.quick-links > a:hover {
text-decoration:underline
}
@media screen and (max-width: 500px) {			/*phone mode, sidebar --*/
	.body {display:block;}	
	.header-buttons, .sticky {
		flex-direction:row;flex-wrap:wrap;justify-content:space-evenly;
		min-width:100%;max-width:100%;border:none
	}
	.header-buttons img, .zigzag-footer {display:none}
	body {background:url(../site-pics/sycamore5h.gif) top left;}
}
@media screen and (max-width: 574px) {			/*phonelike mode, sidebar |*/
/*574:when first tree appears. 718: when both are on screen*/
	.header > img {display:none}
	.banner {margin-left:auto;margin-right:0;}
	figure {width:calc(100% - 10px);margin:0}
	/*the preface in notes/setz.html switches here*/
}
@media screen and (max-width: 1160px) {			/*halfed mode, sidebar |*/
	.content {width:100%}
}
@media screen and (max-width:1360px) {
	body {background-size:100%;}
}
@media screen and (max-width: 1560px) {
	.wider.content {width:100%}
}