/* * {
  outline: 1px solid red;
} */

:root {
  --site-width: 56em;
  --vweight: 400;
  --vwidth: 100;
  --mod-weight: 0.01;
  --mod-width: 0.01;
  --zoom: 1;
  --mod-weight-normalized: calc(var(--mod-weight) / 8);
  --square-font-weight: 0;
  --thumbnailweight: 700;
  --textopacity: 1;
  --headerweight1: 460;
  --headerweight2: 700;
  --transitionspeed: 0.2s;
  --transitionspeed2: 0.3s;
  --transdelay1: var(--transdelay1const);
  --transdelay2: var(--transdelay2const);
  --transdelay3: var(--transdelay3const);
  --transdelay1const: 0.25s;
  --transdelay2const: 0.1s;
  --transdelay3const: 0.1s;
  --headerfontsize: 1.25em;
  --logosize: 50px;
  --logosizesmall: 30px;
  --gap: 0.8em;
  --gap-small: calc(var(--gap) / 2);
  --gap-small-small: calc(var(--gap) / 4);
  --gap-double: calc(var(--gap) * 2);
  --gap-400: calc(var(--gap) * 4);
  --gap-300: calc(var(--gap) * 3);
  --gap-200: calc(var(--gap) * 2);
  --gap-175: calc(var(--gap) * 1.75);
  --gap-150: calc(var(--gap) * 1.5);
  --gap-125: calc(var(--gap) * 1.25);
  --gap-75: calc(var(--gap) * 0.75);
  --gap-66: calc(var(--gap) * 0.66);
  --gap-50: calc(var(--gap) * 0.5);
  --gap-33: calc(var(--gap) * 0.33);
  --gap-25: calc(var(--gap) * 0.25);
  --backgroundcolor: #fff;
  --backgroundcolordarkmode: #1e1e1e;
  --backgroundcolordarkmode: #151515;
  --behancecolor: #0f5fff;
  --behancecolordarkmode: #4885ff;
  --behancetext: #226bff;
  --behancetextdarkmode: #226bff;
  --linkedincolor: #007dbb;
  --linkedincolordarkmode: #0594dc;
  --gmailcolor: #e71401;
  --gmailcolordarkmode: #e76557;
  --buttonsvgheight: var(--buttonsvgheightnormal);
  --buttonsvgheightnormal: 36px;
  --buttonsvgheightsmall: 31px;
  --lighttext: #f2f2f2;
  --darktext: #0d0d0d;

  --redtext: #df3030;
  --redtextdarkmode: #ee6868;
  --redtextlarge: #e34848;
  --redtextlargedarkmode: #ff5b5b;
  --orangetext: #c65200;
  --orangetextdarkmode: #ff6a00;
  --orangetextlarge: #e55f00;
  --orangetextlargedarkmode: #ff6a00;
  --yellowtext: #857600;
  --yellowtextdarkmode: #c9b200;
  --yellowtextlarge: #a79400;
  --yellowtextlargedarkmode: #a7971b;
  --greentext: #2d8700;
  --greentextdarkmode: #6cb149;
  --greentextlarge: #1d9d04;
  --greentextlargedarkmode: #59ab30;
  --tealtext: #00838c;
  --tealtextdarkmode: #05a3a5;
  --tealtextlarge: #0096a0;
  --tealtextlargedarkmode: #12a4ae;
  --bluetext: #007ac6;
  --bluetextdarkmode: #159bed;
  --bluetextlarge: #0088db;
  --bluetextlargedarkmode: #059bf8;
  --purpletext: #9328f5;
  --purpletextdarkmode: #b46afa;
  --purpletextlarge: #a149f2;
  --purpletextlargedarkmode: #b976f8;
  --pinktext: #c73a9f;
  --pinktextdarkmode: #dd52b6;
  --pinktextlarge: #e652bc;
  --pinktextlargedarkmode: #e652bc;
  --linktext: #1f54ff;
  --linktextdarkmode: #698cff;
  --link-underline: #6d8df7;
  --link-underline-darkmode: #435db4;
  --purple: #9328f5;
  --purpledarkmode: #ab61ee;
  --illustratortext: #9d6a05;
  --illustratortextdarkmode: #c48b26;
  --minimumgraytext: #767676;
  --minimumgraytextdarkmode: #858585;
  --minimumgrayUI: #939393;
  --minimumgrayUIdarkmode: #636363;
  --topologytext: #00ffe6;
  --beta-label: #ed9696;

  --header-red: #c25252;
  --header-red-darkmode: #e35e5e;
  --header-purple: #9739ee;
  --header-purple-darkmode: #ab66eb;
  --header-purple-text: #7800e9;
  --header-purple-text-darkmode: #b27ee3;
  --header-blue: #007bc7;
  --header-blue-7: #005c95;
  --header-blue-darkmode: #2ba3ed;
  --header-blue-7-darkmode: #839df3;
  --header-orange: #c25700;
  --header-orange-darkmode: #f07918;
  --header-green: #538300;
  --header-green-darkmode: #71b300;
  --header-green-7: #3f6300;
  --header-green-7-darkmode: #74b209;
  --green-logo: #81bc00;
  --green-logo-darkmode: #8ad900;
  --header-teal: #118190;
  --header-teal-darkmode: #14a3b6;
  --header-gray: #585858;
  --header-gray-darkmode: #a1a1a1;

  --hdrportfolio: var(--header-blue);
  --hdrportfolio-darkmode: var(--header-blue-darkmode);
  --hdrme: var(--header-purple);
  --hdrme-darkmode: var(--header-purple-darkmode);
  --hdrtext: var(--header-gray);
  --hdrtext-darkmode: var(--header-gray-darkmode);
  --any-page-controls-color: var(--darktext);
  --any-page-controls-color-darkmode: var(--lighttext);

  --contrast-tool-foreground: #9135ea;
  --contrast-tool-background: #f3e7ff;
  --readout-color: var(--minimumgraytext);
  --readout-color-bg: white;
  --contrast-readout-red: #ce0000;
  --contrast-readout-red-bg: #ffdbdb;
  --contrast-readout-red-darkmode: #ef7878;
  --contrast-readout-red-bg-darkmode: #3b1c1c;
  --contrast-readout-yellow: #7b7500;
  --contrast-readout-yellow-bg: #fffdcf;
  --contrast-readout-yellow-darkmode: #d3cc44;
  --contrast-readout-yellow-bg-darkmode: #3b391c;
  --contrast-readout-green: #427500;
  --contrast-readout-green-bg: #daf0bb;
  --contrast-readout-green-darkmode: #79c417;
  --contrast-readout-green-bg-darkmode: #2e4216;
  --contrast-readout-green: #007a04;
  --contrast-readout-green-bg: #c8f3ca;
  --contrast-readout-green-darkmode: #17c21d;
  --contrast-readout-green-bg-darkmode: #1b3b1c;
  --contrast-readout-blue: #0965c7;
  --contrast-readout-blue-bg: #daecff;
  --contrast-readout-blue-darkmode: #75b8ff;
  --contrast-readout-blue-bg-darkmode: #1c2b3b;
  --contrast-readout-gray: #676767;
  --contrast-readout-gray-darkmode: #909090;
  --border-color-square: rgba(112, 112, 112, 0.3);

  --rotate: 0deg;
  --tags-animate-translate: 10px;
  --tags-animate-opacity: 0;

  --block-unification: flex;
  --block-scada: flex;
  --block-oil: none;
  --block-emissions: flex;
  --block-topology: flex;
  --block-networking: flex;
  --block-behance: flex;
  --block-contrast: flex;

  --display-topology: flex;
  --display-unification: flex;
  --display-controlroom: flex;
  --display-database: flex;
  --display-emissions: flex;
  --rich-thumbs-more: inline;

  --rich-thumb-display: flex;

  --green: #95e86d;
  --bordercolor: #00000039;
  --border-light: #dddddd;
  --border-light-darkmode: #2e2e2e;
  --bordercolordarkmode: #ffffff0d;
  --image-container-color: #9c9c9c39;
  --image-container-color-darkmode: #9c9c9c39;
  --frontpagetransitionspeedopacity: 1300ms;
  --frontpagetransitionspeedfontvariationsettings: 1800ms;
  --opacityspeed: 1300ms;
  --fontvariationsettingsspeed: 1800ms;
  --salt: "normal";
  --topology-page-salt: normal;

  --high-contrast-light: white;
  --high-contrast-dark: black;
  --high-contrast-link: #0000ff;

  --square-img-scale: 1;
  --frontpage-illustration-bg: #e0e0e0;
  --frontpage-illustration-stroke: #adadad;
  --frontpage-illustration-active: black;
}
/* @media (prefers-color-scheme: dark) {
  :root {
    --redtext: var(--redtextdarkmode);
    --orangetext: var(--orangetextdarkmode);
    --yellowtext: var(--yellowtextdarkmode);
    --greentext: var(--greentextdarkmode);
    --tealtext: var(--tealtextdarkmode);
    --purpletext: var(--purpletextdarkmode);
    --pinktext: var(--pinktextdarkmode);
    --illustratortext: var(--illustratortextdarkmode);
    --minimumgraytext: var(--minimumgraytextdarkmode);
    --redtextlarge: var(--redtextlargedarkmode);
    --orangetextlarge: var(--orangetextlargedarkmode);
    --yellowtextlarge: var(--yellowtextlargedarkmode);
    --orangetextlarge: var(--orangetextlargedarkmode);
    --greentextlarge: var(--greentextlargedarkmode);
    --tealtextlarge: var(--tealtextlargedarkmode);
    --bluetextlarge: var(--bluetextlargedarkmode);
    --purpletextlarge: var(--purpletextlargedarkmode);
    --green-logo: var(--green-logo-darkmode);
    --purple: var(--purpledarkmode);
    --bluetext: var(--bluetextdarkmode);
    --linktext: var(--linktextdarkmode);
    --bordercolor: var(--bordercolordarkmode);
    --gmailcolor: var(--gmailcolordarkmode);
    --linkedincolor: var(--linkedincolordarkmode);
    --behancecolor: var(--behancecolordarkmode);
    --backgroundcolor: var(--backgroundcolordarkmode);
    --textcolor: var(--lighttext);
  }
} */
.darkmode {
  --linktext: var(--linktextdarkmode);
  --link-underline: var(--link-underline-darkmode);
  --redtext: var(--redtextdarkmode);
  --orangetext: var(--orangetextdarkmode);
  --yellowtext: var(--yellowtextdarkmode);
  --greentext: var(--greentextdarkmode);
  --tealtext: var(--tealtextdarkmode);
  --purpletext: var(--purpletextdarkmode) !important;
  --pinktext: var(--pinktextdarkmode);
  --illustratortext: var(--illustratortextdarkmode);
  --minimumgraytext: var(--minimumgraytextdarkmode) !important;
  --minimumgrayUI: var(--minimumgrayUIdarkmode) !important;
  --redtextlarge: var(--redtextlargedarkmode) !important;
  --orangetextlarge: var(--orangetextlargedarkmode) !important;
  --yellowtextlarge: var(--yellowtextlargedarkmode) !important;
  --orangetextlarge: var(--orangetextlargedarkmode) !important;
  --greentextlarge: var(--greentextlargedarkmode) !important;
  --tealtextlarge: var(--tealtextlargedarkmode) !important;
  --bluetextlarge: var(--bluetextlargedarkmode) !important;
  --purpletextlarge: var(--purpletextlargedarkmode) !important;
  --header-purple-text: var(--header-purple-text-darkmode) !important;
  --header-teal: var(--header-teal-darkmode);
  --header-orange: var(--header-orange-darkmode) !important;
  --green-logo: var(--green-logo-darkmode);
  --header-blue-7: var(--header-blue-7-darkmode) !important;
  --any-page-controls-color: var(--any-page-controls-color-darkmode);
  --header-green: var(--header-green-darkmode) !important;
  --header-gray: var(--header-gray-darkmode) !important;

  --purple: var(--purpledarkmode);
  --bluetext: var(--bluetextdarkmode);
  --bordercolor: var(--bordercolordarkmode);
  --gmailcolor: var(--gmailcolordarkmode);
  --linkedincolor: var(--linkedincolordarkmode);
  --behancecolor: var(--behancecolordarkmode);
  --behancetext: var(--behancetextdarkmode);
  --backgroundcolor: var(--backgroundcolordarkmode);
  --textcolor: var(--lighttext);
  --border-light: var(--border-light-darkmode);
  --contrast-readout-red: var(--contrast-readout-red-darkmode);
  --contrast-readout-red-bg: var(--contrast-readout-red-bg-darkmode);
  --contrast-readout-yellow: var(--contrast-readout-yellow-darkmode);
  --contrast-readout-yellow-bg: var(--contrast-readout-yellow-bg-darkmode);
  --contrast-readout-green: var(--contrast-readout-green-darkmode);
  --contrast-readout-green-bg: var(--contrast-readout-green-bg-darkmode);
  --contrast-readout-blue: var(--contrast-readout-blue-darkmode);
  --contrast-readout-blue-bg: var(--contrast-readout-blue-bg-darkmode);
  --contrast-readout-gray: var(--contrast-readout-gray-darkmode);

  --frontpage-illustration-bg: #313131;
  --frontpage-illustration-stroke: #4e4e4e;
  --frontpage-illustration-active: white;
  /* --header-purple: var(--header-purple-darkmode);
    --header-blue: var(--header-blue-darkmode);
    --header-orange: var(--header-orange-darkmode); */
}

