@charset "UTF-8";

/* Import ET Book styles
   adapted from https://github.com/edwardtufte/et-book/blob/gh-pages/et-book.css */

:root {
  color-scheme: light dark;
  --bg-color  : #f7f1e5;
  --text-color: #111;
  --link-color: #111;
  --cursor-dot-color: #111;
  --cursor-outline-color: #111;
}



[data-theme="dark"] {
  --bg-color  : #121212;
  --text-color: #efefec;
  --link-color: #efefec;
  --cursor-dot-color: #efefec;
  --cursor-outline-color: #efefec;
}

a:link,
.tufte-underline,
.hover-tufte-underline:hover {
  color: var(--link-color);
}

a {
  color: inherit;
}

/* Theme toggle button styles */
#theme-toggle {
  background-color: var(--bg-color);
  color           : var(--text-color);
  position        : fixed;
  top             : 20px;
  left            : 20px;
  width           : 40px;
  height          : 40px;
  border          : none;
  cursor          : pointer;
  z-index         : 1000;
}

#wiki-btn{
  background-color: var(--bg-color);
  color           : var(--text-color);
  position        : fixed;
  top             : 60px;
  left            : 20px;
  width           : 40px;
  height          : 40px;
  border          : none;
  cursor          : pointer;
  z-index         : 1000;
}

#theme-toggle svg {
  fill: var(--text-color);
}

@font-face {
  font-family: "et-book";
  src        : url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot");
  src        : url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot?#iefix") format("embedded-opentype"),
    url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff") format("woff"),
    url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf") format("truetype"),
    url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.svg#etbookromanosf") format("svg");
  font-weight : normal;
  font-style  : normal;
  font-display: swap;
}

@font-face {
  font-family: "et-book";
  src        : url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot");
  src        : url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot?#iefix") format("embedded-opentype"),
    url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff") format("woff"),
    url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf") format("truetype"),
    url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.svg#etbookromanosf") format("svg");
  font-weight : normal;
  font-style  : italic;
  font-display: swap;
}

@font-face {
  font-family: "et-book";
  src        : url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot");
  src        : url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot?#iefix") format("embedded-opentype"),
    url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff") format("woff"),
    url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf") format("truetype"),
    url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.svg#etbookromanosf") format("svg");
  font-weight : bold;
  font-style  : normal;
  font-display: swap;
}

@font-face {
  font-family: "et-book-roman-old-style";
  src        : url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot");
  src        : url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot?#iefix") format("embedded-opentype"),
    url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.woff") format("woff"),
    url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.ttf") format("truetype"),
    url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.svg#etbookromanosf") format("svg");
  font-weight : normal;
  font-style  : normal;
  font-display: swap;
}

/* Tufte CSS styles */
html {
  font-size      : 15px;
  scroll-behavior: smooth;
}

nav {
  position      : fixed;
  top           : 0;
  font-size     : 1.65rem;
  right         : 0;
  padding       : 1rem;
  display       : flex;
  flex-direction: column;
  align-items   : flex-end;
  right         : 20px;
}

nav a,
nav button {
  margin-bottom: 0.5rem;
  text-align   : right;
}

body {
  width          : 87.5%;
  margin         : -100px auto;

  font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD",
    "Book Antiqua", Georgia, serif;
  background-color: var(--bg-color);
  color           : var(--text-color);
  max-width       : 800px;
  counter-reset   : sidenote-counter;

  
}

.landing-name,
.intro-paragraph {
  position: relative;  /* ensures a local stacking context */
  z-index: 0;          /* or 1; just something less than 9999999999 */
}


