progress,sub,sup{vertical-align:baseline}*,::after,::before{box-sizing:border-box}html{line-height:1.4;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4}body{margin:0;font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji'}hr{height:0;color:inherit}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.2;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;appearance:button;}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:ButtonText dotted 1px}:-moz-ui-invalid{box-shadow:none}legend{padding:0}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none;appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}summary{display:list-item}html{font-size:62.5%;}body{font-size:1.6rem;}img{width:100%;height:auto;user-select:none;}button{color:inherit;}a,button{touch-action: manipulation;}svg{height:100%;width:100%;fill:currentColor;pointer-events:none;}iframe,video{display:inline-block;height:auto;width:100%;margin:0;padding:0;}main,header,footer,section,div,article,aside,figure,table,form{margin:0;padding:0;}
/*---------------
--- Defaults ---
----------------*/
html {
  scroll-behavior: smooth;
}
:root {
  --dcolor: #3f26c0;
  --color: #6245F8;
  --lcolor: #8B75FA;
  /* --gradient: linear-gradient(225deg, #16222a, #3a6073); */
  /* --gradient: linear-gradient(225deg, #0f2027, #203a43, #2c5364);  */
  --gradient: linear-gradient(225deg, #0f0c29, #302b63, #24243e);
  --dark: #120b33;
  --midark: #3a3260;
  --lidark: #504a6d;
  --ldim: #a39dbf;
  --dim: #685f95;
  /* --light: rgb(220, 227, 228); */
  --light: #dce3e4;
  --white: #f6f8f9;
  /* "primary": "#6245F8",
"secondary": "#3f26c0",
"accent": "#3a3260",
"neutral": "#dce3e4",
"base-100": "#120b33",
"info": "#5cc0ff",
"success": "#b4f500",
"warning": "#a24e00",
"error": "#ff5b6d", */
  --faded: .75;
  --reg: 400;
  --bold: 700;
  --height: 6.4rem;
  --radius: .6rem;
  --std: all 200ms ease-in-out;
  --long: all 500ms ease-in-out;
  --system: system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji';
}
/* "primary": "#b100ff",
"secondary": "#009fff",
"accent": "#0000ff",
"neutral": "#25191c",
"base-100": "#2d262f",
"info": "#5cc0ff",
"success": "#b4f500",
"warning": "#a24e00",
"error": "#ff5b6d", */

body {
  color: var(--midark);
  background-color: var(--light);
  font-family: Lato, var(--system);
  font-size: 1.6rem;
}
h1,h2,h3,h4,h5,h6 {
  color: var(--lidark);
}
h1, h2 {
  font-family: 'Spectral', serif;
}
.material-symbols-outlined {
  font-size: 3rem;
}
p:not(p:last-of-type) {
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 1em;
}
a, a:link, a:visited {
  text-decoration: none;
  color: var(--dcolor);
  padding-bottom: 2px;
  border-bottom: 1px dashed var(--dcolor);
  transition: var(--std);
  font-weight: var(--reg);
  font-size: 1em;
}
a:hover, a:active {
  color: var(--color);
  border-bottom-color: var(--color);
}
a.disabled {
  opacity: .5;
  cursor: not-allowed;
}
main {
  margin-top: 6rem;
  padding-right: 2vw;
  padding-left: 2vw;
  margin: auto;
  min-height: calc(100vh - (2 * var(--height)));
  max-width: 150ch;
}
main.home-main h2 {
  margin-top: 4rem;
  margin-bottom: 0;
  font-size: 2.8rem;
}
main.home-main > p {
  margin-top: 0;
  margin-bottom: 2em;
}
main.site-main {
  margin-top: 6rem;
  padding-right: 2vw;
  padding-left: 2vw;
  margin: auto;
  min-height: calc(100vh - (2 * var(--height)));
  max-width: 95ch;
}
main.site-main > * {
  margin-bottom: 2.7rem;
}
.listing p.sm {
  font-size: 1em;
}
svg {
  width: 24px;
}
/*-----------------
--  Nav Styles  --
------------------*/
nav.topnav { 
  background-image: var(--gradient);
  /* background-color: var(--deep); */
  min-height: var(--height);
  padding: 1em 2vw;
  position: fixed;
  top: 0;
  z-index: 125;
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  text-transform: uppercase;
  font-weight: var(--reg);
  border-bottom: 2px solid var(--color);
  box-shadow: -1px 4px 16px rgba(0,0,0, 0.25);
}
a.logo {
  display: flex;
  border-bottom: none;
  flex-grow: 1;
  flex-basis: 100%;
  justify-content: center;
}
a.logo > div {
  display: flex;
  width: 139px;
}
a.logo svg {
  height: 30px;
  min-width: 44px;
}
a.logo svg > g > g {
  fill: var(--light);
  transition: var(--std);
}
a.logo:hover svg > g > g {
  fill: var(--white);
}
a.logo > div > span {
  padding-top: 3px;
  transform: translateX(-4px);
  font-family: 'Spectral', serif;
  font-size: 1.35em;
  font-weight: var(--bold);
  text-transform: none;
  min-width: fit-content;
}
.topnav a {
  padding-top: .5rem;
  text-decoration: none;
  border-bottom: none; 
  color: var(--light);
  cursor: pointer;
  transition: var(--std);
}
.topnav a:not(:first-of-type).current {
  border-bottom: 1px dashed var(--white); 
  color: var(--light)
}
.topnav a:not(:first-of-type) {
  color: var(--ldim);
  font-size: .9em;
  padding-top: .5rem;
  padding-bottom: .5rem;
}
.topnav a:hover {
  color: var(--white);
  border-color: var(--white);
}
.topnav a.current:hover {
  border-bottom: 1px dashed var(--light); 
  color: var(--light)
}
/*-- hides trigram (hamburger menu button) by default --*/
.nav-item.trigram {
  display: none; 
  border-bottom: none;
}
h2#research, h2#design, h2#teaching {
  margin-top: -100px;
  padding-top: 136px;
}
/*------------
--- Header ---
--------------*/
.site-main > header {
  margin-top: 6rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
header.splash {
  background-image: url('../media/splash.webp');
  background-repeat: no-repeat;
  width: 100%;
  height: 520px;
  background-size: cover;
  background-position: 50%;
  display: flex;
  overflow-x: hidden;
  position: relative;
  box-shadow: -1px 4px 16px rgba(0,0,0,0.25);
}
div.overlay {
  width: 100%;
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}
div.text {
  background: rgba(220,227,228,.92);
  /* background-color: var(--light); */
  padding: 0 6rem 4rem 6rem;
  min-width: 360px;
  max-width: 480px;
  margin: 0 4vw 0 4vw;
  position: relative;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
}
div.text > a {
  position: absolute;
  bottom: -1em;
  align-self: center;
  padding: .4em 3.6em;
  margin-top: 1.5rem;
  background-color: var(--dcolor);
  color: var(--white);
  font-size: 1em;
  font-weight: var(--reg);
  border-radius: 50px;
  border: 2px solid var(--white);
  box-shadow: -1px 4px 16px rgba(0,0,0,.25);
  display: flex;
  gap: 0 .5em;
  align-items: center;
  justify-content: center;
}
div.text > a:hover {
  background-color: var(--color);
}
div.text > a:active {
  transform: scale(.95);
}
div.text > a > svg {
  width: 3rem;
  height: 3rem;
}
.text > h2 span {
  color: var(--color);
}
.text strong {
  font-weight: var(--bold);
}
div.text h1 {
  color: var(--midark);
  font-weight: 700;
  font-size: 2.8rem;
  margin-top: 1.4em;
  margin-bottom: .5rem;
}
div.text h1 em {
  color: var(--midark);
  font-size: .65em;
  font-family: 'Lato', sans-serif;
  font-weight: var(--reg)
}
div.text h2 {
  font-family: 'Lato', sans-serif;
  color: var(--dark);
  line-height: 1.3;
  margin: 0 auto 1rem auto;
  font-weight: var(--reg);
  font-size: 1.8rem;
}
div.text h2 strong {
  color: var(--midark);
  font-weight: var(--reg);
}
div.text p {
  line-height: 1.5;
  font-weight: var(--reg);
  font-size: 1.6rem;
  margin-bottom: 3rem;
}
div.gradient {
  background-image: var(--gradient);
  /* background-color: var(--color); */
  height: .9rem;
  width: 100%;
  position: relative;
}
div.gradient.mid {
  margin: 4rem auto;
  border-radius: 1rem;
}
nav.locations {
  position: sticky;
  top: var(--height);
  z-index: 200;
  width: 62%;
  min-width: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  font-size: 1.8rem;
  font-weight: var(--bold);
  text-transform: uppercase;
  /* background-color: rgba(220, 227, 228, .92); */
  background-color: var(--light);
  padding: .8em 1em;
  border-top: 0;
  border: 2px solid var(--color);
  border-radius: 0 0 .6rem .6rem;
  box-shadow: -1px 4px 16px rgba(0,0,0,0.25);
}
.locations a {
  flex: 0 0 33%;
  font-family: 'Lato', sans-serif;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.locations a:link, .locations a:visited {
  color: var(--color);
}
.locations a:hover, .locations a:active {
  color: var(--dcolor);
}
.wrap {
  display: grid;
  padding: 0 1vw 1rem 1vw;
  gap: 1em 2em;
  grid-template-columns: 1fr;
}
.design-main h1, .design-main h2, 
.research-main h1, .research-main h2,
.teaching-main h1, .teaching-main h2 {
  margin-bottom: .25em;
}
.design-main .wrap, .research-main .wrap, .teaching-main .wrap {
  margin-top: 3rem;
  padding-top: 1rem;
}
.page-header p {
  max-width: 75ch;
  font-size: 1.1em;
  line-height: 1.5;
}
.card  {
  padding: .5em 1em .75em 1em;
  border-radius: var(--radius);
  transition: var(--std);
  box-shadow: -1px 4px 16px rgba(0,0,0,0.25);
  z-index: 100;
}
.design-main .card {
  box-shadow: none;
  border-radius: none;
  padding: 0;
}
.design-main .card p:not(p:last-of-type) {
  margin-bottom: 0;
}
.design-main .card img {
  box-shadow: -1px 4px 16px rgba(0,0,0,0.25);
  transition: var(--std);
}
.card:hover {
  box-shadow: -1px 2px 8px rgba(0,0,0,0.45);
}
.design-main .card:hover img {
  box-shadow: -1px 2px 8px rgba(0,0,0,0.45);
}
.design-main .card:hover {
  box-shadow: none;
}
.card a {
  border: none;
  color: inherit;
}
.grad-sect .card a, .grad-sect .card a:link, .grad-sect .card a:visited {
  color: var(--midark);
}
section.wrap .card img {
  border: 1px solid var(--ldim);
  border-radius: var(--radius);
  margin-top: .5rem;
  aspect-ratio: auto 400 / 300;
}
section.wrap > .card.blank > img {
  box-shadow: none;
}
.card h3 {
  font-weight: var(--bold);
  font-size: 1.2em;
  margin-top: .5em;
  margin-bottom: .5em;
}
.card p {
  line-height: 1.5;;
  margin-top: .6em;
}
span.lead {
  font-size: 1.2em;
}
.lead strong {
  color: var(--dcolor);
}
div.grad-sect {
  margin: 4rem auto 6rem auto;
  border-radius: var(--radius);
  background-image: var(--gradient);
  padding: .01rem 2rem 3rem 2rem;
  transform: scale(1.02);
}
div.grad-sect > h2, div.grad-sect > p {
  color: var(--white);
}
div.grad-sect a, div.grad-sect a:link, div.grad-sect a:visited {
  color: var(--milight);
  border-color: var(--milight);
}
div.grad-sect a:hover, div.grad-sect a:active {
  color: var(--white);
  border-color: var(--white);
}
div.grad-sect > section {
  padding: 1em 2em;
  border: 2px solid rgba(255,255,255,0.9);
  border-radius: var(--radius);
  background-color: rgba(220, 227, 228, 0.9);
}
div.grad-sect .card, .teach .card {
  padding: 0;
  box-shadow: none;
}
section.wrap.teach .card > img {
  border: none;
}
/*---------------
--- Sections ---
---------------*/
.info h1 {
  margin-top: 6rem;
  margin-bottom: .3em;
  font-weight: var(--bold);
  font-size: 1.7em;
}
.info h2 {
  margin-top: 0;
  margin-bottom: .5em;
  font-weight: var(--bold);
  font-size: 1em;
}
.info p, .info p:not(p:last-of-type) {
  font-weight: var(--reg);
}
header p, header p:not(p:last-of-type) {
  margin-top: 0;
  margin-bottom: .5em;
}
.contact p {
  display: flex;
  gap: .5em;
}
.contact a {
  text-decoration: none;
  border-bottom: none;
  display: flex;
  align-items: flex-start;
  margin-bottom: .7em;
}
.contact a > svg {
  width: 2.4rem;
  height: 2.4rem;
}
address {
  display: flex;
  align-items: flex-start;
  gap: .9em;
}
section h2 {
  padding-top: 4.2em;
  margin-top: -3em;
  margin-bottom: .5em;
}
#education h2, #appointments h2 {
  margin-bottom: 0;
}
section h3:not(:first-of-type) {
  margin-top: 1.8em;
  line-height: 1.3;
  margin-bottom: 1em;
  font-size: 1.2em;
}
.listing h3 {
  margin-top: 1em;
  line-height: 1.3;
  margin-bottom: .4em;
  font-size: 1.1em;
}
.listing {
  display: flex;
  gap: 0 1em;
}
.listing > h3 {
  font-size: 1em;
  min-width: 9ch;
  padding-top: 2px;
  font-weight: var(--reg);
}
.home-main .card p {
  font-size: 1em;
  min-width: 9ch;
  padding-top: 2px;
  font-weight: var(--reg);
}
.listing > div > h3 {
  font-weight: var(--bold);
}
.listing p, listing p:not(p:last-of-type) {
  margin-top: 0;
  margin-bottom: .3em;
}
section p {
  margin-top: 0;
  margin-bottom: .3em;
}
.research-main section p, .teaching-main section p {
  margin-top: 0;
  margin-bottom: .3em;
  max-width: 75ch;
}
#highlights article > div {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin: 1em 0;
}
#highlights article > div > a {
  border-bottom: none;
}
#highlights #conferences > div > a {
  margin-top: 3px;
  min-width: 10ch;
  max-width: 11ch;
}
#highlights article > div > a > svg {
  width: 28px;
}
/*------------------
--  Publications  --
------------------*/
section p.pub, section p.pub:not(:last-of-type) {
  line-height: 1.5;
  font-size: 1.15em;
  margin-left: 2em;
  text-indent: -2em;
}
section p.pub:not(:last-of-type) {
  margin-bottom: 1.35em;
}
p.pub a, p.pub a:link, p.pub a:visited {
  white-space: nowrap;
}
/*------------------
--    Workshops    --
------------------*/
#workshops {
  margin-bottom: 0;
}
/*------------------
--    Courses    --
------------------*/
#courses {
  margin-bottom: 0;
}
.course {
  display: flex;
  gap: 4ch;
  margin-bottom: 1em;
}
.course > p:first-of-type {
  font-size: .9em;
  min-width: 12ch;
}
.course > p {
  padding-left: 1em;
}
/*------------------
--  Service     --
------------------*/
.serve {
  display: flex;
  gap: 0 1em;
  padding-right: 1ch;
  padding-left: 1ch;
}
.serve > p:first-of-type {
  min-width: 5ch;
}
.serve p:first-of-type > em {
  font-size: .85em;
}
.serve p, .serve p:not(:last-of-type) {
  line-height: 1.5;
  font-size: 1.15em;
  margin-left: 2em;
  margin-bottom: 1em;
  text-indent: -2em;
}
/*-----------------
--  Websites  --
------------------*/
#profs h2, #admin h2 {
  margin-top: 4em;
}
#websites {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2em;
}
#websites h2 {
  flex: 0 0 100%;
  flex-wrap: nowrap;
  margin-bottom: 0;
}
.site {
  flex: 0 1 30%;
}
.site a, .site a:link, .site a:visited {
  font-family: 'Lato', sans-serif;
  font-weight: var(--bold);
  font-size: 1.1em;
}
.site p {
  margin-top: .8em;
  font-style: italic;
}
.site p.link {
  color: var(--midark);
  font-style: normal;
  font-family: 'Lato', sans-serif;
  font-weight: var(--bold);
  font-size: 1.1em;
  margin-bottom: 0;
  padding-bottom: 0;
}
.site p.link-pair {
  font-size: 1em;
}
/*-----------------
--  Subpages  --
------------------*/
.design-main, .research-main, .teaching-main {
  margin-top: 12rem;
}
.design-main .page-header, .research-main .page-header, .teaching-main .page-header {
  margin-bottom: 1em;
}
.design-main h1, .research-main h1, .teaching-main h1 {
  padding-top: 1em;
}
.design-main .card img {
  padding: 0;
  margin: 0;
}
.design-main h3, .research-main h3, .teaching-main h3 {
  font-size: 1.2em;
  margin-bottom: .3em;
}
.design-main .card h3 {
  font-size: 1.2em;
  margin-bottom: .3em;
}
.design-main ul, .research-main ul, .teaching-main ul {
  list-style: none;
  margin-top: .5em;
  padding-left: 0;
}
.design-main li, .research-main li, .teaching-main li {
  line-height: 2;
}
.three-col {
  display: flex;
  margin-top: 1em;
  gap: 0 2em;
  flex-wrap: wrap;
}
.two-col {
  display: flex;
  flex-wrap: wrap;
  margin-top: 1em;
  gap: 1em;
}
.col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 31%;
  min-width: 32rem;
}
.design-main h4 {
  margin: 0;
  font-size: 1.8rem;
  padding: .3em 0 0 0;
}
.design-main .col {
  box-shadow: -1px 4px 16px rgba(0,0,0,0.25);
  padding: .5em 2em;
}
.teaching-main .col {
  padding: .5em 2em;
  align-items: start;
}
.card-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  margin-top: .4em;
  margin-bottom: 1em;
}
.card-wrap p:first-of-type {
  font-size: 1em;
  font-style: italic;
}
.card-wrap p {
  margin: 0;
  padding: 0;
  font-size: 1em;
  align-self: end;
}
.card-wrap > h4:after {
  content: '·';
  padding-left: .5em;
  font-weight: 400;
}
.card-wrap > p:after {
  content: '·';
  padding-left: .5em;
}
.card-wrap > p:last-of-type::after {
  content: '';
  padding-left: 0;
}
h3.proficiencies {
  display: flex;
  max-width: 100%;
  justify-content: space-between;
  padding: 1.25em 0;
  position: relative;
}
.devicon {
  font-size: 1.6em;
  padding-top: .5rem;
  font-weight: lighter;
  color: var(--dim);
  display: flex;
  align-self: center;
}
.devicon:last-of-type {
  margin-right: 0;
}
.icon-label {
  color: var(--dim);
  margin-top: .5em;
  padding-bottom: .5rem;
  font-size: .7em;
  font-weight: var(--bold);
  text-align: center;
}
.devicon-sketch-line {
  font-weight: 900;
}
/*--Teaching Subpage --*/
.teaching-main h2 {
  font-family: Lato, var(--system);
  font-size: 1.2em;
}
.ratio-wrap {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 0em;
}
.ratio-wrap > div {
  flex-basis: 28%;
  padding: 1em;
  border-radius: var(--std);
}
.ratio-wrap > div > img {
  display: none;
  box-shadow: -1px 4px 16px rgba(0,0,0,0.25);
}
#materials.ratio-wrap > div > img {
  box-shadow: none;
}
#philosophy.ratio-wrap > div > img {
  background-color: var(--white);
}
.ratio-wrap > div > p {
  padding: 2rem 1rem 1rem 1rem;
  text-align: center;
}
.ratio-wrap article {
  flex: 1 0 62%;
  max-width: 65ch;
  display: flex;
  flex-direction: column;
}
.ratio-wrap article h2 {
  margin-top: 0;
  padding-top: 0;
}
.ratio-wrap > article p {
  padding-bottom: 1em;
}
/*-------------------
--- Expander Styles ---
---------------------*/
button.see-all {
  width: 100%;
  cursor: pointer;
  background-color: var(--dim);
  padding: 1em 1.5em;
  color: var(--light);
  transition: var(--std);
  font-weight: var(--reg);
  text-transform: uppercase;
  border: 2px solid var(--white);
  border-radius: var(--radius);
  display: flex;
  justify-content: center;
  gap: 1rem;
  align-items: center;
}
.design-main button.see-all {
  width: max-content;
  padding: .1em 1.5em;
  font-size: .75em;
}
button.see-all > span {
  width: max-content;
}
button.see-all:hover {
  background-color: var(--color);
  color: var(--white);
}
button.see-all svg {
  height: auto;
  width: 30px;
}
.research-main button.see-all, 
.teaching-main button.see-all {
  width: 18rem;
  font-size: .9em;
  cursor: pointer;
  background-color: transparent;
  padding: .4rem 0;
  margin-top: 2em;
  color: var(--color);
  transition: var(--std);
  font-weight: var(--reg);
  text-transform: uppercase;
  border: 2px solid var(--color);
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.research-main button.see-all.hovered, .teaching-main button.see-all.hovered {
  background-color: var(--color);
  border: 2px solid var(--light);
  color: var(--light);
}
.research-main button.see-all:hover, .research-main button.see-all:hover.hovered, 
.teaching-main button.see-all:hover, .teaching-main button.see-all:hover.hovered {
  background-color: var(--dcolor);
  border: 2px solid var(--light);
  color: var(--light);
}
button.see-all:active {
  transform: scale(.95);
}
.research-main button.see-all svg, .teaching-main button.see-all svg {
  transform: rotate(180deg);
  transition: var(--std);
}
.research-main button.see-all.toggled svg, .teaching-main button.see-all.toggled svg {
  transform: rotate(0deg);
}
.collapse {
  overflow-y: hidden;
  max-height: 49rem;
  transition: var(--std);
  border-bottom: 3px solid var(--lcolor);
}
.collapse.extended {
  max-height: 400rem;
}
.marquee-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.marquee-content {
  display: flex;
  gap: 0 3em;
  font-weight: 400 !important;
  align-content: center;
  justify-content: space-evenly;
  animation: marquee 40s linear infinite;
}
.marquee-container.clicked {
  position: static;
  transform: translateX(0%);
  width: 90%;
  height: auto;
}
.marquee-content.open {
  animation: stopped;
  display: grid;
  gap: 2em;
  grid-template-columns: repeat(2, 1fr);
}
@keyframes marquee {
  0% {
      transform: translateX(5%);
  }
  100% {
      transform: translateX(-85%);
  }
}
.icon-group {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: space-between;
}
.design-main hr {
  color: var(--ldim);
  border-width: .5px;
}
.thin {
  font-weight: 400;
  font-family: Lato, var(--system);
  font-style: italic;
  color: var(--lidark);
  font-size: .8em;
}
.page-header strong, .teaching-main section strong {
  color: var(--dcolor);
}
#highlights article > div.grant-item {
  margin-top: 2.8rem;
  align-items: flex-start;
}
.grant-item p {
  margin-left: 3em;
  text-indent: -3em;
  line-height: 1.5;
}
#conferences .grant-item p {
  margin-left: .5rem;
  text-indent: 0;
  line-height: 1.5;
}
/* #published a {
  display: flex;
  gap: 0 .5rem;
  align-content: center;
  border-color: transparent;
}
#published a svg {
  align-self: flex-start;
  flex-shrink: 0;
  transform: scale(1.1);
} */