.high-contrast {
  --link-underline: var(--high-contrast-link);
  --backgroundcolor: var(--high-contrast-light);
  --backgroundcolordarkmode: var(--high-contrast-dark);
  --behancecolor: var(--high-contrast-link);
  --behancecolordarkmode: var(--high-contrast-link);
  --behancetext: var(--high-contrast-dark);
  --linkedincolor: var(--high-contrast-link);
  --linkedincolordarkmode: var(--high-contrast-link);
  --gmailcolor: var(--high-contrast-link);
  --gmailcolordarkmode: var(--high-contrast-link);
  --beta-label: var(--high-contrast-dark);

  --lighttext: var(--high-contrast-light);
  --darktext: var(--high-contrast-dark);

  --redtext: var(--high-contrast-dark) !important;
  --redtextdarkmode: var(--high-contrast-light) !important;
  --redtextlarge: var(--high-contrast-dark) !important;
  --redtextlargedarkmode: var(--high-contrast-light) !important;
  --orangetext: var(--high-contrast-dark);
  --orangetextdarkmode: var(--high-contrast-light);
  --orangetextlarge: var(--high-contrast-dark);
  --orangetextlargedarkmode: var(--high-contrast-light);
  --yellowtext: var(--high-contrast-dark);
  --yellowtextdarkmode: var(--high-contrast-light);
  --yellowtextlarge: var(--high-contrast-dark);
  --yellowtextlargedarkmode: var(--high-contrast-light);
  --greentext: var(--high-contrast-dark);
  --greentextdarkmode: var(--high-contrast-light);
  --greentextlarge: var(--high-contrast-dark);
  --greentextlargedarkmode: var(--high-contrast-light);
  --header-green: var(--high-contrast-link);
  --header-green-darkmode: var(--high-contrast-link);
  --tealtext: var(--high-contrast-dark);
  --tealtextdarkmode: var(--high-contrast-light);
  --tealtextlarge: var(--high-contrast-dark);
  --tealtextlargedarkmode: var(--high-contrast-light);
  --bluetext: var(--high-contrast-dark);
  --bluetextdarkmode: var(--high-contrast-light);
  --bluetextlarge: var(--high-contrast-dark);
  --bluetextlargedarkmode: var(--high-contrast-light);
  --purpletext: var(--high-contrast-dark) !important;
  --purpletextdarkmode: var(--high-contrast-light);
  --purpletextlarge: var(--high-contrast-dark);
  --purpletextlargedarkmode: var(--high-contrast-light);
  --pinktext: var(--high-contrast-dark);
  --pinktextdarkmode: var(--high-contrast-light);
  --pinktextlarge: var(--high-contrast-dark);
  --pinktextlargedarkmode: var(--high-contrast-light);
  --linktext: var(--high-contrast-link);
  --linktextdarkmode: var(--high-contrast-link);
  --purple: var(--high-contrast-dark);
  --purpledarkmode: var(--high-contrast-light);
  --illustratortext: var(--high-contrast-dark);
  --illustratortextdarkmode: var(--high-contrast-light);
  --minimumgraytext: var(--high-contrast-dark);
  --minimumgraytextdarkmode: var(--high-contrast-light);
  --minimumgraytext: var(--textcolor);
  --minimumgraytextdarkmode: var(--textcolor);
  --topologytext: var(--high-contrast-dark);
  --header-purple: var(--high-contrast-link);
  --header-purple-darkmode: var(--high-contrast-link);
  --header-purple-text: var(--high-contrast-link);
  --header-purple-text-darkmode: var(--high-contrast-link);
  --any-page-controls-color: var(--high-contrast-dark);
  --any-page-controls-color-darkmode: var(--high-contrast-light);
  --header-blue: var(--high-contrast-link);
  --header-blue-darkmode: var(--high-contrast-link);
  --header-orange: var(--high-contrast-link);
  --header-orange-darkmode: var(--high-contrast-link);
  --green-logo: var(--high-contrast-link);
  --green-logo-darkmode: var(--high-contrast-link);

  --contrast-readout-red: var(--high-contrast-dark);
  --contrast-readout-yellow: var(--high-contrast-dark);
  --contrast-readout-green: var(--high-contrast-dark);
  --contrast-readout-blue: var(--high-contrast-dark);
  --contrast-readout-gray: var(--high-contrast-dark);
  --border-light: var(--high-contrast-dark);
  --border-color-square: var(--high-contrast-dark);

  .hdrlistitem {
    --button-color: var(--textcolor);
  }
  .hdrtext {
    color: var(--textcolor) !important;
  }
  .hdrtext:hover span {
    color: var(--textcolor) !important;
  }
  .hdrtext:active span {
    color: var(--textcolor) !important;
  }
}
.darkmode.high-contrast {
  --high-contrast-link: #ffff00;
  --high-contrast-dark: white;
  --high-contrast-light: black;
  --textcolor: white;
}
body {
  --textcolor: var(--darktext);
  background-color: var(--backgroundcolor);
  color: var(--textcolor);
}
.main {
  max-width: var(--site-width);
  margin: 0px auto;
  padding: 0 var(--gap-150);
}
#projects {
  margin-top: -5em;
  position: absolute;
}
body.low-contrast::before {
  /* togglable low contrast overlay */
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(127, 127, 127, 0.5);
  z-index: 1000;
  pointer-events: none;
}