body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(#444 0.5px, transparent 0.5px);
  background-size: 20px 20px;
  background-repeat: repeat;
  opacity: 0.8; 
  pointer-events: none; 
  z-index: -1; 
}
h1 {
  font-weight: 400;
  margin-top: 4rem;
  margin-bottom: 1.5rem;
  font-size: 6rem;
  background: radial-gradient(circle, #ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6);
  color: var(--text-color);
  -webkit-background-clip: text;
  /* -webkit-text-fill-color: transparent; */
  background-size: 300%; /* Enlarged for a more dramatic effect */
  transition: background-position 0.5s ease-in-out;
}

h1:hover {
  animation: gradient-move 1.5s linear infinite; /* Faster animation */
  -webkit-text-fill-color: transparent; 
}

@keyframes gradient-move {
  0% {
    background-position: 0% 50%; /* Start of animation */
  }
  50% {
    background-position: 50% 100%; /* Middle point */
  }
  100% {
    background-position: 100% 0%; /* Loop back to the start */
  }
}


h2 {
  font-style   : italic;
  font-weight  : 400;
  margin-top   : 2.1rem;
  margin-bottom: 1.4rem;
  font-size    : 2.2rem;
  line-height  : 1;
}

h3 {
  font-style : italic;
  font-weight: 400;
  font-size  : 1.7rem;

  line-height: 1;
}

hr {
  display   : block;
  height    : 1px;
  width     : 55%;
  border    : 0;
  border-top: 1px solid #ccc;
  margin    : 1em 0;
  padding   : 0;
}

p.subtitle {
  font-style   : italic;
  margin-top   : 1rem;
  margin-bottom: 1rem;
  font-size    : 1.8rem;
  display      : block;
  line-height  : 1;
}

.numeral {
  font-family: et-book-roman-old-style;
}

.danger {
  color: red;
}

article {
  padding: 5rem 0rem;
}

section {
  padding-top   : 5rem;
  padding-bottom: 1rem;
}

p,
dl,
ol,
ul {
  font-size  : 1.4rem;
  line-height: 2rem;
}

p {
  margin-top    : 1.4rem;
  margin-bottom : 1.4rem;
  padding-right : 0;
  line-height   : 2.5rem;
  vertical-align: baseline;
  font-weight   : 100;
  text-align    : justify;
}

/* Chapter Epigraphs */
div.epigraph {
  margin: 5em 0;
}

div.epigraph>blockquote {
  margin-top   : 3em;
  margin-bottom: 3em;
}

div.epigraph>blockquote,
div.epigraph>blockquote>p {
  font-style: italic;
}

div.epigraph>blockquote>footer {
  font-style: normal;
}

div.epigraph>blockquote>footer>cite {
  font-style: italic;
}

/* end chapter epigraphs styles */

blockquote {
  font-size: 1.4rem;
}

blockquote p {
  width       : 55%;
  margin-right: 40px;
}

blockquote footer {
  width     : 55%;
  font-size : 1.1rem;
  text-align: right;
}

section>p,
section>footer,
section>table {
  width: 55%;
}

/* 50 + 5 == 55, to be the same width as paragraph */
section>dl,
section>ol,
section>ul {
  width                : 50%;
  -webkit-padding-start: 5%;
}

dt:not(:first-child),
li:not(:first-child) {
  margin-top: 0.25rem;
}

figure {
  padding             : 0;
  border              : 0;
  font-size           : 100%;
  font                : inherit;
  vertical-align      : baseline;
  max-width           : 55%;
  -webkit-margin-start: 0;
  -webkit-margin-end  : 0;
  margin              : 0 0 3em 0;
}

figcaption {
  float         : right;
  clear         : right;
  margin-top    : 0;
  margin-bottom : 0;
  font-size     : 1.1rem;
  line-height   : 1.6;
  vertical-align: baseline;
  position      : relative;
  max-width     : 40%;
}

figure.fullwidth figcaption {
  margin-right: 24%;
}

.no-tufte-underline:link {
  background : unset;
  text-shadow: unset;
}

a {
  text-decoration: none;
  /* Remove default underline */
  position       : relative;
  /* Required for the pseudo-element */
}

a::after {
  content : "";
  position: absolute;
  left    : 0;
  right   : 0;
  bottom  : 0;
  height  : 1px;
  /* Adjust the thickness of the underline */
  background-image: linear-gradient(to right,
      currentColor 50%,
      transparent 50%);
  background-size    : 10px 1px;
  /* Adjust the size of the dots */
  background-position: 0 0;
  /* Initial background position */
  opacity            : 0;
  /* Initially hidden */
  transition         : opacity 0.2s ease;
  /* Transition for appearing effect */
}

a:hover::after {
  opacity  : 1;
  /* Make the border visible on hover */
  animation: moveDots 0.5s linear infinite;
  /* Start the animation on hover */
}

@keyframes moveDots {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 10px 0;
    /* Adjust this value to control the speed */
  }
}