/*-------------------
--- Footer Styles ---
---------------------*/
footer.site-footer {
  margin-top: 6rem;
  padding-top: .5em;
  padding-right: 4vw;
  padding-bottom: .5em;
  padding-left: 4vw;
  min-height: var(--height);
  background-image:var(--gradient);
  display: flex;
  gap: .5em 1em;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Lato', sans-serif;
  color: var(--light);
  border-top: 2px solid var(--color);
}
.site-footer > div {
  display: flex;
  gap: 0 1em;
  align-items: center;
}
.site-footer a {
  border-bottom: none;
  color: var(--light);
}
/*---------------------
---- Media Queries ----
---------------------*/
@media only print {
  .site-main header {margin-top: 0;}
  p,a,h2,h3 { widows: 3; }
  p,a,h2,h3 { orphans: 3; }
  @page {
    margin: 1in 1.2in;
    @bottom-left {
      content: "Your Page Footer Text";
      color: #888; /* Set the text color to gray */
    }
  }
}

/*--At screens BELOW 768px, hides nav menu items and displays trigram 
@media screen and (max-width: 768px) {
  .topnav a:not(a.logo, a.trigram) {display: none;}
  .topnav a.trigram {
    display:inherit;
    justify-self: end;
    transform:scale(2.5);
  }
}--*/
@media only screen and (min-width: 550px) {
  .wrap {padding: 0 1vw 2rem 1vw; gap: 1em 2em; grid-template-columns: 1fr;}
  nav.topnav {flex-wrap: nowrap; justify-content: space-between;}
  a.logo {margin-right: auto; margin-left: 2vw; flex-grow: 0; flex-basis:content;}
  div.text {min-width: 490px;margin-top: 6vw; margin-right: 8vw;}
  div.text h1 {font-size: 3.2rem;}
  div.text h2 {font-size: 2.0rem;}
  div.text p {font-size: 1.7rem;}
  footer.site-footer {flex-direction: row; justify-content: space-between;}
  .marquee-content.open {grid-template-columns: repeat(3, 1fr);}
}
@media only screen and (min-width: 768px) {
  body {font-size: 1.6rem;}
  main.site-main {margin: 4rem auto;}
  main.site-main > *:not(:last-child) {margin-bottom: 4rem;}
  nav.topnav, footer.site-footer {padding: 0 3vw;}
  header.splash {height: 720px;}
  #courses {grid-template-columns: 1fr;}
  #courses > div:nth-of-type(2n) {justify-self: end;}
  .two-col .col {flex: 1 0 50%; max-width: 70ch; min-width: 50ch;}
  .wrap {padding: 0 1vw 2rem 1vw; gap: 1.5em 3em; grid-template-columns: repeat(2, 1fr);}
  div.text h1 {font-size: 3.6rem;}
  div.text h2 {font-size: 2.2rem;}
  div.text p {font-size: 1.8rem;}
  .lead strong {color: var(--color);}
  .marquee-content.open {grid-template-columns: repeat(4, 1fr);}
  .ratio-wrap {flex-direction: row; gap: 2em; margin-top: 5rem;}
  .ratio-wrap > div > img {display: inherit;}
}
@media only screen and (min-width: 1080px) {
  body {font-size: 1.6rem;}
  main.site-main {margin: 5rem auto;}
  main.site-main > *:not(:last-child) {margin-bottom: 5rem;}
  nav.topnav, footer.site-footer {padding: 0 4vw;}
  .wrap {padding: 0 1vw 2rem 1vw; gap: 2em 4em; grid-template-columns: repeat(3, 1fr);}
  div.text h1 {font-size: 4rem;}
  div.text h2 {font-size: 2.3rem;}
  div.text p {font-size: 1.9rem;}
  .marquee-content.open {grid-template-columns: repeat(5, 1fr);}
}
@media only screen and (min-width: 1280px) {
  body {font-size: 1.7rem;}
  main.site-main {margin: 6rem auto;}
  main.site-main > *:not(:last-child) {margin-bottom: 6rem;}
  nav.topnav, footer.site-footer {padding: 0 5vw;}
  .design-main .wrap {padding: 0 0 2rem 0; gap: 2em 2em; grid-template-columns: repeat(4, 1fr);}
  div.text h1 {font-size: 4.4rem;}
  div.text h2 {font-size: 2.5rem;}
  div.text p {font-size: 2rem;}
  .marquee-content.open {grid-template-columns: repeat(6, 1fr);}
}
@media only screen and (min-width: 1440px) {
  body {font-size: 1.8rem;}
  main.site-main {margin: 7rem auto;}
  main.site-main > *:not(:last-child) {margin-bottom: 7rem;}
  nav.topnav, footer.site-footer {padding: 0 6vw;}
} 
/* @media screen and (min-width: 1920px) {
}
oldcolor variables
  /* --mid: #ADAAAA;
  --milight: #DCE3E4;
  --old-milight: #E5E1E1;
  --dim-old: #7a7892;
  --deep: rgba(4, 0, 26, 0.86);
  --gradient: linear-gradient(120deg, rgba(241,100,174,1) 0%,  rgba(98,69,248,1) 100%);
  --gradient-good: linear-gradient(170deg, #292E49, #536976);
  --gradient: linear-gradient(170deg, #292e49, #536976, #bbd2c5);
  --gradient: linear-gradient(45deg, #2b32b2, #1488cc);
  --lightcolor: #7055F6;
  --color-old: #6810e2; 
  --lcolor: #C4455E;
  --color: #902d41;
  --dcolor: #5D1D2A;
  --color: #D03985;
  --dcolor: #A52766;
    --lcolor: #ED1D3F;
  --color: #C8102E;
   --onecolor: #543ec1;
  */