/* Get rid of underline on links */
a:link {
  text-decoration: none;
}
a:visited {
  text-decoration: none;
}
a:hover {
  text-decoration: none;
}
a:active {
  text-decoration: none;
}

/* set font */
@font-face {
  font-family: "Test Font";
  src: url("topology.ttf");
}
@font-face {
  font-family: "Topology";
  src: url("topology.ttf");
}
body {
  font-family: "Test Font", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-variation-settings: "wght" calc(var(--vweight) + var(--mod-weight)),
    "wdth" calc(var(--vwidth) + var(--mod-width));
  margin: 0;
  font-feature-settings: var(--salt);
  font-size: calc(1em * var(--zoom));
}
@font-face {
  font-family: "Icon Font";
  src: url("mjr-icon-font-VF.ttf");
}
.icon-font {
  font-family: "Icon Font", "Test Font";
  user-select: none;
  /* font-size: calc(1em + 0.5px); */
  /* ^ breaks it from pixel grid, so it doesn't hint 
  also export the font as a variable font or it will be hinted no matter what */
}

body > .main > img {
  width: 100%;
}
body > .main > picture > img {
  width: 100%;
}
body > img {
  width: 100%;
}
body > .main > picture {
  width: 100%;
}
body > picture {
  width: 100%;
}
.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--gap) 0;
  flex-direction: column;

  img {
    width: 100%;
  }
}

.rounded-corner-image {
  border-radius: var(--gap-small);
}

/* .image-container {
  padding: var(--gap);
  border-radius: var(--gap);
  background-color: var(--image-container-color);
} */
p {
  font-family: "Test Font";
}
.spacer {
  height: 6rem;
}
.spacer-half {
  height: 3rem;
}
h1 {
  font-family: "Test Font";
  font-variation-settings: "wght" calc(700 + var(--mod-weight)),
    "wdth" calc(var(--vwidth) + var(--mod-width));
  text-align: center;
}
h2 {
  font-family: "Test Font";
  font-variation-settings: "wght" calc(700 + var(--mod-weight)),
    "wdth" calc(var(--vwidth) + var(--mod-width));
}
h3 {
  font-family: "Test Font";
  font-variation-settings: "wght" calc(300 + var(--mod-weight)),
    "wdth" calc(var(--vwidth) + var(--mod-width));
  text-align: center;
}
h4 {
  font-family: "Test Font";
  font-size: 2em;
  font-variation-settings: "wght" calc(700 + var(--mod-weight)),
    "wdth" calc(var(--vwidth) + var(--mod-width));
  text-align: center;
}
.mjrsubhead {
  font-size: 0.75em;
  text-transform: uppercase;
  font-variation-settings: "wght" calc(700 + var(--mod-weight)),
    "wdth" calc(10 + var(--vwidth) + var(--mod-width));
  letter-spacing: 0.15em;
}
.mjrsectiontitle {
  color: var(--minimumgraytext);
  padding-top: 6em;
  padding-bottom: 0.5em;
  font-variation-settings: "wght" calc(400 + var(--mod-weight)),
    "wdth" calc(5 + var(--vwidth) + var(--mod-width));
}

.mjrsectiontitle .icon-font {
  display: none;
  font-variation-settings: "wght" calc(600 + var(--mod-weight)),
    "wdth" calc(5 + var(--vwidth) + var(--mod-width));
  user-select: none;
}
.text-link greenlink {
  color: #39b101 !important;
}
/* .greenlink:hover {
  opacity: 0.5;
}
.greenlink:visited {
  color: #39b101 !important;
}
a .text-link {
  color: #39b101 !important;
} */
a {
  color: var(--linktext);
}
/* p a:link {
  text-decoration: underline;
}
p a:visted {
  text-decoration: underline;
} */
.underlined-links a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--link-underline);
}
p a {
  /* color: #39b101 !important; */
}
p a:visited {
  /* color: #39b101 !important; */
}
bold {
  font-variation-settings: "wght" calc(700 + var(--mod-weight)),
    "wdth" calc(var(--vwidth) + var(--mod-width));
}
.bold {
  font-variation-settings: "wght" calc(700 + var(--mod-weight)),
    "wdth" calc(3 + var(--vwidth) + var(--mod-width));
}
.note {
  font-size: 0.85em;
  color: var(--redtext);
}

.high-contrast .note {
  color: var(--textcolor);
}

/* captions */

.caption {
  font-size: 0.8em;
  margin: 0.5em;
  margin-bottom: -0.25em;
  color: var(--minimumgraytext);
}

gray {
  font-size: 0.75em;
}

.video-wrapper {
  display: flex;
  justify-content: center;
  margin: var(--gap) 0;
}

/* custom header */
#header {
  position: sticky;
  background-color: var(--backgroundcolor);
  z-index: 99999;
}
.hdrtopspacer {
  height: 3.6rem;
  height: 60px;
}
.hdrwrapper svg {
  height: var(--buttonsvgheight);
  overflow: visible;
}
.hdrwrapper img {
  height: var(--buttonsvgheight);
  overflow: visible;
}
.hdr {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  position: sticky;
  left: 0;
  width: 100%;
  top: 0px;
  z-index: 999;

  text-transform: uppercase;
  font-variation-settings: "wght" calc(700 + var(--mod-weight)),
    "wdth" calc(5 + var(--vwidth) + var(--mod-width));
  letter-spacing: 0.1em;
  pointer-events: none;
  background-color: var(--backgroundcolor);
}
.hdr-text {
  text-transform: none;
  font-variation-settings: "wght" calc(400 + var(--mod-weight)),
    "wdth" calc(5 + var(--vwidth) + var(--mod-width));
  letter-spacing: 0.04em;
}
.hdrwidth {
  width: -webkit-fill-available;
  width: -moz-available;
  max-width: 57.3em;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--gap);
  background-color: var(--backgroundcolor);
  pointer-events: all;
  --button-color: var(--header-gray);
}
.hdrlistitem.hdrlogo {
  padding: calc(var(--gap) * 0.63);
}