a:link,
.tufte-underline,
.hover-tufte-underline:hover {
  text-decoration: none;
  background     : -webkit-linear-gradient(#fffff8, #fffff8),
    -webkit-linear-gradient(#fffff8, #fffff8),
    -webkit-linear-gradient(currentColor, currentColor);
  background: linear-gradient(#fffff8, #fffff8),
    linear-gradient(#fffff8, #fffff8),
    linear-gradient(currentColor, currentColor);
  -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
  -moz-background-size   : 0.05em 1px, 0.05em 1px, 1px 1px;
  background-size        : 0.05em 1px, 0.05em 1px, 1px 1px;
  background-repeat      : no-repeat, no-repeat, repeat-x;
  background-position    : 0% 93%, 100% 93%, 0% 93%;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {

  a:link,
  .tufte-underline,
  .hover-tufte-underline:hover {
    background-position-y: 87%, 87%, 87%;
  }
}

a:link::selection,
a:link::-moz-selection {
  text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe,
    0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe,
    -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe,
    -0.15em 0 #b4d5fe;
  background: #b4d5fe;
}

/* Sidenotes, margin notes, figures, captions */
img {
  max-width: 100%;
}

.sidenote,
.marginnote {
  float         : right;
  clear         : right;
  margin-right  : -60%;
  width         : 50%;
  margin-top    : 0.3rem;
  margin-bottom : 0;
  font-size     : 1.1rem;
  line-height   : 1.3;
  vertical-align: baseline;
  position      : relative;
}

.sidenote-number {
  counter-increment: sidenote-counter;
}

.sidenote-number:after,
.sidenote:before {
  font-family   : et-book-roman-old-style;
  position      : relative;
  vertical-align: baseline;
}

.sidenote-number:after {
  content  : counter(sidenote-counter);
  font-size: 1rem;
  top      : -0.5rem;
  left     : 0.1rem;
}

.sidenote:before {
  content  : counter(sidenote-counter) " ";
  font-size: 1rem;
  top      : -0.5rem;
}

blockquote .sidenote,
blockquote .marginnote {
  margin-right: -82%;
  min-width   : 59%;
  text-align  : left;
}

div.fullwidth,
table.fullwidth {
  width: 100%;
}

div.table-wrapper {
  overflow-x : auto;
  font-family: "Trebuchet MS", "Gill Sans", "Gill Sans MT", sans-serif;
}

.sans {
  font-family   : "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
  letter-spacing: 0.03em;
}

code,
pre>code {
  font-family                                                                    : Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size                                                                      : 1rem;
  line-height                                                                    : 1.42;
  -webkit-text-size-adjust                                                       : 100%;
  /* Prevent adjustments of font size after orientation changes in iOS. See https://github.com/edwardtufte/tufte-css/issues/81#issuecomment-261953409 */
}

.sans>code {
  font-size: 1.2rem;
}

h1>code,
h2>code,
h3>code {
  font-size: 0.8em;
}

.marginnote>code,
.sidenote>code {
  font-size: 1rem;
}

pre>code {
  font-size  : 0.9rem;
  width      : 52.5%;
  margin-left: 2.5%;
  overflow-x : auto;
  display    : block;
}

pre.fullwidth>code {
  width: 90%;
}

.fullwidth {
  max-width: 90%;
  clear    : both;
}

span.newthought {
  font-variant: small-caps;
  font-size   : 1.2em;
}

input.margin-toggle {
  display: none;
}

label.sidenote-number {
  display   : inline-block;
  max-height: 2rem;
  /* should be less than or equal to paragraph line-height */
}

label.margin-toggle:not(.sidenote-number) {
  display: none;
}

.iframe-wrapper {
  position      : relative;
  padding-bottom: 56.25%;
  /* 16         :9 */
  padding-top   : 25px;
  height        : 0;
}

.iframe-wrapper iframe {
  position: absolute;
  top     : 0;
  left    : 0;
  width   : 100%;
  height  : 100%;
}

@media (max-width: 760px) {
  body {
    width        : 84%;
    padding-left : 8%;
    padding-right: 8%;
  }

  hr,
  section>p,
  section>footer,
  section>table {
    width: 100%;
  }

  pre>code {
    width: 97%;
  }

  section>dl,
  section>ol,
  section>ul {
    width: 90%;
  }

  figure {
    max-width: 90%;
  }

  figcaption,
  figure.fullwidth figcaption {
    margin-right: 0%;
    max-width   : none;
  }

  blockquote {
    margin-left : 1.5em;
    margin-right: 0em;
  }

  blockquote p,
  blockquote footer {
    width: 100%;
  }

  label.margin-toggle:not(.sidenote-number) {
    display: inline;
  }

  .sidenote,
  .marginnote {
    display: none;
  }

  .margin-toggle:checked+.sidenote,
  .margin-toggle:checked+.marginnote {
    display       : block;
    float         : left;
    left          : 1rem;
    clear         : both;
    width         : 95%;
    margin        : 1rem 2.5%;
    vertical-align: baseline;
    position      : relative;
  }

  label {
    cursor: pointer;
  }

  div.table-wrapper,
  table {
    width: 85%;
  }

  img {
    width: 100%;
  }
}

p.by-line {
  margin: 0px;

  font-size  : 1.2rem;
  font-weight: 900;
  text-align : center;
}

.social-icons {
  display      : flex;
  gap          : 10px;
  margin-bottom: 10px;
}

.social-icons a {
  color     : #333;
  /* Adjust color as needed */
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: #0077b5;
  /* LinkedIn blue color on hover */
}

.social-icons svg {
  width : 24px;
  height: 24px;
}

.landing-name {
  display        : flex;
  /* Use flexbox for centering */
  flex-direction : column;
  /* Stack children vertically */
  align-items    : center;
  /* Center horizontally */
  justify-content: center;
  /* Center vertically */
  height         : 100vh;
  /* Full viewport height */
  text-align     : center;
  /* Center text */
  padding        : 20px;
  /* Add some padding */
  font-size      : 3rem;
  /* Increase font size */
}

/* Updated CSS */
.intro-paragraph {
  margin-top   : 75vh;
  /* Pushes the paragraph below the first viewport */
  opacity      : 0;
  transform    : translateY(20px);
  transition   : opacity 0.8s ease-out, transform 0.8s ease-out;
  margin-bottom: 40vh;
}

.intro-paragraph.show {
  opacity  : 1;
  transform: translateY(0);
}

#about-me-btn {
  position        : fixed;
  bottom          : 20px;
  left            : 50%;
  transform       : translateX(-50%);
  background-color: transparent;
  border          : none;
  color           : var(--text-color);
  font-size       : 1.2rem;
  cursor          : pointer;
  opacity         : 0.7;
  transition      : opacity 0.3s ease, bottom 0.3s ease;
  padding         : 10px;
  font-family     : et-book, Palatino, "Palatino Linotype", "Palatino LT STD",
    "Book Antiqua", Georgia, serif;
}

#about-me-btn:hover {
  opacity        : 1;
  text-decoration: underline;
}

.company-list {
  width: 100%;
}

.company {
  background-color: #1c1c1e;
  padding         : 15px;
  border-radius   : 10px;
  margin-bottom   : 10px;
  cursor          : pointer;
  color           : #a0a0a0;
  text-align      : left;
  transition      : background-color 0.3s, color 0.3s;
  width           : 100%;
}

.company.active,
.company:hover {
  background-color: #ffffff;
  color           : #121212;
}

.job-card {
  background-color: #2c2c2e;
  padding         : 20px;
  border-radius   : 10px;
  margin-top      : 10px;
  display         : none;
  width           : 100%;
}

.job-card.active {
  display: block;
}

.job-title {
  font-size    : 24px;
  margin-bottom: 5px;
}

.job-duration {
  font-size    : 14px;
  color        : #a0a0a0;
  margin-bottom: 20px;
}

.view-project {
  display        : inline-block;
  padding        : 10px 20px;
  border         : 2px solid #a0a0a0;
  border-radius  : 5px;
  text-decoration: none;
  color          : #ffffff;
  margin-bottom  : 20px;
  cursor         : pointer;
}

.job-description {
  font-size: 16px;
  color    : #a0a0a0;
}

.work-bar {
  position       : fixed;
  display        : flex;
  flex-direction : column;
  align-items    : start;
  justify-content: space-between;
  padding        : 10px;
  margin-bottom  : 20px;
  border-radius  : 5px;
  padding-top    : 30px;
  left           : 100px;
  /* Adjust as needed */
  top            : 100px;
  /* Adjust as needed */
  height         : 150px;
  /* Adjust as needed */
}

.work-bar a {
  font-size: 1.65rem;
}

.content {
  padding-top: 150px;
}

.experience h2 {
  font-size    : 2rem;
  margin-bottom: 10px;
  text-align   : center;
}

.experience-item {
  margin: auto;
  width : 600px;
}

.experience-item h3 {
  font-size    : 1.5rem;
  font-weight  : 300;
  margin-bottom: 0px;
}

.experience-item h3 span {
  font-size   : 1rem;
  padding-left: 5px;
  /* float    : right; */
  font-weight : 200;
}

.experience-item p {
  display    : block;
  font-size  : 1.2rem;
  line-height: 1.5rem;
  margin-top : 5px;
}

.experience-item svg {
  height    : 2rem;
  float     : right;
  transition: transform 0.3s ease;
}

.experience-item:hover svg {
  transform: translateX(-10px);
  cursor   : pointer;
}

.experience-item:hover svg {
  transform: translateX(10px);
}

h2 {
  font-size    : 5rem;
  padding      : 2px 8px;
  border-radius: 3px;
}

/* Add this CSS to your stylesheet */
.lineHorizontal__container {
  display        : flex;
  justify-content: center;
  margin         : 10px 0;
}

/* Add this CSS to your stylesheet */
.lineHorizontal {
  border-top: 1px dashed var(--text-color);
  width     : 100%;
}

.highlight {
  margin-left: 0;
}

/* Add this CSS to style the active work-bar link */

/* Remove the SVG styling */
.work-bar svg {
  display: none;
}

/* Add hover effect and indent for active item */
.work-item {
  display    : flex;
  align-items: center;
  transition : transform 0.3s ease;
}

.work-item:hover {
  transform: translateX(20px);
  /* Indent on hover */
}

.work-item.active svg {
  display: inline;
  /* Show SVG for active item */
}

/* Align SVG and text in the work-item */
.work-bar {
  display       : flex;
  flex-direction: column;
}

.work-item {
  display    : flex;
  align-items: center;
  padding    : 10px 0;
}

.work-item svg {
  margin-right: 8px;
  /* Space between SVG and text */
  display     : none;
  /* Hide by default */
}

.work-item.active svg {
  display: inline;
  /* Show SVG for active item */
}

.work-item a {
  text-decoration: none;
  color          : inherit;
}

.experience-item p:nth-of-type(2) {
  font-size  : 1rem;
  /* Adjust the font size as needed */
  line-height: 1.5rem;
  /* Adjust line height if necessary */
}

.work-item.active a::after {
  content      : "";
  display      : block;
  width        : 100%;
  /* background: #007BFF; Change to your desired color */
  opacity      : 1;
  /* Make the border visible */
  animation    : moveDots 0.5s linear infinite;
  /* Start the animation */
}

nav a.active::after {
  content  : "";
  display  : block;
  width    : 100%;
  opacity  : 1;
  /* Make the border visible */
  animation: moveDots 0.5s linear infinite;
  /* Start the animation */
}

nav a {
  transition: transform 0.3s ease;
}

nav a:hover {
  transform: translateX(-20px);
  /* Indent on hover */
}

#back-button {
  background      : none;
  border          : none;
  cursor          : pointer;
  margin-right    : 1rem;
  background-color: var(--bg-color);
  color           : var(--text-color);
  position        : fixed;
  top             : 60px;
  left            : 20px;
  width           : 40px;
  height          : 40px;
  border          : none;
  z-index         : 1000;
}

#back-button svg {
  background-color: var(--bg-color);
  fill            : var(--text-color);
  width           : 24px;
  height          : 24px;
}

/* Responsive styles */
@media (max-width: 768px) {

  /* Show menu toggle button on mobile */
  #menu-toggle {
    display   : inline-block;
    background: none;
    border    : none;
    cursor    : pointer;
  }

  /* Hide navigation links initially on mobile */
  .nav-links {
    display         : none;
    flex-direction  : column;
    position        : absolute;
    top             : 50px;
    /* Adjust based on nav height */
    left            : 0;
    right           : 0;
    background-color: #fff;
    padding         : 10px;
    box-shadow      : 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index         : 1000;
  }

  /* Show nav-links when toggle is active */
  .nav-links.active {
    display: flex;
  }

  /* Ensure nav items are full width on mobile */
  .nav-links a,
  .nav-links button {
    padding   : 10px;
    text-align: left;
    width     : 100%;
  }
}

