base.css

html{height:100vh;line-height:1}body{color:#135;font-family:serif;font-size:large;margin:0}body::after{content:'';position:fixed;top:0;height:100vh;left:0;right:0;z-index:-1;background-image:url("./images/bkgr.png");background-position:bottom;background-repeat:no-repeat;background-size:cover}a{border-bottom:2px solid rgba(222,233,255,0.6);font-family:sans-serif;text-decoration:none}a:hover,a:focus{border-bottom:2px solid red}.btn{background:rgba(170,231,255,0.4);border-radius:0.25rem;box-shadow:1px 2px 3px rgba(0,0,0,0.2);border:1px solid #fff;border-bottom-width:2px;display:inline-block;font-family:monospace, serif;margin:auto;padding:0 0.5rem}p{line-height:1.4}section{max-width:30rem;margin:2rem auto}.fancy footer,html[dir] footer{bottom:0;font-size:0.8em;height:28vh;line-height:1.8;margin-top:1rem;position:fixed;text-align:center;width:100%}.fancy footer .stack,html[dir] footer .stack{color:#000;font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;font-weight:800;margin:0.5rem;border:0;text-shadow:1px 2px 3px #fff}.fancy footer .stack::before,html[dir] footer .stack::before{content:'🎸';font-size:1.3rem}.fancy footer .loc,html[dir] footer .loc{background:rgba(222,233,255,0.6);bottom:0;border-radius:0.25rem;margin:0;position:absolute;width:100%}@media (max-height: 38rem){.fancy footer,html[dir] footer{min-height:12.66667rem;position:relative}}@media (max-width: 19rem){.fancy footer .loc,html[dir] footer .loc{display:none}}.fancy hr,html[dir] hr{background-image:linear-gradient(45deg, white, rgba(222,233,255,0.6), white);border:0;height:1.6px}.fancy main,html[dir] main{background:linear-gradient(180deg, rgba(255,255,255,0.666) 88%, rgba(255,255,255,0) 100%) !important;height:72vh;overflow:auto;padding:0 1rem;text-align:center}.fancy nav,html[dir] nav{color:#fff;margin:0.5rem}.fancy nav a.btn,html[dir] nav a.btn{margin:0.1rem}@media (max-height: 38rem){.fancy main,html[dir] main{height:auto;margin-bottom:3rem}}.fancy .scrollshade,html[dir] .scrollshade{background-image:linear-gradient(to bottom, rgba(0,0,0,0.1), transparent),linear-gradient(to top, rgba(0,0,0,0.1), transparent);background-attachment:scroll, scroll;background-repeat:no-repeat;background-position:top, bottom;background-size:100% .5rem,100% .5rem;overflow:auto}.fancy .scrollshade>*,html[dir] .scrollshade>*{background-image:linear-gradient(0deg, rgba(255,255,255,0), #fff 50%),linear-gradient(0deg, #fff 50%, rgba(255,255,255,0)),linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)),linear-gradient(90deg, rgba(255,255,255,0), #fff 70%),radial-gradient(farthest-side at left, rgba(0,0,0,0.1), transparent),radial-gradient(farthest-side at right, rgba(0,0,0,0.1), transparent);background-attachment:local, local, local, local, scroll, scroll;background-repeat:no-repeat;background-position:top, bottom, left, right, left, right;background-size:100% 1rem,100% 1rem,4rem 100%,4rem 100%,1rem 100%,1rem 100%;display:block;margin:0;overflow:auto}