.hdrlistitem {
  color: var(--button-color);
}
.hdrlistitem:hover {
  color: color-mix(in srgb, var(--button-color) 50%, var(--textcolor));
  background-color: color-mix(in srgb, var(--button-color) 15%, transparent);
}
.hdrlistitem:active {
  color: color-mix(in srgb, var(--button-color) 50%, var(--textcolor));
  background-color: color-mix(in srgb, var(--button-color) 25%, transparent);
}
.hdritem {
  display: flex;
  align-items: center;
}
.hdrlist {
  font-size: 0.75em;
  display: flex;
  gap: var(--gap-small);
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media all and (max-width: 550px) {
  .hdrlist {
    display: flex;
    gap: var(--gap-small);
  }
}
.hdrlistitem {
  padding: var(--gap);
  display: flex;
  align-items: center;
  gap: var(--gap);
  border-radius: var(--gap-small);
  user-select: none;
}

.hdrlistitem .icon-font {
  font-size: 0.975em;
  font-variation-settings: "wght" calc(700 + var(--mod-weight)),
    "wdth" calc(5 + var(--vwidth) + var(--mod-width));
}

@media all and (max-width: 440px) {
  .header-links-text {
    display: none;
  }
}

/* Text Header Styles */
.hdrtext {
  color: var(--hdrtext);

  /* undo button styles */
  background: none;
  border: none;

  font: inherit;
  cursor: pointer;
}
.darkmode .hdrtext {
  --hdrtext: var(--hdrtext-darkmode);
}

.hdrtext:hover {
  background-color: color-mix(in srgb, var(--hdrtext) 20%, rgba(0, 0, 0, 0));
  cursor: pointer;
  color: color-mix(in srgb, var(--hdrtext) 50%, var(--textcolor));
}
.hdrtext:active {
  background-color: color-mix(in srgb, var(--hdrtext) 40%, rgba(0, 0, 0, 0));
  cursor: pointer;
  color: color-mix(in srgb, var(--hdrtext) 50%, var(--textcolor));
}
.hdrtext:hover .icon-font {
  color: color-mix(in srgb, var(--hdrtext) 50%, var(--textcolor));
}
.hdrtext-active {
  background-color: color-mix(in srgb, var(--hdrtext) 40%, rgba(0, 0, 0, 0));
}
.hdrtext-active .icon-font {
  color: color-mix(in srgb, var(--hdrtext) 50%, var(--textcolor));
}

.hdrselected:hover {
  /* opacity: 0.5;0 */
}
.hdrunselected {
  filter: brightness(0);
}
.hdrunselected:hover {
  filter: brightness(1);
}

.invisible {
  display: none;
  opacity: 0;
}

/* parallax hero images */
.llaxh1wrapperwrapper {
  display: flex;
  justify-content: center;
}
.llaxwrapper {
  height: 640px;
  max-height: 60vw;
  overflow-x: hidden;
  overflow-y: hidden;
  display: flex;
  transform-style: preserve-3d;
  border-radius: 30px;
  align-items: center;
  justify-content: center;
  perspective: 100px;
  margin-bottom: calc(var(--gap) * 2);

  svg {
    flex: 1;
  }
}
.llaxbackground {
  position: absolute;

  justify-content: center;
  left: auto;
  right: auto;
  width: 100%;
  transform: translate3d(0, 0, 10px);
  object-fit: cover;
  z-index: 2;
}
.parallax_layer {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  z-index: 3;
  transform: translateZ(11px);
  justify-content: center;
  align-items: flex-end;
}
/* fade in to let images load  */
/* .llaxwrapper {
  opacity: 0;
  animation: llaxFadeIn 0.8s ease-out 0.05s forwards;
}

@keyframes llaxFadeIn {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
} */

.llaxh1 {
  font-size: 3rem;
  font-variation-settings: "wght" calc(700 + var(--mod-weight)),
    "wdth" calc(var(--vwidth) + var(--mod-width));
  margin-bottom: 0.25em;
  text-align: center;
  padding: 0 var(--gap);
}
.high-contrast .llaxh1 {
  background-color: var(--high-contrast-light);
  color: var(--high-contrast-dark);
  padding: 0 var(--gap-small);
}
.high-contrast.darkmode .llaxh1 {
  background-color: var(--high-contrast-dark);
  color: var(--high-contrast-light);
}
@media all and (max-width: 550px) {
  .llaxwrapper {
    /* max-height: 70vw; */
  }
  .llaxh1 {
    font-size: 1.75em;
  }
  .llaxh1wrapper {
    /* max-height: 70vw; */
  }
}
.llaxtitle {
  z-index: 4;
  position: absolute;
  bottom: 50px;
  /* font-variation-settings:'wght' 700, 'wdth' var(--width); */
  transform: translate3d(0, -30px, 11px) scale(0.9);
}
.llaxtitle bold {
  /* size: 50px; */
}
.llaxh1wrapper {
  position: absolute;
  height: 640px;
  max-height: 60vw;
  width: 95%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 5;
  display: flex;
}
/* Hide scrollbar for Chrome, Safari and Opera */
.llaxwrapper::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.llaxwrapper {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* frontpage */

.frontpage-text {
  font-size: 2em;
  display: flex;

  justify-content: center;
  text-align: center;
  text-wrap: balance;
  user-select: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--opacityspeed),
    font-variation-settings var(--fontvariationsettingsspeed),
    letter-spacing var(--fontvariationsettingsspeed);
  --vweight: 25;
  font-variation-settings: "wght" calc(var(--vweight) + var(--mod-weight)),
    "wdth" calc(var(--vwidth) + var(--mod-width));
}
.frontpage-text-span {
  max-width: 25em;
}

.frontpage-bottom-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3em 1em;
  padding-bottom: 2em;
  color: var(--minimumgraytext);
  font-variation-settings: "wght" calc(300 + var(--mod-weight)),
    "wdth" calc(var(--vwidth) + var(--mod-width));
  text-align: left;
}
.frontpage-bottom-message::after {
  content: "© 2025 Michael J Reedy";
}

.darkmode .frontpage-bottom-message::after {
  content: "© 2025 Michael J Reedy. Enjoy dark mode!";
}

/* frontpage hero illustration  */
body.animate-weight .hero-line {
  transition: stroke-width 2s ease-in-out, stroke 1.5s ease-out;
}
body.animate-weight .hero-lines {
  transition: opacity 2s ease-in;
  opacity: 1;
}
.hero-lines-visible .hero-lines {
  opacity: 1;
}

.hero-lines {
  opacity: 0;
}
.hero-line {
  pointer-events: all;
  cursor: pointer;
}

.frontpage-hero-wrapper {
  padding-top: 3.5em;
  padding-bottom: 5em;
}

.frontpage-hero {
  --stroke: var(--frontpage-illustration-stroke);

  --frontpage-illustration-stroke-width: calc(var(--weight-normalized) * 20);

  * {
    transition: stroke 1.5s ease-out;
  }
  svg {
    margin: -1em 0;
    transform: scale(0.66);
  }
  .top {
    svg {
      margin-bottom: -3em;
    }
  }
  .bottom {
    svg {
      margin-top: -2em;
    }
  }
}
.frontpage-hero line:hover {
  --stroke: var(--frontpage-illustration-active);
}
.frontpage-hero path:hover {
  --stroke: var(--frontpage-illustration-active);
}
.frontpage-hero polyline:hover {
  --stroke: var(--frontpage-illustration-active);
}
.frontpage-hero rect:hover {
  --stroke: var(--frontpage-illustration-active);
}
.frontpage-hero image {
  pointer-events: none;
}

.frontpage-hero .active {
  --stroke: var(--frontpage-illustration-active);
}
.frontpage-hero .activated {
  --stroke: var(--frontpage-illustration-active);
}

@media all and (max-width: 550px) {
  .frontpage-hero {
    .top {
      svg {
        margin-bottom: -0.2em;
      }
    }
    .bottom {
      svg {
        margin-top: -0em;
      }
    }
    svg {
      transform: scale(1);
    }
  }
  .frontpage-hero-wrapper {
    padding-top: 3em;
    padding-bottom: 3em;
  }
}