/* Base styles for the work-bar */
.work-bar {
  display: flex;
  gap    : 15px;
}

/* Toggle button for work-bar links on mobile */
.work-bar-toggle {
  display: none;
}

@media (max-width: 768px) {

  /* Show the toggle button for work-bar on mobile */
  .work-bar-toggle {
    display         : block;
    margin-top      : 10px;
    top             : 100px;
    left            : 20px;
    width           : 40px;
    height          : 40px;
    background-color: var(--bg-color);
    color           : var(--text-color);
    position        : fixed;
    cursor          : pointer;
  }

  #work-bar-toggle {
    display         : block;
    margin-top      : 10px;
    top             : 100px;
    left            : 20px;
    width           : 40px;
    height          : 40px;
    background-color: var(--bg-color);
    color           : var(--text-color);
    position        : fixed;
    cursor          : pointer;
  }


  .work-bar-toggle svg {
    background-color: var(--bg-color);
    cursor          : pointer;
    fill            : var(--text-color);
    width           : 24px;
    height          : 24px;
  }

  #work-bar-toggle svg {
    background-color: var(--bg-color);
    cursor          : pointer;
    fill            : var(--text-color);
    width           : 24px;
    height          : 24px;
  }

  /* Hide work-bar links by default on mobile */
  .work-bar {
    display         : none;
    flex-direction  : column;
    gap             : 10px;
    position        : absolute;
    padding         : 10px;
    background-color: var(--bg-color);
    top             : 50px;
    /* Adjust this if needed */
    left            : 0;
    right           : 0;
    z-index         : 1000;
    box-shadow      : 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  /* Show work-bar links when active */
  .work-bar.active {
    display: flex;
  }

  /* Full-width links on mobile */
  .work-bar .work-item {
    width     : 100%;
    text-align: left;
  }
}
/* Hide the default cursor */
* {
  cursor: none;
}

