@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=BBH+Sans+Hegarty&display=swap');

:root {
    --gutter:20%;
    --fg:#3e3e3e;
    --secondary-fg:#505050;
    --primary:#001922;
    --secondary-bg:#dfdfdf;
    --bg:#f6f6f6;
    --small-shadow:1px 1px 3px 1px rgba(149, 149, 149, 0.1);
    --shadow:0 0 8px rgba(120, 120, 120, 0.2);
    --big-shadow:0 0 12px 12px rgba(120, 120, 120, 0.2);
    --hover-shadow:0 4px 12px rgba(120, 120, 120, 0.2);
    --button-bg:#303030;
    --light-bg:#7a7a7a;
    --border: #c3c3c3;
    --secondary-border:#d5d5d5;
    --padding:5px;
    --secondary-padding:12px;
    --radius:12px;
    --fs:16px;
    --secondary-fs:20px;
    --larger-fs:22px;
    --red:#ff3b30;
    --orange:#ff9500;
    --yellow:#ffcc00;
    --green:#1a973c;
    --blue:#007aff;
    --indigo:#5856d6;
    --violet:#af52de;
    --pink:#a5009a;
}

::-webkit-scrollbar {width:8px}
::-webkit-scrollbar-track {background:var(--secondary-bg);border-radius:8px}
::-webkit-scrollbar-thumb {background-color:var(--bg);border-radius:8px;border:2px solid var(--border)}
::-webkit-scrollbar-thumb:hover {background-color:var(--border)}
* {scrollbar-width:thin;scrollbar-color:var(--bg) var(--secondary-bg)}