/* about me page */
.me-at-my-desk-wrapper {
  position: relative;
  border-radius: var(--gap);
  overflow: hidden;
  --opacity: 0;
}
.me-at-my-desk-wrapper img {
  width: -webkit-fill-available;
  width: -moz-available;
}
.me-at-my-desk-absolute {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.me-at-my-desk-cycle {
  opacity: var(--opacity);
  transition: opacity 4s ease-in;
  animation: fadeLoop 30s infinite;
}
.me-at-my-desk-cycle:nth-child(1) {
  animation-delay: 0s;
}
.me-at-my-desk-cycle:nth-child(2) {
  animation-delay: 10s;
}
.me-at-my-desk-cycle:nth-child(3) {
  animation-delay: 20s;
}
.about-text {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.gray {
  color: var(--minimumgraytext);
}
.gray-300 {
  color: var(--minimumgraytext);
  text-transform: none;
  letter-spacing: 0;
  font-variation-settings: "wght" calc(300 + var(--mod-weight)),
    "wdth" calc(var(--vwidth) + var(--mod-width));
  /* color: var(--linkedincolor); */
}

/* add padding to the more projects section to match the whitespace between mjrsubheads and text */
.mjrsectiontitle + .flex-parent-portfolio-1 {
  padding-top: 1.8em;
}

/* project info list (role, timeline, tools, etc.) */
.maingrid {
  display: flex;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 50px;
  grid-row-gap: 0px;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
}
.maingridbox {
  padding: 10px;
  margin: 0;
  grid-column: span 3;
}
.submaingrid {
  display: flex;
  grid-gap: 30px;
}
@media all and (max-width: 900px) {
  .maingridbox {
    grid-column: span 6;
  }
}

@media all and (max-width: 300px) {
  .maingridbox {
    grid-column: span 12;
  }
}

/* checkboxes*/
input[type="checkbox"] {
  appearance: none;
  width: calc(var(--gap) * 1.5 * var(--zoom));
  height: calc(var(--gap) * 1.5 * var(--zoom));

  /* background-color: var(--backgroundcolor); */
  border: 2px solid #424242;
  border-radius: 0.3em;
  cursor: pointer;
}

input[type="checkbox"]:checked {
  color: var(--textcolor);
  padding: 0.1em;
  display: flex;
  align-items: center;
  justify-content: center;
}
input[type="checkbox"]:checked::before {
  font-family: "Icon Font";
  content: "";
  font-size: 0.55em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.15em;
  margin-right: 0.025em;
  font-variation-settings: "wght" calc(900 + (var(--mod-weight)) * 0.6);
}
.high-contrast input[type="checkbox"]:checked::before {
  border-color: var(--textcolor);
}

/* sliders  */
.slider {
  width: 200px;
  appearance: none;
  -webkit-appearance: none;

  border-radius: 20px;
  cursor: pointer;
  border: #d5d5d5;
  height: 25px;
  border-color: #d5d5d5;
  border-style: solid;
  border-width: 1.5px;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--textcolor);
  cursor: pointer;
  border-color: rgba(0, 0, 0, 0);
}
.slider::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;

  border-radius: 50%;
  background: var(--textcolor);
  cursor: pointer;
  border-color: rgba(0, 0, 0, 0);
}
/* controls outside topology page */
.any-page-text-controls-wrapper {
  display: flex;
  justify-content: flex-end;
  max-width: 920px;
  max-width: 76.5em;
  width: -webkit-fill-available;
  width: -moz-available;
  font-size: 0.75em;
}
.any-page-text-controls {
  position: absolute;
  display: flex;
  gap: var(--gap-small);
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  background-color: var(--backgroundcolor);
  /* background-color: color-mix(in srgb, var(--purpletext) 2%, var(--backgroundcolor)); */
  padding: var(--gap-small);
  /* border-bottom-right-radius: var(--gap-small);
  border-bottom-left-radius: var(--gap-small); */
  border-radius: var(--gap-small);

  pointer-events: all;
  color: var(--any-page-controls-color);
  width: min-content;

  user-select: none;

  font-variation-settings: "wght" calc(500 + var(--mod-weight)),
    "wdth" calc(var(--vwidth) + var(--mod-width));

  border: 1.5px solid
    color-mix(in srgb, var(--any-page-controls-color) 10%, transparent);
  filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.2));
}
@media all and (max-width: 930px) {
  .any-page-text-controls {
    margin-right: 1em;
  }
}

.high-contrast .any-page-text-controls {
  /* --purpletext: var(--high-contrast-link);
  --purple: var(--high-contrast-link); */
  border: 1.5px solid var(--any-page-controls-color);
}

.any-page-text-controls span {
  text-transform: capitalize;
  letter-spacing: 0.05em;
}
.any-page-text-controls-checkbox {
  display: flex;
  align-items: center;
  gap: var(--gap-small);
  padding: var(--gap) 0;
  cursor: pointer;
  padding-right: var(--gap-small);
  padding: var(--gap-small) 0;
  border-radius: var(--gap-small);
  width: fit-content;
}
.any-page-text-controls-checkbox:hover {
  background-color: color-mix(
    in srgb,
    var(--any-page-controls-color) 10%,
    var(--backgroundcolor)
  );
}
.any-page-text-controls-checkbox:active {
  background-color: color-mix(
    in srgb,
    var(--any-page-controls-color) 20%,
    var(--backgroundcolor)
  );
}
.any-page-text-controls-slider-label {
  width: 5em; /*sets the width for weight and width labels */
  font-variation-settings: "wght" calc(500 + var(--mod-weight)),
    "wdth" calc(100 + var(--mod-width));
}

.any-page-text-controls-header-button-inner {
  display: flex;
  align-items: center;
  gap: var(--gap-small);
}

.any-page-text-controls-menu-group {
  margin-left: calc(var(--gap) * 2);
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.any-page-text-controls-menu-group-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.any-page-text-controls-wrapper .axislabeltablerow {
  width: unset;
}

.any-page-text-controls .topology-checkbox {
}

.any-page-text-controls .slider::-webkit-slider-thumb {
  width: calc(1.25em * var(--zoom));
  height: calc(1.25em * var(--zoom));
  background-color: var(--backgroundcolor);
  border-color: var(--any-page-controls-color);
  border: calc(
      (0.1em + (0.05em * (0.01 * (var(--mod-weight) / 8)))) * var(--zoom)
    )
    solid color-mix(in srgb, var(--any-page-controls-color) 100%, transparent);
  border-style: solid;
}
.any-page-text-controls .slider::-webkit-slider-runnable-track {
  margin: calc(-0.18em * var(--zoom));
}

.any-page-text-controls .slider::-moz-slider-thumb {
  width: calc(1.25em * var(--zoom));
  height: calc(1.25em * var(--zoom));
  background-color: var(--any-page-controls-color);
}
/* .any-page-text-controls .slider::-moz-slider-runnable-track {
  margin: calc(0.18em * var(--zoom));
} */
.darkmode .any-page-text-controls .slider::-webkit-range-thumb {
  /* background-color: var(--purpletext); */
}
.darkmode .any-page-text-controls .slider::-moz-range-thumb {
  background-color: var(--any-page-controls-color);
}

.any-page-text-controls .demotr {
  height: 1em;
}

.any-page-text-controls .axislabeltext span {
  color: var(--any-page-controls-color) !important;
}

.any-page-text-controls .topology-checkbox input {
  border-color: color-mix(
    in srgb,
    var(--any-page-controls-color) 50%,
    transparent
  );
  background-color: transparent;
}
.high-contrast .any-page-text-controls .topology-checkbox input {
  border-color: var(--any-page-controls-color);
}

.any-page-text-controls
  .topology-checkbox
  input[type="checkbox"]:checked::before {
  color: var(--any-page-controls-color) !important;
  /* -webkit-text-stroke: 2px var(--any-page-controls-color); */
}

/* .any-page-text-controls {
  text-transform: capitalize;
  letter-spacing: .05em;
} 
.any-page-text-controls .mjrsubhead {
  text-transform: capitalize;
  letter-spacing: .05em;
} */

.any-page-text-controls input[type="checkbox"] {
  border: calc(0.1em + (0.05em * (0.01 * (var(--mod-weight) / 8)))) solid
    color-mix(in srgb, var(--any-page-controls-color) 45%, transparent);
  /* remaps --mod-weight to the line thickness */
}

.unclickable {
  pointer-events: none;
}
.any-page-text-controls-button {
  border-radius: var(--gap-small);
  border: none;
  padding: var(--gap-small);
  background-color: transparent;
  cursor: pointer;
  color: var(--any-page-controls-color);
  display: flex;
  gap: var(--gap-50);
  align-items: center;
  font-weight: unset;
}
.any-page-text-controls-button:hover {
  background-color: color-mix(
    in srgb,
    var(--any-page-controls-color) 10%,
    var(--backgroundcolor)
  );
}

.any-page-text-controls-button:active {
  background-color: color-mix(
    in srgb,
    var(--any-page-controls-color) 20%,
    var(--backgroundcolor)
  );
}

.any-page-text-controls button {
  font-size: 1em; /* reset button font size from default */
}
.any-page-text-controls-header-button {
  height: 2em;
}

.any-page-text-controls-header-button > .icon-font:first-of-type {
  display: none;
  /* I didn't like the icons I made so I'm just gonna hide them */
}

/* header buttons */
.any-page-text-controls-header {
  letter-spacing: 0.1em;
  padding-top: calc(var(--gap-small) / 2);
  padding-left: calc(var(--gap-small) / 2);
  display: flex;
  gap: var(--gap-small);
  align-items: center;
}

.any-page-text-controls-header-button {
  font-family: "Test Font";
  font-variation-settings: "wght" calc(500 + var(--mod-weight)),
    "wdth" calc(100 + var(--mod-width));
  letter-spacing: 0.05em;
  display: flex;
  gap: var(--gap-small);
  align-items: center;
}
.any-page-text-controls-header-button .icon-font {
  font-variation-settings: "wght" calc(500 + var(--mod-weight)),
    "wdth" calc(100 + var(--mod-width));
}

/* slider */
.slider-wrapper {
  display: flex;
  align-items: center;
  gap: var(--gap-small);
  padding-right: var(--gap);
}
.any-page-text-controls .slider {
  height: calc(1.25em * var(--zoom));
  border: calc(
      (0.1em + (0.05em * (0.01 * (var(--mod-weight) / 8)))) * var(--zoom)
    )
    solid color-mix(in srgb, var(--any-page-controls-color) 15%, transparent);
  border-style: solid;
  background-color: transparent;
  width: unset;
  width: calc(10em * var(--zoom));
}

.darkmode .any-page-text-controls .slider {
  border-color: color-mix(
    in srgb,
    var(--any-page-controls-color) 15%,
    transparent
  );
}
.high-contrast .any-page-text-controls .slider {
  border-color: var(--any-page-controls-color);
}

.any-page-text-controls .font-adjust-left {
  width: 6em;
}

.any-page-text-controls-text {
  color: var(--any-page-controls-color);
  font-family: "Test Font";
  letter-spacing: 0.1em;
  font-variation-settings: "wght" calc(500 + var(--mod-weight)),
    "wdth" calc(var(--vwidth) + var(--mod-width));
  text-transform: uppercase;
}
.any-page-text-controls-text .icon-font {
  font-variation-settings: "wght" calc(350 + var(--mod-weight)),
    "wdth" calc(var(--vwidth) + var(--mod-width));
}

.any-page-text-controls-spacer-horizontal {
  width: 100%;
  height: 2px;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}
.any-page-text-controls-spacer-horizontal div {
  height: 2px;
  align-content: center;
  width: calc(100% - 20px);
  background-color: color-mix(
    in srgb,
    var(--any-page-controls-color) 10%,
    var(--backgroundcolor)
  );
  background-color: rgba(0, 0, 0, 0);
}
.high-contrast .any-page-text-controls-spacer-horizontal div {
  background-color: rgba(0, 0, 0, 0);
}

.gray-out {
  opacity: 0.33;
}

.reset-on-hover {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.reset-on-hover-icon {
  position: absolute;
  visibility: hidden;
  opacity: 0;
}
button:hover .reset-on-hover-icon {
  visibility: visible;
  opacity: 1;
}
button:hover .reset-on-hover-text {
  opacity: 0;
}

#high-contrast-checkbox input[type="checkbox"] {
  color: var(--high-contrast-dark);
  /* border-color: var(--high-contrast-dark); */
}
.darkmode #high-contrast-checkbox input[type="checkbox"] {
  color: var(--high-contrast-light);
  /* border-color: var(--high-contrast-light); */
}