/* The center dot */
.custom-cursor-dot {
  position: fixed; /* Instead of fixed */
  width: 10px;
  height: 10px;
  background-color: var(--cursor-dot-color);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.custom-cursor-outline {
  position: fixed; /* Instead of fixed */
  width: 40px;
  height: 40px;
  border: 2px solid var(--cursor-outline-color);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  /* Transition multiple properties for a smooth animation */
  transition: width 0.3s ease, 
              height 0.3s ease, 
              border-width 0.3s ease, 
              transform 0.3s ease;
}

/* Applied on hover over links */
.custom-cursor-outline.link-hover {
  position: absolute; /* Instead of fixed */
  width: 70px;               /* Larger ring */
  height: 70px;              /* Larger ring */
  border-width: 1px;         /* Thinner border */
  transform: translate(-50%, -50%) scale(1.1);
}

.cursor-fuzzy-sphere.link-hover {

  width: 80px; /* Adjust size as needed */
  height: 80px;
  opacity: 0.75;

}

#cursor-overlay {
  position: fixed;
  /* Takes up the entire viewport */
  top: 0;
  left: 0;
  width: 100vw; /* or 100% if you prefer */
  height: 100vh;
  z-index: 9999999999; /* On top of all else */
  pointer-events: none; /* So it never blocks clicks on your page */
}
.cursor-fuzzy-sphere {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px; /* Adjust size as needed */
  height: 50px;
  border-radius: 100%;
  pointer-events: none;

  /* Radial gradient replaced with a vibrant animated linear gradient */
  background: radial-gradient(circle, #ef4444, #f59e0b, #10b981, #3b82f6, #8b5cf6);

  background-size: 300% 300%; /* Oversize background to allow movement */
  
  animation: gradient-move 2s linear infinite; /* Continuous gradient movement */
  transition: width 0.3s ease, 
              height 0.3s ease, 
              border-width 0.3s ease, 
              transform 0.3s ease;
  
  /* Generous blur for a soft glow */
  filter: blur(10px);
}


@media (max-width: 768px) {
  * {
    cursor: auto !important; /* System cursor */
  }
  .custom-cursor-dot,
  .custom-cursor-outline,
  .cursor-fuzzy-sphere {
    display: none !important; /* Hide all cursor elements, including blur/fuzzy sphere */
  }
}

/* Mobile Warning Popup Styles */
#mobile-warning {
  display: none; /* Hidden by default on larger screens */
}

