.navbar-blur-background {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: hsla(0, 0%, 100%, 0.8);
  backdrop-filter: blur(var(--blur-size));
  -webkit-backdrop-filter: blur(var(--blur-size));
}

.navbar {
  z-index: 10;
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--page-padding);

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar-top-background {
  background-color: white;
  height: var(--navbar-height);
}

.nav-logo {
  cursor: pointer;
  height: clamp(2.3rem, 9vw, 3rem);
}

.buttons {
  display: flex;
  --button-margin: clamp(0.8rem, 5vw, 4rem);
}

.nav-button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: var(--button-margin);
}

.dropdown {
  position: relative;
}

.dropdown-content {
  display: flex;
  flex-direction: column;
  width: max-content;

  position: absolute;
  z-index: 99;
  -webkit-backdrop-filter: blur(var(--blur-size));
  box-shadow: var(--smooth-shadow-small);
  border-radius: 0.9rem;
  backdrop-filter: blur(0);

  margin-top: 2.2rem;
  margin-left: clamp(-3.8rem, calc(6vw - 4.9rem), -1rem);
  font-size: clamp(1.1rem, 3.2vw, 1.3rem);
  padding: 0.7rem 0.6rem;

  transform: translateY(-0.7rem);
  backdrop-filter: blur(0);
  background-color: hsla(0, 0%, 100%, 0.8);
  opacity: 0;

  transition:
    opacity 0.2s var(--smooth-ease-in),
    backdrop-filter 0.2s var(--smooth-ease-in),
    transform 0.4s var(--smooth-ease-in);
}

.active .dropdown-content {
  opacity: 1;
  backdrop-filter: blur(var(--blur-size));
  transform: translateY(0);
}

.dropdown-button {
  cursor: pointer;
  border-radius: 0.5rem;
  padding: 0.5rem 0.7rem;
  transition: background-color 0.2s linear;
}

.dropdown-button:hover {
  background-color: hsla(0, 0%, 50%, 0.2);
}

.dropdown .nav-button-container {
  margin-right: -0.2rem;
}

.nav-button-container > .underline {
  width: 0;
  height: 0.2rem;
  background-color: var(--color-primary);
  transition:
    width 0.4s ease-out,
    opacity 0.2s ease-out;
  margin-top: 0.2rem;
  border-radius: 0.2rem;
}

.nav-button-container:hover > .underline {
  width: 0.4rem;
  opacity: 0.4;
}

.nav-button-container > .underline.active {
  width: 100%;
}

.nav-button {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: black;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  cursor: pointer;

  transition: opacity 0.2s var(--smooth-ease-in);
}

/* hover but only on non touch devices */
@media (hover: hover) {
  .nav-button:hover {
    opacity: 0.7;
  }
}

.dropdown-chevron {
  margin-left: clamp(0.1rem, 2vw, 0.4rem);
  transform: rotate(90deg);
  height: clamp(1.0rem, 5vw, 1.6rem);
  transition:
    transform 0.3s var(--smooth-ease-in),
    filter 0.2s var(--smooth-ease-in);
}

.active .dropdown-chevron {
  transform: rotate(90deg) translateX(0.1rem);
  filter: var(--color-primary-filter) !important;
}


.dropdown .nav-button {
  transition: filter 0.2s var(--smooth-ease-in);
}


@keyframes fade-in-blog-intro-circle {
    from { opacity: 0.0; filter: blur(7rem); }
    to { opacity: 1; filter: blur(2rem); }
}
.blog-intro-circle {
  position: absolute;
  right: max(8%, 4rem);
  --size: min(17rem, 33vw);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: linear-gradient(
    205deg,
    rgba(0,122,255,0) 10%,
    rgba(0,122,255,0.4) 48%,
    rgba(0,122,255,1) 100%
  );
  opacity: 0;
  animation: fade-in-blog-intro-circle 2.5s 0.1s cubic-bezier(.08,.69,.33,1) forwards;
}

.blog-intro-title {
  margin-top: 3.5rem;
  --margin-sides: clamp(0.3rem, 12vw, 7rem);
  margin-left: var(--margin-sides);
  margin-right: var(--margin-sides);
  position: absolute;
  z-index: 2;
  transition: opacity 2s ease-out;
}

.button {
  display: flex;
  align-items: center;
  width: fit-content;
  cursor: pointer;
  color: var(--color-primary);
  border-radius: 0.3rem;

  --arrow-offset: -1.9rem;
}

.blog-post {
  margin-top: clamp(2rem, 5vw, 4rem);
}

