pages/styles/millironx.min.css

:root{color-scheme:light dark;--prickly-pear-yellow:#735f02;--eclipse-gray:#3a3a3a;--pumpkin-olive:#59521c;--manhattan-steel-blue:#224553;--pine-green:#36581d;--brown-swiss-calf-brown:#543c21;--ear-tag-red:#67160e;--flaming-gorge-blue:#1b3e5a;--hayyard-green:#355322;--coeurdalene-purple:#1b245a;--brown-swiss-cow-brown:#563c1f;--buffalo-blue:#0b496a;--saddle-blue:#104165;--brown-swiss-gray:#eaddca;--lavender-purple:#d9c1f6;--font-family-antique:Superclarendon, "Bookman Old Style", "URW Bookman",
    "URW Bookman L", "Georgia Pro", Georgia, serif;--font-family-slab-serif:Rockwell, "Rockwell Nova", "Roboto Slab",
    "DejaVu Serif", "Sitka Small", serif;--font-family-system-ui:system-ui, sans-serif}html{background-color:light-dark(var(--brown-swiss-gray),var(--eclipse-gray));font-family:var(--font-family-slab-serif)}a{color:light-dark(var(--saddle-blue),var(--lavender-purple))}header{display:flex;justify-content:space-evenly;align-items:center}nav{display:flex;flex-direction:row;overflow:scroll;padding-bottom:1rem;position:sticky;top:0}nav a{color:light-dark(var(--brown-swiss-gray),var(--manhattan-steel-blue));background-color:light-dark( var(--manhattan-steel-blue),var(--brown-swiss-gray) );border-radius:.05rem;border-style:outset;border-width:.2rem;border-color:light-dark( var(--manhattan-steel-blue),var(--brown-swiss-gray) );min-width:7.5rem;max-width:7.5rem;display:flex;justify-content:space-between;align-items:center;margin:.2rem;text-decoration:none;padding:0 .2rem;font-family:var(--font-family-system-ui)}nav a:active{border-style:inset}nav a:hover{background-color:light-dark( var(--buffalo-blue),color-mix(in srgb,var(--prickly-pear-yellow),var(--brown-swiss-gray) 75%) )}figure{border-color:light-dark(var(--eclipse-gray),var(--brown-swiss-gray));border-width:1.5pt;border-style:inset;padding:1.25pt}blockquote{background:linear-gradient( to right,light-dark(lightgray,dimgray),color-mix( in srgb,light-dark(var(--brown-swiss-gray),var(--eclipse-gray)),white 25% ) );border-left:5px solid #000;padding-left:6px}blockquote small::before{content:"\2014 \00A0"}blockquote small{font-size:80%}footer{background-color:light-dark(lightgray,dimgray);margin:0 0 -1em -1em;width:calc(100% - 1em);padding:.25em 1.25em;display:flex;justify-content:space-between;align-items:center}form{margin:1rem}fieldset{padding:1rem}input,select,textarea{width:100%;margin-bottom:.5rem}input:invalid,select:invalid,textarea:invalid{border-bottom-width:2px;border-bottom-color:var(--ear-tag-red)}.row{display:flex;flex-direction:column;width:100%}.motto{position:relative;display:grid;place-items:center;text-align:center;color:#fff;font-weight:600;text-shadow:0 0 10px rgba(0,0,0,.33);width:100%;padding:0 0 .5em;border-radius:.25rem}.motto::before{content:" ";position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;background-size:cover;background-position:50%}.motto-inside{position:relative;max-width:95%;display:grid;place-items:center;text-align:center}.motto .motto-inside h1{background-color:rgba(.33,.33,.33,.33);-webkit-text-stroke:.3px lightgray;line-height:1}.card{background-color:color-mix( in srgb,light-dark(var(--brown-swiss-gray),var(--eclipse-gray)),white 10% );border-color:light-dark( var(--manhattan-steel-blue),var(--brown-swiss-gray) );border-width:1.5pt;border-radius:.1rem;border-style:outset;margin:1rem 0;padding:.5rem;padding-top:0;position:relative;display:flex;flex-direction:column}.card-link{white-space:nowrap;display:inline-flex;gap:.375rem;align-items:center;text-underline-offset:.25em;backface-visibility:hidden;margin:0 .5em}.category-button{position:absolute;top:1em;right:1em;display:grid;color:#fff;background-color:var(--ear-tag-red);border-radius:.5em;padding:1em}.card-title{margin-right:3em}.card-title>a{color:inherit}.img-thumbnail{width:100%;height:auto;margin-top:.5rem}.thumb-icon-wrapper{margin-top:1rem;display:flex;justify-content:center;align-content:center}.thumb-icon-badge{font-size:xx-large;justify-self:center;align-self:center;padding:1.5rem 3rem;border-radius:3rem;background-color:var(--ear-tag-red);color:#fff}.fa-container svg{overflow:visible;box-sizing:content-box;display:inline-block;height:1em;width:1.25em;vertical-align:-.125em}.fa-container svg path{fill:currentColor}.font-small-caps{font-variant-caps:small-caps}.img-fluid{max-width:100%;height:auto}.float-left{float:none;max-width:100%}.float-right{float:none;max-width:100%}@media(prefers-color-scheme:light){.active{background-color:var(--coeurdalene-purple)}}@media(prefers-color-scheme:dark){.active{color:color-mix(in srgb,var(--manhattan-steel-blue),white 75%);background-color:color-mix(in srgb,var(--brown-swiss-gray),black 75%);border-color:color-mix(in srgb,var(--brown-swiss-gray),black 50%)}}@media(min-width:768px){nav{flex-direction:column;padding-right:1rem;padding-bottom:0;-ms-overflow-style:none;scrollbar-width:none}nav::-webkit-scrollbar{display:none}main{width:calc(100% - 10rem)}.row{flex-direction:row}.float-left{float:left;max-width:50%}.float-right{float:right;max-width:50%}.card{flex-direction:row}.img-thumbnail{margin-right:1rem}.card-header{width:20vw;flex-shrink:0}.card-body{margin-left:1rem}.bolder{font-weight:bolder;background-color:rgba(0,0,0,.33);border-radius:.25em;padding:.25em .75em .5em .33em}h1::before,h2::before,h3::before,h4::before,h5::before,h6::before{content:" ";visibility:hidden;display:block;height:0;clear:both}}@supports(animation-timeline:scroll()) and (animation-range:0 50vh){@keyframes sticky-header{from{height:50vh;top:6rem}to{height:10vh;top:-1rem}}@keyframes blurry-header{from{filter:blur(0)}to{filter:blur(2px)}}@keyframes transparent-text-bg{from{background-color:rgba(.33,.33,.33,.33)}to{background-color:rgba(.33,.33,.33,0)}}main,footer{position:relative;top:55vh}.motto{position:fixed;top:12rem;animation:sticky-header linear forwards;animation-timeline:scroll();animation-range:.001vh 50vh}.motto::before{filter:blur(12px);top:2rem;animation:blurry-header linear forwards;animation-timeline:scroll();animation-range:.001vh 50vh}.motto-inside h1{animation:transparent-text-bg linear forwards;animation-timeline:scroll();animation-range:.001vh 40vh}@media(min-width:768px){.motto{width:calc(100% - 8rem)}.motto::before{top:0}}}