@media (max-width: 768px) {
  #mobile-warning {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* Show as flex container */
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8); /* Semi-transparent overlay */
    z-index: 1000000; /* Ensure it's above other elements */
  }

  .mobile-warning-content {
    position: relative; /* Establish positioning context for the close button */
    background-color: var(--bg-color); /* Use site's background color */
    color: var(--text-color); /* Use site's text color */
    padding: 40px 30px;
    border-radius: 10px;
    text-align: center;
    max-width: 90%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Optional: Add shadow for depth */
    font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD",
      "Book Antiqua", Georgia, serif; /* Ensure font consistency */
    margin: 20px;
  }

  .mobile-warning-content p {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.5;
  }

  /* Close Button Styles */
  #close-mobile-warning {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-color);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.3s ease;
  }

  #close-mobile-warning:hover {
    color: var(--link-color); /* Change color on hover for feedback */
  }

  /* Optional: Increase clickable area for the close button */
  #close-mobile-warning::before {
    content: '';
    position: absolute;
    top: -5px;
    right: -5px;
    bottom: -5px;
    left: -5px;
  }
}


#safari-banner {
  position: fixed;
  top: 75px; /* Slightly below the top for a clean look */
  left: -300px; /* Initially hidden off-screen */
  width: 280px; /* Small, sleek banner */
  padding: 10px 20px;
  background-color: var(--bg-color); /* Match site's background color */
  color: var(--text-color); /* Match site's text color */
  font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
  font-size: 14px;
  border-radius: 0 5px 5px 0;
  box-shadow: 2px 2px 10px rgba(255, 255, 255, 0.1);
  z-index: 9999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  animation: slideIn 0.5s ease-out forwards;
}

