/* HOPKINS FONTS */

@font-face {
  font-family: 'quadon';
  src: url('fonts/Quadon-Regular.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'gentona';
  src: url('fonts/Gentona-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'gentona';
  src: url('fonts/Gentona-Book.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'gentona';
  src: url('fonts/Gentona-BookItalic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'gentona';
  src: url('fonts/Gentona-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'gentona';
  src: url('fonts/Gentona-MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'gentona';
  src: url('fonts/Gentona-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'gentona';
  src: url('fonts/Gentona-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'gentona';
  src: url('fonts/Gentona-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'gentona';
  src: url('fonts/Gentona-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'arnhem';
  src: url('fonts/Arnhem-Blond.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'titlinggothic';
  src: url('fonts/Titling-Gothic-Regular.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'titlinggothic';
  src: url('fonts/Titling-Gothic-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'titlinggothic';
  src: url('fonts/Titling-Gothic-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* Hopkins Colors */

.hopkinsDarkBlue {
	color:#005EB8;
}

.hopkinsLightBlue {
	color:#68ACE5;#418FDE;
}

.hopkinsLightGray {
	color:#7E7E7C;
}

.hopkinsMediumGray {
	color:#4A484C;
}

.hopkinsDarkGray {
	color:#2C2C33;
}


/* MAIN STYLE */

a:link
{
  color: #418FDE;
}

a:visited
{
   color : #418FDE;/*#470A68;*/
}

a:hover
{
   color : #68ACE5;
}

a
{
	text-decoration:none;
	font-weight:600;
}


.bracket:hover{
    color: black;
}

.bracket{
    font-weight: 400;
}

body {
	background-color: #68ACE5;#A7BCD6;#E5E2E0;#418FDE;
}

blockquote {
	margin-top:-8px;	
}

.outsideWrapper {
	margin: 0 auto;
	width:960px;
	margin-top: -10px;
	background-color: white;
	border: 0px solid #7E7E7C;
	border-radius:0px;
    /*-moz-box-shadow: 0 0 10px 1px #7E7E7C;
	-webkit-box-shadow: 0 0 10px 1px #7E7E7C;
	box-shadow: 0 0 10px 1px #7E7E7C;*/
}

#insideWrapper {
	width: 910px;
	padding-top:5px;
	margin:0 auto;
}

.sectionDiv {
	border-left:8px solid;
	padding-left:40px;
	padding-top:1px;
	padding-bottom:1px;
}

.main
{
	font-family: Gentona,Arial,sans-serif;
	color: black;
	font-size:13.5pt;
	font-weight: 400;
}

hr {
    border: 0;
    height: 1px;
    background: #e7e4e1;   /* clean, light hairline divider */
}

.labTitle {
	font-family: TitlingGothic;
	font-size: 58pt;
	text-align: center;
	text-transform: uppercase;
	font-weight: 500;
	color: #7E7E7C;
	line-height:90%;
	margin: 0 auto;
	padding-top:20px;
}


#hopkins {
	letter-spacing:.5px;
	position:relative;
	bottom:12px;
	font-weight:inherit;
}

#perception {
	/*letter-spacing:.5px;*/
}

#mind {
	letter-spacing:.5px;
}

#laboratory {
	letter-spacing:.5px;
	position:relative;
	bottom:12px;
}


.labTitleSmall {
	font-size:24pt;
}


.labTitleSubpage {
	font-family:TitlingGothic;
	font-size: 38pt;
	text-align: center;
	text-transform: uppercase;
	font-weight: 500;
	color: #7E7E7C;
	line-height:70%;
	margin: 0 auto;
}

.subpageTitle {
	font-size: 48pt;
	text-align: center;
	text-transform: uppercase;
	font-weight: 700;
	color: #7E7E7C;
	line-height:75%;
	margin: 0 auto;
	margin-top:8px;
}

.subpageHeader {
	display:table;
	font-size: 28pt;
	font-weight: 700;
	text-align: center;
	margin: 0 auto;
	margin-bottom:-10px;
}

.sectionHeader {
	color: #7E7E7C;
	font-size: 22pt;
	font-weight: 600;
	line-height: 50%;
	text-decoration: none;
	margin-left:-20px;
}

.navButton, .bigNavButton, #returnHome {
	display:inline-block;
	background: white;
	color: #4A484C;
	text-align: center;
	font-size: 18pt;
	font-weight: 600;
	text-transform:uppercase;
	border-bottom:8px solid;
	border-radius:0px;
	margin-right:14px;
	margin-left:14px;
	margin-bottom:20px;
	margin-top:8px;
	padding:5px 0px 0px 0px;
	width:120px;

}

/*.navButton, .bigNavButton, #returnHome {
	display:inline-block;
	background: white;
	color: #4A484C;
	text-align: center;
	font-size: 17pt;
	font-weight: 600;
	text-transform:uppercase;
	border-bottom:8px solid;
	border-radius:0px;
	margin-right:10px;
	margin-left:10px;
	margin-bottom:20px;
	margin-top:8px;
	padding:5px 0px 0px 0px;
	width:106px;

}*/


/*
.bigNavButton {
    font-size: 28pt;
    border-bottom:12px solid;
    width:240px;
}*/

.navDiv {
	text-align:center;
}


.announcement {
	text-align: center;
	font-weight: bold;
	/*font-style: italic;*/
	margin: 0 auto;
	margin-top:-5px;
}

.caption {
	font-size:10pt;
	text-align: center;
	margin: 0 auto;
}

.news {
	font-size:12pt;
	line-height:100%;
    margin-left:-21px;
}

#news li 
{
    background: url(images/cube.png) no-repeat 0px 1px transparent;
    background-size:16px;
    list-style-type: none;
    margin: 0;
    padding: 0px 0px 5px 26px;
    vertical-align: middle;
    width:94%;
}

.newsDate {
	display:inline-block;
	font-size:8.5pt;
	color:#6f6f6d;
	background:#f1efed;
	border-radius:999px;
	padding:1px 9px;
	margin-left:4px;
	vertical-align:1px;
	white-space:nowrap;
}

.stress {
	font-size:14pt;
}

.small {
	font-size:11pt;
}

.personName, .abstractName {
	font-size:15pt;
	font-weight: bold;
}

.personTitle, .abstractAuthors {
	font-size: 12pt;
	font-style: italic;
}

.personCategory, .pubsCategory, .bioCategory, .abstractDay {
	font-size: 17pt;
	font-weight: 600;
	margin-left: 15px;
	text-decoration: underline;
}	

.personPhoto {
	width: 150px;
	height: 184px;
	border:0px solid #7E7E7C;
	border-radius:10px;
	-moz-box-shadow: 0 0 5px 1px #7E7E7C;
	-webkit-box-shadow: 0 0 5px 1px #7E7E7C;
	box-shadow: 0 0 5px 1px #7E7E7C;
}	


.grapplePhoto {
	display: block;
	width:100%;
	border:0px solid #7E7E7C;
	border-radius:8px;
	margin: 0 auto;
	margin-bottom:10px;
}


#labPage blockquote {
	margin-right:58px;
}

#photo{
    display:block;
    /*width:100%;*/
    /*height:39%;*/
    margin-top:0px;
}

#introPhoto {
	/*float: right;*/
    display:block;
	width:100%;
	/* Pin the box to the primary photo's exact ratio so the hover-swap
	   image can't nudge the page height. Primary renders uncropped; the
	   hover image is cover-fit to the same box. */
	aspect-ratio: 1899 / 1100;
	object-fit: cover;
	border:0px solid #7E7E7C;
	border-radius:8px;
	margin: 0 auto;
    /*margin-right:5%;*/
}


#introPhoto:hover {
    content: url('../images/group2026_vss_holdingchaz.jpg');
}

#introPhotoHoverPreload{
    display:none;
}


#logo {
    /*float: left;*/
	display:block;
    width:100%;
	border:0px solid #7E7E7C;
	/*border-radius:8px;*/
	margin: 0 auto;
    margin-top:25px;
    margin-bottom:25px;
    /*margin-left:5%;*/
}

#labDescription,#chazIntro{
	padding-top:12px;
	border-color:#68ACE5;
}



#people, #navPeople  {
	border-color: #FBD872;
}

#navPeople:hover {
	color:black;
	border-color: #e6c300;#e3be42;
}

