@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,100..900,0..100,0..1;1,9..144,100..900,0..100,0..1&family=Noto+Serif+Display:ital,wght@0,100..900;1,100..900&display=swap');
:root {
   --bg0: #232125;
   --bg1: #45404a;
   --p0: #403463;
   --p1: #51289e;
   --p2: #641cd9;
   --ym: #ffc34c;
   --yl: #ffedc8;
   --w0: #eee;
   --wy: #ffc;
   --wp: #dcf;
   --wg: #ccc;
}

body {
   background-color: var(--bg0);
   color: var(--w0);
   margin: 0;
   font-family: "Fraunces", serif;
   font-size: 1.5em;
   font-optical-sizing: auto;
   font-weight: 300;
   font-style: normal;
   font-variation-settings:
     "SOFT" 1,
     "WONK" 0;
}

h1, h2, h3, h4, h5, h6 {
   font-variation-settings: "SOFT" 0, "WONK" 1;
   margin: 0;
   color: var(--wp);
}

ul, li {
   margin: 0;
}

/* + - NAV - + */
nav a {
   text-decoration: none;
}

nav>p>a {
   color: var(--w0);
}

/* trigram */
nav>p>a:first-child {
   font-family: "Noto Serif Display", serif;
   color: var(--wp);
   font-weight: 600;
   transition: color .2s ease-in-out;
   transition: font-weight .2s ease-in-out;
}

nav>p>a:first-child:hover {
   color: var(--wy);
   font-weight: 900;
}

/* h1, h2, h3, h4, h5, h6 {
   color:var(--wp);
} */

.proj>a {
   text-decoration: none;
   color: var(--w0);
}

.proj>a>h3 {
   color: var(--wp);
   transition: color .2s ease-in-out;
}

.proj:hover>a>h3 {
   color: var(--wy);
}


em, strong, a {
   color: var(--wy);
}

.url {
   white-space: nowrap;
}

.url>a {
   color:var(--w0);
   text-decoration: none;
}

/* .navlink {
   text-decoration: none;
} */

.navdiv {
   margin: 0;
   font-weight: 900;
}

/* .trigram {
   color: var(--wp);
   font-weight: 900;
   text-decoration: none;
   transition: all ease-in-out .2s;
}

.trigram:hover {
   color: var(--wy);
   font-weight: 1200;
} */


.grayed {
   color: var(--wg);
}

p {
   margin: 0;
}

a:hover:not(.proj>*) {
   font-weight: 600;
}

.proj>a:hover {
   font-weight: 400;
}

a, a:hover {
   transition: font-weight 0.2s ease-in-out;
}

.proj:hover>h3 {
   color: var(--wy);
   transition: color 0.2s ease-in-out;
}

section {
   margin-bottom: 1em;
}

.proj {
   padding: 0.5em;
}

nav {
   display: flex;
   flex-direction: row;
   background-color: var(--bg);
   gap: 0.5em;
   justify-content: center;
}

.projs {
   display: grid;
   grid-template-columns: repeat(2, auto);
}

main {
   display: flex;
   flex-direction: column;
   width: 100vw;
   align-items:center;
}

.page {
   width: 65vw;
   background-color: var(--bg0);
   /* box-shadow: 0 0 5px black; */
   /* clip-path: inset(0 -5px 0 -5px); */
   padding: 1em;
   border-style: none solid;
   border-width: 1px;
   border-color: var(--bg1); 
}

@media (max-width: 768px) {
   .page {
      width: 80vw;
      border-style: none;
   }
   .projs {
      grid-template-columns: repeat(1, auto);
   }
}