#contrast-toggle {
  color: var(--high-contrast-dark);
}
.darkmode #contrast-toggle {
  color: var(--high-contrast-light);
}

#high-contrast-checkbox input[type="checkbox"]:checked::before {
  color: var(--high-contrast-dark) !important;
  /* check mark color */
}

.any-page-text-controls #weight-readout-label::after {
  letter-spacing: 0.1em;
}
.any-page-text-controls #width-readout-label::before {
  letter-spacing: 0.1em;
}

/* rotating icons */
.any-page-text-controls-rotate-180 {
  /* --anim-speed: 0ms;
  --rotation: 0deg;
  transition: var(--anim-speed);
  transform: rotate(var(--rotation)); */
}

.any-page-text-controls-icon-plus-text {
  display: flex;
  align-items: center;
  gap: var(--gap-75);
}

.freeze-animation-on-font-adjust {
  transition: font-variation-settings var(--trans-speed);
}

@media all and (max-width: 475px) {
  #vinput {
    max-width: 99%;
  }

  .axislabeltext {
  }

  .axislabeltablerow {
    width: 100px;
  }

  .slider {
    width: 150px;

    height: 25px;
  }
}

.heading {
  font-size: 1.25em;
  font-variation-settings: "wght" calc(600 + var(--mod-weight)),
    "wdth" calc(var(--vwidth) + var(--mod-width));
  padding-bottom: var(--gap-25);
}

/* My impact icons */
.contribution-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--gap);

  bold {
    font-size: 1.5em;
    font-variation-settings: "wght" calc(600 + var(--mod-weight)),
      "wdth" calc(var(--vwidth) + var(--mod-width));
  }
}
.impact-container {
  display: flex;
  gap: var(--gap);

  .number {
    padding-top: 0.6em;
    font-size: 0.75em;
  }
}

.impact-container svg {
  height: 4em;
}
.impact-container img {
  height: 4em;
}

.impact-container p {
  margin: 0;
}

/* Generic button */
.button-wrapper-wrapper {
}
.button-wrapper-wrapper img {
  height: 2em;
}

.button-wrapper {
  position: relative;
  display: inline-block;
  max-width: 25em;
  padding: var(--gap-small);
}

.button {
  position: relative;
  z-index: 2;
  padding: var(--gap-small);
  text-align: center;
  text-wrap: balance;
  display: flex;
  align-items: center;
  gap: var(--gap);
  color: var(--textcolor);
  font-family: "Icon Font", "Test Font";
  background-color: rgba(0, 0, 0, 0);
  border: 1.5px solid var(--border-light);
  cursor: pointer;
}
.high-contrast .button {
  color: var(--textcolor) !important;
}
.darkmode.high-contrast .button {
  color: var(--textcolor) !important;
}
.button:hover {
  background-color: color-mix(
    in srgb,
    var(--minimumgraytext) 10%,
    rgba(0, 0, 0, 0)
  );
}
.button:active {
  background-color: color-mix(
    in srgb,
    var(--minimumgraytext) 20%,
    rgba(0, 0, 0, 0)
  );
}

.button-segmented {
  display: flex;
}
.darkmode .contrast-colors-wrapper .button-segmented .button {
  font-variation-settings: "wght" calc(300 + var(--mod-weight)),
    "wdth" calc(var(--vwidth) + var(--mod-width));
}
.button-segmented .button {
  border-left: 0px;
}
.button-segmented .button:first-child {
  border-left: 1.5px solid var(--border-light);
  border-radius: var(--gap-small) 0 0 var(--gap-small);
}
.button-segmented .button:last-child {
  border-radius: 0 var(--gap-small) var(--gap-small) 0;
}
#contrast-float-center {
  padding: 0 var(--gap);
}

.button-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--gap);
  z-index: 1;
  opacity: 0;
  /* transition: opacity 200ms; */
}
a:has(.topology-bottom-button) {
  --this-color: var(--linktext);
}
.topology-bottom-button {
  color: var(--this-color);
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: var(--gap);
  border-radius: var(--gap);
}
.topology-bottom-button img {
  height: 2em;
}
.topology-bottom-button:hover {
  color: color-mix(in srgb, var(--this-color) 50%, var(--textcolor));
  background-color: color-mix(in srgb, var(--this-color) 20%, rgba(0, 0, 0, 0));
}
.topology-bottom-button:active {
  color: color-mix(in srgb, var(--this-color) 50%, var(--textcolor));
  background-color: color-mix(in srgb, var(--this-color) 40%, rgba(0, 0, 0, 0));
}

.topology-bottom-button.button-red {
  --this-color: var(--redtext);
}
.topology-bottom-button.button-green {
  --this-color: var(--greentext);
}
.topology-bottom-button.button-purple {
  --this-color: var(--purpletext);
}
.darkmode.high-contrast .topology-bottom-button {
  --this-color: var(--high-contrast-light);
}

/* images */
.img-dropshadow {
  filter: drop-shadow(0 4px 3px #7e7e7e23);
}

.img-rounded-corners {
  border-radius: var(--gap-small);
}

/* bottom navigation on project pages */
.projectfooter {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 150px;
  pointer-events: none; /*makes footer unclickable so you can click stuff behind it*/
  .awayarrow svg {
    height: 0.6em;
  }
  .awayarrow img {
    height: 0.6em;
  }
}
.projectfooter .flex-child-portfolio-1 {
  border-radius: 15px;
  content-visibility: auto;
  overflow: hidden;
}
@media (max-height: 40rem) {
  /* make footer disappear if viewport is really short */
  .projectfooter {
    display: none;
  }
}

.projectfooter a {
  width: 100%;
}
.footerarrow {
  pointer-events: none;
  position: absolute;
  bottom: 0.75em;
}

.footerarrow img {
  /*might not work with img elements*/
  background-blend-mode: difference;
}

.projectfooter .flex-parent-portfolio-1 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.footermodule {
  position: relative;
  transition: 0.2s;
  width: 100px;
  margin: 10px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: all; /*makes items in here clickable even though the parent level footer is unclickable*/
  display: flex;
  align-content: center;
  justify-content: center;
}
.projectfooter .flex-child-text {
  display: none;
}

/* make footer smaller when its in the way of content */
@media all and (max-width: 1250px) {
  .projectfooter {
  }
  .projectfooter a {
  }
  .footerarrow {
    bottom: 0.4em;
  }

  .footermodule {
    width: 80px;
    padding: 10px;
    margin: 5px;
  }
}
@media all and (max-width: 550px) {
  .footerarrow {
    bottom: 0.65em;
  }
}
/* old footer navigation modules
//bottom navigation on project pages
.projectfooter {
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 150px; 
    pointer-events:none; //makes footer unclickable so you can click stuff behind it
}
.projectfooter .flex-child-portfolio-1 {
  border-radius: 15px;
    content-visibility: auto;
  overflow:hidden;
}
@media (max-height: 40rem) { //make footer disappear if viewport is really short
  .projectfooter {
    display:none;

  }
}

.projectfooter a {
  background-color:white;
  //padding:15px;
  padding-bottom:25px;
  border-radius:15px;
  margin-bottom:-15px;
  width:100%;
}
.footerarrow {
  pointer-events:none; 
  //position:absolute;
  //mix-blend-mode: exclusion;
    //fill: white;
 margin-top:-8px;
}

.footerarrow svg {
  width:15px;
  background-blend-mode: difference;
}

.projectfooter .flex-parent-portfolio-1 {
  width:100%;
  display:flex;
  justify-content: space-between;
  align-items: flex-end; 
}
.footermodule {
  transition: 0.2s;
  width: 100px;
  margin:10px;
  padding:15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: all; //makes items in here clickable even though the parent level footer is unclickable
  display: flex;
  align-content: center;
  justify-content: center;
}
.projectfooter .flex-child-text {
  display:none;
}
//make footer smaller when its in the way of content
@media all and (max-width: 1250px) {
.projectfooter {
  //bottom:20px; 
}
.projectfooter a {
  //padding:10px;
  padding-bottom:25px;
  border-radius:15px;
  margin-bottom:15px;

}
  .footerarrow {
    margin-top:-2.3em;
  }

.footermodule {
  width: 70px;
  padding:10px;
  margin:5px;

}  
}
@media all and (max-width: 550px) {
  .footerarrow {
    margin-top:-2.5em;
  }
}
*/

/* add more padding for project controls */
.project-controls {
  padding-top: 50px;
  padding-bottom: 30px;
}
/* get rid of "prev/next" buttons */
.project-controls #projectNav {
  display: none;
}