#navJoin, #join {
	border-color: #E8927C;
}

#navJoin:hover {
	color:black;
	border-color: #E03C31;
}

/*
#navJoin{
    border-image:   linear-gradient(to right, #E8927C 14.2%, #FF9E1B 14.2%, #FF9E1B 28.4%,#FBD872 28.4%, #FBD872 42.6%, #86C8BC 42.6%, #86C8BC 56.8%, #68ACE5 56.8%, #68ACE5 70%, #470A68 70%, #470A68 85%, #8E3A80 85%) 8;
} */


/*#navFun{
    border-image:   linear-gradient(to right, #E8927C 14.2%, #FF9E1B 28.4%, #FBD872 42.6%, #86C8BC 56.8%, #68ACE5 70%, #470A68 85%) 1;
}*/

#navFun{
    border-image:   linear-gradient(to right, rgba(232,146,124,.7) 14.2%, rgba(255,158,27,.7) 28.4%, rgba(251,216,114,.7) 42.6%, rgba(134,200,188,.7) 56.8%, rgba(104,172,229,.7) 70%, rgba(71,10,104,.7) 85%) 1;
    border-top:0;
    border-left:0;
    border-right:0;
}

#navFun:hover{
    color:black;
    border-image:   linear-gradient(to right, rgba(232,146,124) 14.2%, rgba(255,158,27) 28.4%, rgba(251,216,114) 42.6%, rgba(134,200,188) 56.8%, rgba(104,172,229) 70%, rgba(71,10,104) 85%) 1;
    border-top:0;
    border-left:0;
    border-right:0;
}


    
#navResearch{
	border-color: #7C7FAB;
	letter-spacing:-.5px;
}

