/* ---------- 1. Colour tokens ---------- */ :root{ /* Light theme (default) */ --border-own: #2b90d9; --border-trans: rgba(0,0,0,0.175); --brand: #2b90d9; } /* Automatically switches when the OS is in dark‑mode, OR when you add a `.dark` class to . */ @media (prefers-color-scheme: dark) { :root{ --border-own: #329af0; --border-trans: rgba(255,255,255,0.175); --brand: #329af0; } } /* ---------- 2. Base layout ---------- */ :root{ color-scheme: light dark; } body,html{ height:100%; width:100%; background:canvas; color:canvasText; padding:0; margin:0; } .fs-7{font-size:85%;} /* ---------- 3. Components ---------- */ #f{ position:absolute; top:0; width:100%; z-index:9999; font-size:80%; text-align:center; padding:.5rem; } #f a{margin:0 .5rem;} .form-control, .form-control:focus{ background-color: Field; color: FieldText; margin-right: 1px; } .btn-own{ background-color:ButtonFace; color:ButtonText; border: 1px solid transparent } .btn-own:focus, .btn-own:hover, .btn-own:active, .btn-own:target{ background-color:ButtonFace; color:ButtonText; border: 1px solid buttonBorder } #share,#create,#instance{ max-width:30em; margin:0 auto; padding-top:5rem; padding-bottom:1rem; display:flex; align-content:space-around; justify-content:center; align-items:flex-start; flex-wrap:nowrap; flex-direction:column; height:100%; } #instance,#share,#create{align-items:center;} #instance{ height:auto; padding-bottom:5rem; justify-content:start; } #share>div, #create>div, #instance>div{width:100%;} #landing>*, #create>*{margin-bottom:1rem;} #share img, #instance img, #create img{width:4em;} #nav{ max-width:50em; margin:0 auto; display:flex; align-content:space-between; justify-content:flex-start; align-items:baseline; flex-wrap:nowrap; flex-direction:row; } #nav img{width:2.3em;} #results_header{ border-bottom:1px solid var(--border-main); padding:1rem; background:var(--bg-subtle); } #results{ max-width:52em; margin:0 auto; } #results a{color:var(--text-main);} #results .card{border-color:var(--border-main)!important;} #results .card-footer{ border-top:1px solid var(--border-main); background:var(--bg-subtle); } #results>.card{margin-top:1rem;} .card-header{ border-color: ButtonBorder; background-color: ButtonFace; } .card{ background-color: Canvas; } .border-top{ border-top:none !important; } a, a:hover{ color: LinkText; } a:visited{ color: VisitedText; }