/*
Tachyons CSS
*/
@import url("https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css");

/*
Google Fonts
*/
/* @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sometype+Mono:ital,wght@0,400..700;1,400..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap'); */

/*
Google Icons
*/
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
.material-symbols-rounded {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

:root { --pcolor: red; --pale: #fdfff9; }
body {
  font-family: 'Sometype Mono', 'system-ui', monospace;
  scrollbar-color: #e8e8e8 #f2f1f0;
  scrollbar-width: thin;
  background-color: var(--pale);
  letter-spacing: 0.04rem;
}

.underline:hover { text-decoration: underline;}
.link { text-decoration: none; transition: var(--pcolor) .15s ease-in; }
.link:hover { transition: var(--pcolor) .15s ease-in;  }
.no-pointer { cursor: default; }
.hover-pop { cursor: pointer; position: relative; transition: all .5s cubic-bezier( .165, .84, .44, 1 ); }
.hover-pop:after { content: ''; background-color: white; box-shadow: 0 0 16px 2px rgba( 0, 0, 0, .05 ); border-radius: inherit; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; transition: opacity .5s cubic-bezier( .165, .84, .44, 1 ); }
.hover-pop:hover::after, .hover-pop:focus::after { opacity: 1; }
.sticky { position: sticky; }
.h3rem { height: 3rem; }
.w3rem { width: 3rem; }
.w-45 { width: 45%; }
.pt45 { padding-top: 2.5rem; }
.min-vh-20 { min-height: 20vh; }
.max-h-80 { max-height: 80vh; }
.space-mono { font-family: 'Space Mono', monospace; }
.bg-maya { background-image: linear-gradient(to bottom right, rgb(127, 0, 239), rgb(255, 172, 17)); }
.bg-pale { background-color: var(--pale); }
.bg-pale-dark { background-color: #e6e6e6; }
.b--pale { border-color: var(--pale); }
.purple { color: #7a00cc; }
.bg-purple { background-color: #9226da; }
.light-moon-gray { color: #e2e2e2; }
.bg-light-moon-gray { background-color: #e2e2e2; }
.b--light-moon-gray { border-color: #e2e2e2; }
.red { color: red; }
.bg-red { background-color: #ffe4e4; }
.highlight { background-color: #efff00; }
.highlight { background-color: #f3ffd4; }
.flip { -webkit-transform: scaleX(-1); transform: scaleX(-1); }
.fg1 { flex-grow: 1; flex-basis: 0; }
.fg2 { flex-grow: 2; flex-basis: 0; }
.fg3 { flex-grow: 3; flex-basis: 0; }
.fg4 { flex-grow: 4; flex-basis: 0; }
.fg5 { flex-grow: 5; flex-basis: 0; }
.fg6 { flex-grow: 6; flex-basis: 0; }
.fg7 { flex-grow: 7; flex-basis: 0; }
.fg8 { flex-grow: 8; flex-basis: 0; }
.fg9 { flex-grow: 9; flex-basis: 0; }
.fg10 { flex-grow: 10; flex-basis: 0; }
.fg11 { flex-grow: 11; flex-basis: 0; }
.fg12 { flex-grow: 12; flex-basis: 0; }
.fg13 { flex-grow: 13; flex-basis: 0; }
.fg14 { flex-grow: 14; flex-basis: 0; }
.fg15 { flex-grow: 15; flex-basis: 0; }
.fg16 { flex-grow: 16; flex-basis: 0; }
.fg17 { flex-grow: 17; flex-basis: 0; }
.fg18 { flex-grow: 18; flex-basis: 0; }
.fg19 { flex-grow: 19; flex-basis: 0; }

@media screen and (min-width: 30em) {
  .dark-gray-ns { color: #333; }
  .mid-gray-ns { color: #555; }
  .gray-ns { color: #777; }
  .light-silver-ns { color: #aaa; }
}