#navResearch:hover{
	color:black;
	border-color: #470A68;
}

#navValues{
	border-color: rgba(71, 10, 104,.65);#865D9C;#A192B2;#7C7FAB;
}

#navValues:hover{
	color:black;
	border-color: #470A68;
}

#navPubs{
	border-color: #B4B2AD;#7E7E7C;
}

#navPubs:hover{
	color:black;
	border-color: #4A484C;
}

#navNews, #news {
	border-color: #86C8BC;
}

#navNews:hover {
	color:black;
	border-color: #007A53;
} 

#navHome,#returnHome {
	/*color: #86C8BC;*/
	border-color: #68ACE5;
}

#navHome:hover, #returnHome:hover {
	color: black;
	border-color: #005EB8;
}

#backToTop {
	display:inline-block;
	color:#4A484C;
	position:fixed;
	right:40px;
	bottom:40px;
	width:100px;
	height:20px;
}

.pubsList a {
	font-weight:inherit;
}

.pubsList {
	font-size:12.5pt;
	margin-right:30px;
	margin-left:-30px;
}

#pubs li 
{
    background: url(images/cube.png) no-repeat 0px 1px transparent;
    background-size:16px;
    list-style-type: none;
    margin: 0;
    padding: 0px 0px 10px 20px;
    vertical-align: middle;
}

.pubEntry {
	position:relative;
	left:10px;
}

.journalTitle {
	font-style:italic;
	font-weight:600;
}

.journalVolume {
	font-style:italic;
}

.pubNote {
    display:block;
	font-size:10.5pt;
	margin-left:15px;
    margin-top:3px;
    width:95%;
}

.collapsible{
    background-color: #E5E2E0;
    font-size:12pt;
    font-family: inherit;
    cursor: pointer;
    padding: 5px;
    width: 90%;
    border: 2px groove;
    text-align: left;
    outline: none;
    transition: 0.2s;
    margin-left:20px;
    margin-top:2px;
}

.collapsible:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: white;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2796"; /* Unicode character for "minus" sign (-) */
}

.active, .collapsible:hover {
    background-color: #B4B2AD;
}

.collapsible.conferenceName{
    margin-top:10px;
}

.abstract {
    padding: 10px;
    display: none;
    background-color: #E5E2E0;
    font-size:10.5pt;
    margin-left:20px;
    width:90%;
    border: 1px groove;
    text-align: left;
    outline: none;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.conferenceAbstract {
    display:none;
    padding:0 20 0 20;
}

#conferences {
    padding-bottom:20px;
}

#chaz #chazPhoto {
	display:table;
	margin: 0 auto;
}

#chaz .sectionDiv:nth-of-type(even) {
    border-color: #4A484C;
}

#chaz .sectionDiv:nth-of-type(odd) {
    border-color: #B4B2AD;
}

/*#chaz #subpageNav {
	border-color: rgba(255,255,255,0);
}*/

#chaz #contact {
	margin-top:initial;
}

#chaz #chazLabTitle a {
	font-weight:inherit;
	color: inherit;
}

#chaz .icon{
    height:20px;
    transform: translate(0%, 15%);
}

#join .sectionDiv:nth-of-type(even) {
	border-color: #E03C31;
}

#join .sectionDiv:nth-of-type(odd) {
    border-color: #E8927C;
}

#join #subpageNav {
	border-color: rgba(255,255,255,0);
}

#join #joinHome {
	border-color: rgba(255,255,255,0);
}

#join #RAQlist {
	font-size:12pt;
}


#publications .sectionDiv:nth-of-type(even) {
    border-color: #4A484C;#470A68;
}