.blog-post .post-header, .blog-post .post-subheader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.blog-post .category {
  display: flex;
  align-items: baseline;
  background-color: hsla(0, 0%, 50%, 0.2);
  padding: clamp(0.2rem, 1vw, 0.4rem) clamp(0.4rem, 2.0vw, 0.9rem);
  border-radius: 2rem;
  font-size: clamp(0.6rem, 2.4vw, 1.2rem);
  margin-left: 0.5rem;
}

.blog-post .category > * {
  filter: brightness(0) saturate(100%);
  opacity: 0.7;
}

.blog-post .category img {
  height: clamp(0.7rem, 3.2vw, 1.3rem);
  margin-right: clamp(0.3rem, 1vw, 0.5rem);
  transform: translateY(0.2rem);
}

.blog-post .title {
  font-weight: 700;
  font-size: clamp(1.4rem, 5vw, 2.2rem);
}

.blog-post .post-subheader {
  margin-top: 0.3rem;
}

.blog-post .subtitle {
  font-weight: 500;
  opacity: 0.7;
  font-size: clamp(1.1rem, 4.1vw, 1.5rem);
}

@media (max-width: 35rem) {
  .blog-post .date {
    display: none;
  }
}
.blog-post .date {
  font-size: clamp(0.6rem, 3vw, 1.3rem);
  font-style: italic;
  margin-top: 0.3rem;
  margin-right: 0.6rem;
  margin-left: 0.6rem;
  opacity: 0.6;
  white-space: nowrap;
}

.blog-post .button {
  font-size: clamp(1.0rem, 4vw, 1.5rem);
  margin-top: clamp(0.8rem, 2vw, 1.2rem);
  font-weight: 500;
  --transition-duration: 0.2s;
}

.blog-post .image-subtitle {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
}

.button img {
  position: absolute;
  filter: var(--color-primary-filter);
  margin-right: 0.4rem;
  opacity: 0;

  transform: translateX(calc(var(--arrow-offset) - 0.4rem));

  transition:
    transform var(--transition-duration) ease-out,
    opacity var(--transition-duration) linear;
}

.button:hover img {
  transform: translateX(var(--arrow-offset));
  opacity: 1;
}

.button div {
  transition: transform var(--transition-duration) ease-out;
}

.button:hover div {
  transform: translateX(0.15rem);
}
.about-page .top-paragraph {
  margin-top: clamp(3.0rem, 4.6vw, 4.5rem);
}

@keyframes fade-in-about-intro-icon {
    from { opacity: 0; transform: translateY(1rem); }
    to { opacity: 0.7; transform: translateY(-0.2rem); }
}
.about-intro-icon {
  position: absolute;
  right: 8%;
  --size: clamp(5rem, 35vw, 17rem);
  width: var(--size);
  height: var(--size);
  opacity: 0;
  animation: fade-in-about-intro-icon 3s 0.2s cubic-bezier(.08,.69,.33,1) forwards;
}

.about-intro-title {
  margin-top: 2.5rem;
  margin-left: clamp(0.3rem, 15vw, 10rem);
  margin-right: clamp(0.3rem, 19vw, 13rem);
  position: absolute;
  z-index: 2;
}

.about-intro-subtitle {
  margin: 16rem 40% 0 35%;
  position: absolute;
  z-index: 2;
}

.find-me-links {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.find-me-links div {
  display: flex;
  gap: 2rem;
}
.xtu-page .full-width-svg {
  --margin-vertical: 3.6rem;
  --margin-horizontal: clamp(0rem, 5vw - 2.1rem, 3rem);
  margin-top: var(--margin-vertical);
  margin-bottom: var(--margin-vertical);
  margin-left: var(--margin-horizontal);
  margin-right: var(--margin-horizontal);
}
#mjd-page .title {
  text-align: center;
  font-size: clamp(2.2rem, 5vw, 2.7rem);
  margin: 0 0.5rem 0.9rem 0.6rem;
  color: hsl(0, 0%, 25%);
  margin-top: clamp(5.0rem, 9vw, 8.5rem);

  transition:
    transform 0.5s 0.1s var(--smooth-ease-in),
    opacity 0.5s 0.1s linear;
  transform: translateY(1rem);
  opacity: 0;
}

#mjd-page.show .title {
  transform: translateY(0);
  opacity: 1;
}

#mjd-page .subtitle {
  text-align: center;
  font-weight: 500;
  font-size: clamp(1.3rem, 3vw, 1.5rem);
  color: hsl(0, 0%, 46%);
  line-height: clamp(2.1rem, 8vw, 2.8rem);
  margin: 0 clamp(0rem, 11vw, 7rem);
  margin-top: clamp(0rem, 1vw, 1.5rem);

  transition:
    transform 0.5s 0.3s var(--smooth-ease-in),
    opacity 0.5s 0.3s linear;
  transform: translateY(1rem);
  opacity: 0;
}