.banner-text {
  flex-grow: 1;
  text-align: left;
}

#close-banner {
  background: transparent;
  border: none;
  color: var(--text-color);
  font-size: 16px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

#close-banner:hover {
  color: var(--link-color); /* Match hover style with site's links */
}

/* Slide-in animation */
@keyframes slideIn {
  from {
    left: -300px; /* Hidden off-screen */
  }
  to {
    left: 0; /* Fully visible */
  }
}

/* ============================================
   Magnetic Filings Animation Styles
   ============================================ */
#parallax-scene {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.parallax-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

#magnetic-background-layer {
  opacity: 0.35;
  mix-blend-mode: screen;
  filter: blur(40px);
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.06), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(0, 0, 0, 0.08), transparent 65%),
    radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.05), transparent 70%);
}

[data-theme="dark"] #magnetic-background-layer {
  mix-blend-mode: lighten;
  opacity: 0.45;
  filter: blur(55px);
}

#magnetic-filings-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0; /* Above the body::before grid but below content */
  pointer-events: none;
  overflow: hidden;
  background: transparent;
}

.magnetic-filing {
  position: absolute;
  background-color: var(--text-color);
  border: 1px solid var(--text-color);
  transition: opacity 0.3s ease;
  opacity: 1 !important; /* Override any inherited opacity */
}

#magnetic-foreground-layer {
  color: var(--text-color);
  opacity: 0.3;
  mix-blend-mode: lighten;
}

.parallax-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0.18;
  box-shadow: 0 0 12px currentColor;
  transition: opacity 0.4s ease;
}