.background {background-color:var(--bg)}
.no-background {background-color:rgba(0,0,0,0)}
.background-secondary {background-color:var(--secondary-bg)}
.background-red {background-color:var(--red) !important}
.background-orange {background-color:var(--orange) !important}
.background-yellow {background-color:var(--yellow) !important}
.background-green {background-color:var(--green) !important}
.background-blue {background-color:var(--blue) !important}
.background-indigo {background-color:var(--indigo) !important}
.background-violet {background-color:var(--violet) !important}
.background-pink {background-color:var(--pink) !important}
.background-gold {background-color:#FFD700 !important}
.background-silver {background-color:#C0C0C0 !important}
.background-titanium {background-color:#8F8F8F !important}
.background-cobalt {background-color:#5E7C8A !important}
.background-copper {background-color:#B87333 !important}
.background-hydrogen {background-color:#ADD8E6 !important}
.background-oxygen {background-color:#B0E0E6 !important}
.background-carbon {background-color:#2E2E2E !important}
.background-iron {background-color:#D4AF37 !important}
.background-sulfur {background-color:#FFFF00 !important}
.background-chlorine {background-color:#A8DADC !important}
.background-nitrogen {background-color:#9BBFE0 !important}

.text-secondary {color:var(--secondary-fg)}
.text-background {color:var(--bg)}
.text-secondary-background {color:var(--secondary-bg)}
.text-white {color:white}
.text-off-white {color: #c8c8c8}
.text-red {color:var(--red) !important}
.text-orange {color:var(--orange) !important}
.text-yellow {color:var(--yellow) !important}
.text-green {color:var(--green) !important}
.text-blue {color:var(--blue) !important}
.text-indigo {color:var(--indigo) !important}
.text-violet {color:var(--violet) !important}
.text-pink {color:var(--pink) !important}
.text-gold {color:#FFD700 !important}
.text-silver {color:#C0C0C0 !important}
.text-titanium {color:#8F8F8F !important}
.text-cobalt {color:#5E7C8A !important}
.text-copper {color:#B87333 !important}
.text-hydrogen {color:#ADD8E6 !important}
.text-oxygen {color:#B0E0E6 !important}
.text-carbon {color:#2E2E2E !important}
.text-iron {color:#D4AF37 !important}
.text-sulfur {color:#FFFF00 !important}
.text-chlorine {color:#A8DADC !important}
.text-nitrogen {color:#9BBFE0 !important}

.small {font-size:calc(var(--fs) - 2px)}
.normal-font {font-family:"Inter", serif;font-size:var(--larger-fs);font-weight:800}
.larger {font-size:calc(var(--fs) + 4px)}
.align-right {text-align:right}
.align-left {text-align:left}
.justify {text-align:justify}
.no-wrap {white-space:nowrap}
.safe-wrap {white-space:wrap;text-overflow:ellipsis;overflow:hidden}
.bold {font-weight:700 !important}
.bolder {font-weight:900 !important}
.none {display:none !important}
.relative {position:relative !important}
.inline {display:inline-block !important}
.brick {display:block !important}
.float-right {float:right}
.float-left {float:left}
.center {text-align:center;justify-content:center}
.vertical-center {justify-content:center;display:flex;align-items:center;flex-direction:column}
.absolute {position:absolute !important}
.top {margin-top:-6px}
.adjust-right {margin-right:-6px}
.bottom {bottom:0 !important}
.right {right:0 !important}
.align-bottom {vertical-align:bottom}
.align-top {vertical-align:top}
.align-middle {vertical-align:middle}
.ontop {z-index:123}
.invisibility {transition:all 100ms;visibility:hidden}
.pointer:hover .invisibility {visibility:visible}
.small-margin-right {margin-right:5px !important}
.small-margin-left {margin-left:5px}
.small-margin-bottom {margin-bottom:5px}
.no-margin {margin:0 !important}
.margin-top {margin-top:10px}
.margin-right {margin-right:10px}
.margin-bottom {margin-bottom:var(--secondary-padding)}
.margin-left {margin-left:10px}
.medium-margin-right {margin-right:15px}
.large-margin-top {margin-top:20px}
.large-margin-bottom {margin-bottom:20px}
.large-margin-left {margin-left:20px}
.large-margin-right {margin-right:20px}
.small-padding {padding:4px}
.medium-padding {padding:6px}
.padding-top {padding-top:var(--padding)}
.large-padding-top {padding-top:50px}
.padding-right {padding-right:var(--padding)}
.padding-left {padding-left:var(--padding)}
.adjust-top {padding-top:10px}
.medium-padding-top {padding-top:var(--secondary-padding)}
.padding-bottom {padding-bottom:var(--secondary-padding)}
.medium-padding-bottom {padding-bottom:15px}
.small-padded {padding:7px 10px 8px 10px}
.large-padding {padding:30px}
.padded {padding:var(--secondary-padding) !important}
.side-padded {padding-left:17px;padding-right:17px}
.small-padding-top {padding-top:4px}
.padded-top {padding-top:120px}
.no-padding {padding:0 !important}
.no-events {pointer-events:none}
.events {pointer-events:all}
.pointer {cursor:pointer}
.magnify-hover:hover {transform:scale(1.05)}
.faded {opacity:0.7}
.big-shadow {box-shadow:var(--hover-shadow)}
.shadowed {box-shadow:var(--shadow)}
.hover-shadow, .small-hover-shadow {transition:all 100ms}
.hover-shadow:hover {box-shadow:var(--hover-shadow)}
.hover-background:hover {background-color:var(--secondary-bg)}
.hover-normal-background:hover {background-color:var(--bg)}
.small-hover-shadow:hover {box-shadow:var(--small-shadow)}
.medium-hover-shadow:hover {box-shadow:var(--shadow)}
.hover-zoom, .small-hover-zoom {transition:all 100ms}
.hover-zoom:hover {transform:scale(1.05)}
.small-hover-zoom:hover {transform:scale(1.02)}
.radius {border-radius:var(--radius)}
.animated {transition:all 100ms}
.no-decoration {text-decoration:none}
.contained {object-fit:contain}
.covered {object-fit:cover}
.icon {width:65px;height:65px;margin-right:10px}
.very-small-icon {width:10px;height:10px;margin:-5px 5px 0 0}
.small-icon {width:20px;height:20px;margin-right:10px}
.medium-icon {width:40px;height:40px;margin-right:10px}
.screen {position:relative;height:90vh;margin:0 2% 30px 2%;border-radius:var(--radius)}
.full-screen {height:70vh}
.half-screen {height:60vh}
.mid-screen {height:50vh}
.small-screen {height:30vh}
.tiny-screen {height:10vh}
.spaced {margin-bottom:15px}
.medium-space {margin-bottom:25px}
.big-space {margin-bottom:50px}
.small-space {margin-bottom:10px}
.spacer {height:30px}
.guttered {margin-left:var(--gutter);margin-right:var(--gutter)}
.squeezed {margin:0 29% 0 29%}
.small-guttered {margin-left:50px;margin-right:25%}
.bi {display:grid;grid-template-columns:repeat(2, 1fr);column-gap:15px}
.tri {display:grid;grid-template-columns:repeat(3, 1fr);column-gap:15px}

@media (prefers-color-scheme:dark) {
    :root {
        --fg:#b9b9b9;
        --primary:#006696;
        --secondary-fg:#757575;
        --bg:#232323;
        --secondary-bg:#303030;
        --shadow:0 0 8px rgba(15, 15, 15, 0.05), 0 0 8px rgba(15, 15, 15, 0.05);
        --hover-shadow:0 4px 12px rgba(0, 0, 0, 0.3);
        --button-bg:#d5d5d5;
        --light-bg:#e9e9e9;
        --border: #404040;
        --secondary-border: #353535;
    }
    .logo img {filter:invert(100%)}
    .invert-dark {filter:invert(100%);opacity:0.7}
}