/* add arrow to the "Back to Work" text */
.project-controls a:before {
  content: "← ";
}

/* make footer text lighter color */
#footer p {
  color: #eaeaea;
}

/* make body text left align */
p {
  text-align: left;
}

/* small changes for mobile */
@media all and (max-width: 550px) {
  body {
    font-size: 15px;
    /* font-size: calc(15px * var(--zoom)); */
  }
  /* standard button sizing */
  :root {
    --buttonsvgheight: var(--buttonsvgheightsmall);
  }
}

/*   */
/*   */
/*   */
/* Javascript error message */
.javascript-error-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap);
}

.javascript-error {
  font-variation-settings: "wght" 400, var(--vwidth);
  font-size: 1em;
  text-align: center;
  background-color: #86868622;
  padding: var(--gap);
  width: fit-content;
  border-radius: var(--gap-small);
}

.contrast-generated-failed {
  text-decoration: line-through;
}

/* 90 */
.x25-90 {
  font-variation-settings: "wdth" calc(90 + var(--mod-width)),
    "wght" calc(25 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x100-90 {
  font-variation-settings: "wdth" calc(90 + var(--mod-width)),
    "wght" calc(100 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x200-90 {
  font-variation-settings: "wdth" calc(90 + var(--mod-width)),
    "wght" calc(200 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x300-90 {
  font-variation-settings: "wdth" calc(90 + var(--mod-width)),
    "wght" calc(300 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x400-90 {
  font-variation-settings: "wdth" calc(90 + var(--mod-width)),
    "wght" calc(400 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x500-90 {
  font-variation-settings: "wdth" calc(90 + var(--mod-width)),
    "wght" calc(500 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x600-90 {
  font-variation-settings: "wdth" calc(90 + var(--mod-width)),
    "wght" calc(600 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x700-90 {
  font-variation-settings: "wdth" calc(90 + var(--mod-width)),
    "wght" calc(700 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x800-90 {
  font-variation-settings: "wdth" calc(90 + var(--mod-width)),
    "wght" calc(800 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x900-90 {
  font-variation-settings: "wdth" calc(90 + var(--mod-width)),
    "wght" calc(900 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}

/* 95 */
.x25-95 {
  font-variation-settings: "wdth" calc(95 + var(--mod-width)),
    "wght" calc(25 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x100-95 {
  font-variation-settings: "wdth" calc(95 + var(--mod-width)),
    "wght" calc(100 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x200-95 {
  font-variation-settings: "wdth" calc(95 + var(--mod-width)),
    "wght" calc(200 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x300-95 {
  font-variation-settings: "wdth" calc(95 + var(--mod-width)),
    "wght" calc(300 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x400-95 {
  font-variation-settings: "wdth" calc(95 + var(--mod-width)),
    "wght" calc(400 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x500-95 {
  font-variation-settings: "wdth" calc(95 + var(--mod-width)),
    "wght" calc(500 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x600-95 {
  font-variation-settings: "wdth" calc(95 + var(--mod-width)),
    "wght" calc(600 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x700-95 {
  font-variation-settings: "wdth" calc(95 + var(--mod-width)),
    "wght" calc(700 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x800-95 {
  font-variation-settings: "wdth" calc(95 + var(--mod-width)),
    "wght" calc(800 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x900-95 {
  font-variation-settings: "wdth" calc(95 + var(--mod-width)),
    "wght" calc(900 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}

/* 100 */
.x25 {
  font-variation-settings: "wdth" calc(100 + var(--mod-width)),
    "wght" calc(25 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x100 {
  font-variation-settings: "wdth" calc(100 + var(--mod-width)),
    "wght" calc(100 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x200 {
  font-variation-settings: "wdth" calc(100 + var(--mod-width)),
    "wght" calc(200 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x300 {
  font-variation-settings: "wdth" calc(100 + var(--mod-width)),
    "wght" calc(300 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x400 {
  font-variation-settings: "wdth" calc(100 + var(--mod-width)),
    "wght" calc(400 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x500 {
  font-variation-settings: "wdth" calc(100 + var(--mod-width)),
    "wght" calc(500 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x600 {
  font-variation-settings: "wdth" calc(100 + var(--mod-width)),
    "wght" calc(600 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x700 {
  font-variation-settings: "wdth" calc(100 + var(--mod-width)),
    "wght" calc(700 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x800 {
  font-variation-settings: "wdth" calc(100 + var(--mod-width)),
    "wght" calc(800 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x900 {
  font-variation-settings: "wdth" calc(100 + var(--mod-width)),
    "wght" calc(900 + var(--mod-weight));
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}

/* 105 */
.x25-105 {
  font-variation-settings: "wdth" calc(105 + var(--mod-width)),
    "wght" calc(25 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x100-105 {
  font-variation-settings: "wdth" calc(105 + var(--mod-width)),
    "wght" calc(100 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x200-105 {
  font-variation-settings: "wdth" calc(105 + var(--mod-width)),
    "wght" calc(200 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x300-105 {
  font-variation-settings: "wdth" calc(105 + var(--mod-width)),
    "wght" calc(300 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x400-105 {
  font-variation-settings: "wdth" calc(105 + var(--mod-width)),
    "wght" calc(400 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x500-105 {
  font-variation-settings: "wdth" calc(105 + var(--mod-width)),
    "wght" calc(500 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x600-105 {
  font-variation-settings: "wdth" calc(105 + var(--mod-width)),
    "wght" calc(600 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x700-105 {
  font-variation-settings: "wdth" calc(105 + var(--mod-width)),
    "wght" calc(700 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x800-105 {
  font-variation-settings: "wdth" calc(105 + var(--mod-width)),
    "wght" calc(800 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x900-105 {
  font-variation-settings: "wdth" calc(105 + var(--mod-width)),
    "wght" calc(900 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}

/* 110 */
.x25-110 {
  font-variation-settings: "wdth" calc(110 + var(--mod-width)),
    "wght" calc(25 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x100-110 {
  font-variation-settings: "wdth" calc(110 + var(--mod-width)),
    "wght" calc(100 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x200-110 {
  font-variation-settings: "wdth" calc(110 + var(--mod-width)),
    "wght" calc(200 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x300-110 {
  font-variation-settings: "wdth" calc(110 + var(--mod-width)),
    "wght" calc(300 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x400-110 {
  font-variation-settings: "wdth" calc(110 + var(--mod-width)),
    "wght" calc(400 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x500-110 {
  font-variation-settings: "wdth" calc(110 + var(--mod-width)),
    "wght" calc(500 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x600-110 {
  font-variation-settings: "wdth" calc(110 + var(--mod-width)),
    "wght" calc(600 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x700-110 {
  font-variation-settings: "wdth" calc(110 + var(--mod-width)),
    "wght" calc(700 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x800-110 {
  font-variation-settings: "wdth" calc(110 + var(--mod-width)),
    "wght" calc(800 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x900-110 {
  font-variation-settings: "wdth" calc(110 + var(--mod-width)),
    "wght" calc(900 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}

/* 115 */
.x25-115 {
  font-variation-settings: "wdth" calc(115 + var(--mod-width)),
    "wght" calc(25 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x100-115 {
  font-variation-settings: "wdth" calc(115 + var(--mod-width)),
    "wght" calc(100 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x200-115 {
  font-variation-settings: "wdth" calc(115 + var(--mod-width)),
    "wght" calc(200 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x300-115 {
  font-variation-settings: "wdth" calc(115 + var(--mod-width)),
    "wght" calc(300 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x400-115 {
  font-variation-settings: "wdth" calc(115 + var(--mod-width)),
    "wght" calc(400 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x500-115 {
  font-variation-settings: "wdth" calc(115 + var(--mod-width)),
    "wght" calc(500 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x600-115 {
  font-variation-settings: "wdth" calc(115 + var(--mod-width)),
    "wght" calc(600 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x700-115 {
  font-variation-settings: "wdth" calc(115 + var(--mod-width)),
    "wght" calc(700 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x800-115 {
  font-variation-settings: "wdth" calc(115 + var(--mod-width)),
    "wght" calc(800 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}
.x900-115 {
  font-variation-settings: "wdth" calc(115 + var(--mod-width)),
    "wght" calc(900 + var(--mod-weight)) !important;
  font-feature-settings: var(--salt) !important;
  text-transform: var(--texttransform) !important;
}

.squares-wrapper {
  display: flex;
  gap: var(--gap-200);
  flex-wrap: wrap;
  justify-content: center;
  padding: var(--gap-200) 0;
  font-size: 1.25em;
}

.hobby-square {
  position: relative;
  min-width: 12em;
  min-height: 12em;
  overflow: hidden;
  border-radius: var(--gap);
  display: flex;
  justify-content: center;
  user-select: none;
  cursor: pointer;
  background-color: color-mix(in srgb, gray 50%, var(--square-bg));
  background-color: var(--square-bg);
  font-size: 0.9em;
  transition: background-color 0.2s ease-out;
  opacity: 1;
}
.hobby-square.animate {
  background-color: var(--square-bg);
}
/* .hobby-square:not(.animate):hover {
  background-color: var(--square-bg);
} */

.hobby-square img {
  height: 10em;
}
.hobby-square .element {
  position: absolute;
}
.hobby-square .element.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.hobby-square .element.top {
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-10%);
}
.hobby-square .element.bottom {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
.hobby-square .element.left {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.hobby-square .element.right {
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.hobby-square .inner {
  position: relative;
}
.hobby-square .asset {
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  /* default scale via CSS variable, fallback is 1 */
  transform: scale(var(--square-img-scale, 1));
}
/* Initial offset positions before animation */
.hobby-square .element.left .asset {
  transform: translateX(-50%) scale(var(--square-img-scale, 1));
}
.hobby-square .element.right .asset {
  transform: translateX(50%) scale(var(--square-img-scale, 1));
}
.hobby-square .element.top .asset {
  transform: translateY(-50%) scale(var(--square-img-scale, 1));
}
.hobby-square .element.bottom .asset {
  transform: translateY(50%) scale(var(--square-img-scale, 1));
}
.hobby-square .element.center .asset {
  transform: scale(calc(var(--square-img-scale, 1) * 0.9));
}
/* Animated final state when .animate is added */
.hobby-square .hover-blocker {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: all;
}
.hobby-square.animate .asset {
  opacity: 1;
}
.hobby-square.animate .element.left .asset,
.hobby-square.animate .element.right .asset,
.hobby-square.animate .element.top .asset,
.hobby-square.animate .element.bottom .asset {
  transform: translate(0, 0) scale(var(--square-img-scale, 1));
}
.hobby-square.animate .element.center .asset {
  transform: scale(var(--square-img-scale, 1));
}
/* Hover and active adjustments */
.hobby-square.animate:not(.block-hover):hover .element.left .asset {
  transform: translateX(-10%) scale(var(--square-img-scale, 1));
}
.hobby-square.animate:not(.block-hover):active .element.left .asset {
  transform: translateX(-20%) scale(var(--square-img-scale, 1));
}
.hobby-square.animate:not(.block-hover):hover .element.right .asset {
  transform: translateX(10%) scale(var(--square-img-scale, 1));
}
.hobby-square.animate:not(.block-hover):active .element.right .asset {
  transform: translateX(20%) scale(var(--square-img-scale, 1));
}
.hobby-square.animate:not(.block-hover):hover .element.top .asset {
  transform: translateY(-10%) scale(var(--square-img-scale, 1));
}
.hobby-square.animate:not(.block-hover):active .element.top .asset {
  transform: translateY(-20%) scale(var(--square-img-scale, 1));
}
.hobby-square.animate:not(.block-hover):hover .element.bottom .asset {
  transform: translateY(10%) scale(var(--square-img-scale, 1));
}
.hobby-square.animate:not(.block-hover):active .element.bottom .asset {
  transform: translateY(20%) scale(var(--square-img-scale, 1));
}
.hobby-square.animate:not(.block-hover):hover .element.center .asset {
  transform: scale(calc(var(--square-img-scale, 1) * 0.95));
}
.hobby-square.animate:not(.block-hover):active .element.center .asset {
  transform: scale(calc(var(--square-img-scale, 1) * 0.9));
}
/* Bottom-anchored text */
@keyframes animateFontWeight {
  from {
    --square-font-weight: 0;
  }
  to {
    --square-font-weight: 600;
  }
}

@property --square-font-weight {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.hobby-square .text-bottom {
  position: absolute;
  bottom: 0;
  padding: var(--gap-25);
  color: inherit;
  text-align: center;
  font-size: 1.5em;
  font-variation-settings: "wght" 0,
    "wdth" calc(var(--vwidth) + var(--mod-width));
  opacity: 0;
  letter-spacing: 0.02em;
  margin-bottom: 0.25em;
  letter-spacing: 0.03em;
}
.hobby-square.animate .text-bottom {
  animation: animateFontWeight 0.5s forwards, fadeIn 0.5s forwards;
  font-variation-settings: "wght"
      calc(var(--square-font-weight) + var(--mod-weight)),
    "wdth" calc(var(--vwidth) + var(--mod-width));
}
.high-contrast .text-bottom {
  color: var(--textcolor);
  background-color: var(--backgroundcolor);
}

@media all and (max-width: 750px) {
  .squares-wrapper {
    /* font-size: 0.75em; */
  }
}
@media all and (max-width: 550px) {
  .frontpage-text {
    font-size: 1.75em;
  }
}
@media all and (max-width: 450px) {
  .frontpage-text {
    font-size: 1.5em;
  }
}

/* about me  */
.connect-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--gap);
  padding: var(--gap) 0;
  padding-bottom: var(--gap-75);
}
.connect-button {
  --button-color: var(--header-gray);
  /* --button-color: var(--textcolor); */
  padding: var(--gap-small);
  text-align: center;
  text-wrap: balance;
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: var(--gap-50);
  color: var(--button-color);
  font-family: "Icon Font", "Test Font";
  background-color: rgba(0, 0, 0, 0);
  border: 1.5px solid transparent;
  cursor: pointer;
  border-radius: var(--gap-50);
  font-size: 1em;
  font-variation-settings: "wght" calc(500 + var(--mod-weight)),
    "wdth" calc(105 + var(--mod-width));

  .text {
    /* font-size: 0.75em;
    text-transform: uppercase;*/
    letter-spacing: 0.05em;
  }
  .icon {
    font-variation-settings: "wght" calc(300 + var(--mod-weight)),
      "wdth" calc(105 + var(--mod-width));
  }
}
.connect-button:hover {
  color: color-mix(in srgb, var(--textcolor) 25%, var(--button-color));
  background-color: color-mix(in srgb, var(--button-color) 10%, transparent);
}
.connect-button:not(.no-hover):active {
  background-color: color-mix(in srgb, var(--button-color) 20%, transparent);
}
#email-div {
  --button-color: var(--gmailcolor);
  cursor: auto;
  padding-left: 0;
  padding-right: 0;
}
#email-div:hover {
  color: var(--button-color);
  background-color: unset;
}
#email-div:active {
  color: var(--button-color);
  background-color: unset;
}

#about-me-page {
  display: flex;
  flex-direction: column;
}

/* .me-at-my-desk-cycle .me-at-my-desk-vscode {
  animation-delay: 0s;
}
.me-at-my-desk-cycle .me-at-my-desk-blender {
  animation-delay: 5s;
}
.me-at-my-desk-cycle .me-at-my-desk-figma {
  animation-delay: 10s;
} */
@keyframes fadeLoop {
  0%,
  35% {
    opacity: 0;
  }
  10%,
  25% {
    opacity: 1;
  }
}

.about-flex-parent {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  align-content: stretch;
}
.about-flex-child {
  padding: 10px;
}

.about-image {
  min-width: 150px;
  max-width: 35%;

  display: flex;
  flex-direction: column;
}
.about-icons {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding-top: 10px;
}

.about-icon {
  /* margin-bottom: -11px; */
}