#mjd-page.show .subtitle {
  transform: translateY(0);
  opacity: 1;
}


#mjd-page .subtitle i {
  color: hsl(0, 0%, 33%);
  padding: 0.1rem 0.3rem;
  border-radius: 0.4rem;
  white-space: nowrap;
  transition: background-color 0.8s 1.0s linear;
}

#mjd-page.show .subtitle i {
  background-color: hsla(145, 78%, 82%);
}

.microsoft-json-dates {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.mjd-value-widget {
  opacity: 0;
  transition: opacity 0.3s ease;
  box-shadow: var(--smooth-shadow-small);
  margin-top: 5rem;
  margin-bottom: 20vh;
  display: flex;
  align-items: center;
  background-color: hsla(0, 0%, 10%);
  color: hsl(72, 60%, 95%);
  padding: 1.5rem clamp(1.0rem, 5vw, 2.0rem);
  
  border-radius: 1.3rem;
}

@media (max-width: 40rem) {
  .mjd-value-widget {
    flex-direction: column;
  }

  .mjd-button-container {
    margin-left: 0 !important;
    margin-top: 1.2rem !important;
    margin-bottom: 0.5rem !important;
  }

  .mjd-button.play {
    margin-right: 0.8rem !important;
  }
}

#mjd-page.show .mjd-value-widget {
  opacity: 1;
}

.mjd-value-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mjd-time-equiv {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(1.0rem, 3.2vw, 1.5rem);
  font-family: monospace;
  border-radius: 1rem;
  padding: 0.4rem 0.4rem;

  transition: background-color 0.12s ease;
  background-color: hsla(223, 7%, 53%, 0.15);
}

.mjd-time-equiv.error {
  background-color: hsla(51, 100%, 50%, 0.15) !important;
}

.mjd-time-equiv input {
  font-size: inherit;
  font-family: inherit;
  padding: 0.2rem 0.2rem 0.2rem 0.7rem;
  border-radius: 0.4rem;

  background: hsla(0, 0%, 100%, 0);
  color: rgba(248, 248, 247, 0.6);
  appearance: none;

  transition:
    color 0.2s ease,
    border 0.2s ease,
    background 0.2s ease;
  border: 1px solid hsla(0, 0%, 50%, 0);
}

.mjd-time-equiv input:focus{
  outline: none;
  box-shadow: none;
  background: hsla(0, 0%, 100%, 0.1);
  color: rgba(248, 248, 247, 0.9);
  border-color: hsla(0, 0%, 47%, 0.5);
}

#mjd-date-value {
  width: 6em;
}

#mjd-time-value {
  width: 5em;
}


#mjd-value {
  margin-top: 0.9rem;
  font-family: monospace;
  color: hsl(0, 0%, 100%);
}

@keyframes mjd-value-update {
  0%, 100% { }
  3% { color: hsl(155, 100%, 55%); }
}
#mjd-value.animate {
  animation: mjd-value-update 0.4s var(--smooth-ease-in);
}

.mjd-button-container {
  margin-left: clamp(0.6rem, 4vw, 1.8rem);
  display: flex;
  align-items: center;
}

.mjd-copy-wrapper {
  position: relative;
}

.mjd-button {
  display: flex;
  border-radius: 50%;
  background-color: hsl(0, 0%, 23%);
  width: fit-content;
  height: fit-content;
  padding: 0.7rem;
  margin-right: clamp(0.4rem, 1vw, 0.8rem);
  cursor: pointer;
}