#publications .sectionDiv:nth-of-type(odd) {
    border-color: #B4B2AD;#7C7FAB;
}


#publications #subpageNav {
	border-color: rgba(255,255,255,0);
}

#researchIntro {
    border:none;
}

#research {
	display:table;
	padding-top:30px;
	border-color:#7C7FAB;
}

#researchText {
	float:right;
	width:61%;
	margin-right:0px;
	margin-top:-5px;
	background:#E5E2E0;
	border-radius:8px;
	padding:20px;
	padding-bottom:0px;
}

#researchImages {
	text-align:center;
	float:left;
	width:30%;
	line-height:110%;
}

#fun .sectionDiv {
    border-color:#B4B2AD;
    /*border-image:   linear-gradient(to right, rgba(232,146,124) 14.2%, rgba(255,158,27) 28.4%, rgba(251,216,114) 42.6%, rgba(134,200,188) 56.8%, rgba(104,172,229) 70%, rgba(71,10,104) 85%) 1;
    border-top:0;
    border-bottom:0;
    border-right:0;*/
}


#faq .sectionDiv:nth-of-type(even) {
	border-color: #E03C31;
}

#faq .sectionDiv:nth-of-type(odd) {
    border-color: #E8927C;
}

#faq #faqHome {
	border-color: rgba(255,255,255,0);
}

#values .sectionDiv:nth-of-type(even) {
	border-color: rgba(71, 10, 104,.65);
}

#values .sectionDiv:nth-of-type(odd) {
    border-color: rgba(71, 10, 104,1);
}

#values #subpageNav {
	border-color: rgba(255,255,255,0);
}

#faq .faqText{
    color:#4A484C;
    margin:10px;
}

#faq #faqList li{
    margin-top:40px;
    width:98%;
}


.shape {
	width:100%;
	margin: 0 auto;
}

#shapeskeleton {
	margin-top:20px;
	margin-bottom:30px;
}

#tower {
	width:100%;
	margin: 0 auto;
	margin-bottom:5px;
}

#rockbalance {
	width:100%;
	margin: 0 auto;
	border: 3px solid black;
	margin-bottom:6px;
}

#tetris {
	width:70%;
	margin: 0 auto;
	/*border: 3px solid black;*/
	margin-bottom:8px;
}

#coin {
	width:85%;
	margin: 0 auto;
	border: 3px solid black;
	margin-bottom:8px;
}

#greco {
	width:100%;
	margin: 0 auto;
	margin-bottom:6px;
	border:3px solid black;
}

#adversarial {
    width:85%;
	margin: 0 auto;
	margin-bottom:6px;
	border:3px solid black;
}


/* ======================================================================
   MODERNIZATION & RESPONSIVE LAYER (2026)
   A non-destructive polish pass appended after the original styles so it
   only overrides where intended. Goals: cross-browser robustness, mobile
   reflow, a scrollable News box, and subtle modern touches — all while
   staying faithful to the original look.
   ====================================================================== */

/* --- Cross-browser robustness ------------------------------------------ */

/* Predictable box model everywhere (prevents width + padding overflow). */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;          /* smooth in-page nav jumps */
    -webkit-text-size-adjust: 100%;   /* stop iOS Safari inflating text */
    text-size-adjust: 100%;
}

/* NOTE: deliberately NOT overriding font-smoothing or text-rendering here.
   Forcing "antialiased" made text render lighter than the browser default,
   which thinned out the bold links and titles. Leaving the native rendering
   keeps weights looking exactly as on the original site. */

/* Media never overflows its container on any browser/screen. */
img, video {
    max-width: 100%;
    height: auto;
}

/* Exception: fixed-size profile photos must keep their real 150x184
   dimensions. Without this, the max-width rule above lets the table cell
   squish the width while the fixed height stays put — distorting them into
   tall, narrow slivers. */
.personPhoto {
    max-width: none;
}

/* Smooth, consistent hover feedback for links and nav buttons. */
a {
    transition: color 0.15s ease;
}

.navButton, .bigNavButton, #returnHome {
    transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.navButton:hover, .bigNavButton:hover, #returnHome:hover {
    transform: translateY(-2px);      /* gentle lift; no layout shift */
}

.personPhoto {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}


/* --- Fluid white "card" ------------------------------------------------ */
/* On wide screens this is still the original fixed 960px column; below
   that it simply shrinks to fit instead of forcing a horizontal scroll. */

.outsideWrapper {
    width: 100%;
    max-width: 960px;
    box-shadow: 0 2px 28px rgba(0, 0, 0, 0.12);   /* subtle modern lift */
}