/* Add these new styles */
.mjd-copy-banner {
  position: absolute;
  top: -2.2rem;
  left: 50%;
  transform: translateX(-54%);
  background-color: hsl(0, 0%, 17%);
  color: hsl(0, 0%, 100%);
  padding: 0.4rem 0.9rem;
  border-radius: 0.9rem;
  font-size: 1rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.mjd-copy-banner.show {
  opacity: 1;
}

.mjd-button img {
  width: clamp(1.2rem, 3.8vw, 2.0rem);
  filter: invert(1);
  opacity: 0.95;
}



.mjd-value-input {
  background: transparent;
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  outline: none;

  width: 12em;
  font-size: clamp(1.2rem, 3.7vw, 2.0rem);

  border-radius: 1.1rem;
  padding: 0.4rem 0.7rem 0.4rem 1.0rem;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  border: 1px solid transparent;
  
}

.mjd-value-input:hover {
  background-color: hsla(0, 0%, 100%, 0.05);
}

.mjd-value-input:focus {
  outline: none;
  box-shadow: none;
  background: hsla(0, 0%, 100%, 0.1);
  color: rgba(248, 248, 247, 0.9);
  border-color: hsla(0, 0%, 47%, 0.5);
}

.mjd-value-input.error {
  background-color: hsla(51, 100%, 50%, 0.15) !important;
}

.mjd-time-equiv.animate input {
  animation: mjd-value-update 0.4s var(--smooth-ease-in);
}

.mjd-time-input-wrapper {
  position: relative;
}

.mjd-time-buttons {
  position: absolute;
  top: -3rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  border-radius: 0.5rem;
  padding: 0.3rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.5s var(--smooth-ease-in);
}

.mjd-time-buttons.show {
  opacity: 1;
  visibility: visible;
}

.mjd-time-buttons.show .mjd-time-button {
  transform: translateY(0);
}

.mjd-time-button {
  background-color: hsl(0, 0%, 23%);
  color: hsl(0, 0%, 100%);
  border: none;
  border-radius: 50%;
  width: 2.2rem;
  height: 2.2rem;
  margin: 0 0.2rem;
  font-size: 0.7rem;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(0.2rem);
  box-shadow: var(--smooth-shadow-small);
}

.mjd-time-button:hover {
  background-color: hsl(0, 0%, 30%);
}

:root {
  --page-max-width: 56rem;
  --color-primary: hsl(211, 100%, 50%);
  --color-primary-filter:
    brightness(0) saturate(100%) invert(26%) sepia(98%) saturate(2674%)
    hue-rotate(203deg) brightness(109%) contrast(104%);
  --navbar-height: 5.2rem;
  --page-padding: clamp(1.5rem, 8vw, 3rem);
  --smooth-ease-in: cubic-bezier(.08,.69,.33,1);
  --smooth-shadow-small: 
    0px 1.7px 3.1px rgba(0, 0, 0, 0.07),
    0px 13px 33px rgba(0, 0, 0, 0.07)
  ;

  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: hsl(0, 0%, 89%) hsl(0, 0%, 98%);
}

body {
  font-family: Inter, Helvetica, sans-serif;
  color: hsl(0, 0%, 15%);
  background-color: hsl(0, 0%, 95%);
  padding: 0;
  margin: 0;
  height: 100vh;
  font-size: 1.2rem;
  overflow-y: scroll;
}

body p {
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

body h2 {
  margin-top: 3.5rem;
  margin-bottom: 0.8rem;
}
body h3 {
  margin-bottom: 0.4rem;
}

.top-section {
  position: fixed;
  z-index: 1000;
  height: var(--navbar-height);
  width: 100%;
  display: flex;

  --blur-size: 0.6rem;
}

.content-section {
  min-height: 74vh;
  font-size: clamp(1.3rem, 3.1vw, 1.5rem);
}

.footer-section {
  padding: 5rem 0 2rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.75;
  font-size: clamp(0.9rem, 3.0vw, 1.15rem);
}

.footer-section img {
  width: clamp(10rem, 34vw, 15rem);
}

.max-width {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--page-padding);
}

.content-body {
}


.banner-section {
  background-color: white;
}

.banner-section > * {
  position: relative;
  max-width: var(--page-max-width);
  margin: 0 auto 0 auto;
  padding: 5rem 0 2rem 0;
  padding-top: clamp(1rem, 6vw, 8rem);
  height: clamp(12rem, 43vw, 28rem);
}

.code-container {
  font-size: 1.1rem;
  background-color: hsl(200, 7%, 18%);
  color: hsl(164, 20%, 96%);
  border-radius: 1rem;
  padding: 0 0.6rem 0.6rem 0.6rem;
  overflow-x: auto;
}

.code-container pre {
  font-family: monospace;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: hsl(0, 0%, 50%) hsl(164, 7%, 18%);
  margin: 0;
  padding: 2.0rem 1.7rem 1.6rem 1.7rem;
  font-size: clamp(1.0rem, 3.0vw, 1.4rem);
}

.image-subtitle {
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  color: hsl(0deg, 0%, 50%);
  font-style: italic;
}

.blog-title {
  text-align: center;
  margin: 6rem 0 0 0;
}

.blog-subtitle {
  text-align: center;
  margin: 0.6rem 0 4rem 0;
  opacity: 0.6;
  font-weight: 500;
}

.full-width-image {
  max-width: 100%;
}

.blog-image-container {
  margin: 2rem 0;
  text-align: center;
}

.blog-image-container {
  margin: 3rem clamp(0rem, calc(4vw - 1rem), 5rem) 2rem;
  text-align: center;
}

.blog-smaller-image {
  max-width: 100%;
  height: auto;
}

.shadow {
  box-shadow: var(--smooth-shadow-small);
}

.subtle {
  opacity: 0.4;
  font-weight: 400;
  font-style: italic;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}