/* --- Scrollable News box ----------------------------------------------- */
/* Keeps the homepage compact: the (long) news list lives in its own
   scroll area with a soft fade hinting there's more below. */

ul.news {
    max-height: 27rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;   /* momentum scroll on iOS */
    overscroll-behavior: contain;        /* don't scroll the page past ends */
    line-height: 1.4;
    padding-top: 14px;
    padding-right: 20px;
    padding-bottom: 10px;
    /* Soft fade at both the top and bottom edges, so the list dissolves
       into the page and hints there's more above and below. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 26px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - 26px), transparent 100%);
    scrollbar-width: thin;               /* Firefox */
    scrollbar-color: #b9b9b9 transparent;
}

#news li {
    padding-bottom: 12px;                /* a little more air between items */
}

/* WebKit/Blink scrollbar styling (Chrome, Safari, Edge). */
ul.news::-webkit-scrollbar {
    width: 10px;
}
ul.news::-webkit-scrollbar-track {
    background: transparent;
}
ul.news::-webkit-scrollbar-thumb {
    background: #cdcdcd;
    border-radius: 8px;
    border: 2px solid #fff;
}
ul.news::-webkit-scrollbar-thumb:hover {
    background: #86C8BC;                  /* teal — matches the News accent */
}


/* --- Responsive reflow -------------------------------------------------- */

/* Below the fixed column width, give the content real side gutters. */
@media (max-width: 959px) {
    #insideWrapper {
        width: auto;
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
    .sectionDiv {
        padding-left: 22px;
    }
    #labPage blockquote {
        margin-right: 0;
    }
    /* Research summary: stack the two floated columns. */
    #researchText, #researchImages {
        float: none;
        width: 100%;
        margin: 0 0 16px 0;
    }
    .pubsList {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Tablet / phone: smaller headings so they don't overflow. */
@media (max-width: 700px) {
    .subpageTitle      { font-size: 30pt; }
    .labTitleSubpage   { font-size: 24pt; }
    .subpageHeader     { font-size: 20pt; }
    .sectionHeader     { font-size: 18pt; }
    .labTitle          { font-size: 38pt; }
    .personCategory, .pubsCategory, .bioCategory, .abstractDay { font-size: 15pt; }

    /* Nav buttons: slightly smaller and tighter so more fit per row. */
    .navButton, .bigNavButton, #returnHome {
        font-size: 14pt;
        width: 104px;
        margin-left: 7px;
        margin-right: 7px;
    }
}

/* Phones: stack each person's photo above their bio (tables -> blocks).
   Covers both the lab People cards (.photoBlock) and the header photo on
   Chaz's personal page (#chazPhoto). */
@media (max-width: 600px) {
    .photoBlock table,
    .photoBlock tbody,
    .photoBlock tr,
    .photoBlock td,
    #chazPhoto table,
    #chazPhoto tbody,
    #chazPhoto tr,
    #chazPhoto td {
        display: block;
        width: auto !important;
        height: auto;
    }
    .photoBlock td[width="30"],   /* the horizontal spacer cells */
    #chazPhoto td[width="20"] {
        display: none;
    }
    .personPhoto {
        margin-bottom: 12px;
    }
    /* Centre Chaz's stacked header (photo + name/title/links). The base
       rule sets display:table on #chaz #chazPhoto, so match its specificity
       to override it. text-align must be set on the cells too, since a
       <table> doesn't pass text-align down to its <td>s. */
    #chaz #chazPhoto {
        display: block;
    }
    #chaz #chazPhoto,
    #chaz #chazPhoto td {
        text-align: center;
    }
    ul.news {
        max-height: 22rem;
    }
}

/* Very small phones: keep the nav buttons readable and tappable. */
@media (max-width: 380px) {
    .navButton, .bigNavButton, #returnHome {
        font-size: 13pt;
        width: 44%;
        margin-left: 2%;
        margin-right: 2%;
    }
}


/* --- Accessibility ------------------------------------------------------ */

/* Visible keyboard-focus ring (only shows for keyboard users, not on click),
   so the site can be navigated by Tab. */
a:focus-visible,
.navButton:focus-visible,
.bigNavButton:focus-visible,
#returnHome:focus-visible,
button:focus-visible {
    outline: 3px solid #005EB8;   /* Hopkins blue */
    outline-offset: 2px;
    border-radius: 2px;
}

/* Respect users who ask their OS to minimise motion: turn off smooth
   scrolling and the hover/transition animations. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
    .navButton:hover,
    .bigNavButton:hover,
    #returnHome:hover {
        transform: none;   /* no hover-lift */
    }
}