.md-header__button.md-logo {
    margin: 0;
    padding: 0;
}
.md-header__button.md-logo img, .md-header__button.md-logo svg {
    height: 60px;
    width: 60px;
}

/* Make Maroon the Primary Color */
:root {
    --md-primary-fg-color: #800000;
    --md-primary-fg-color--light: #a04545;
    --md-primary-fg-color--dark: #600000;
}

/* Container to control the iframe size and scaling */
.iframe-container {
    width: 100%;
    position: relative;
    overflow: hidden;
  }

  /* Iframe styles */
  iframe {
    width: 100%;
    border: solid 2px blue;
  }

  /* if a div with <div class="upper-alpha"> wraps a list, then number A.B.C.D etc */
  /* this requires that the markdown extension md_in_html is enabled in the mkdocs.yml file */
  .upper-alpha ol {
    list-style-type: upper-alpha;
  }

/* Styling for the Copy Button */
.admonition.prompt {
  position: relative;
}

.admonition.prompt .copy-button {
  position: absolute;
  top: 4px;
  right: 6px;
  background-color: #0056d6;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 0.3rem 0.3rem;
  cursor: pointer;
  font-size: 0.7rem;
}

.admonition.prompt .copy-button:hover {
  background-color: #0041a4; /* Darker blue on hover */
}

/* Gyra Moment admonitions - robot mascot icon */
.admonition.gyra-moment {
  position: relative;
  border-left-color: #e91e63 !important; /* Pink accent for Gyra */
}

.admonition.gyra-moment > .admonition-title {
  background-color: rgba(233, 30, 99, 0.1) !important;
}

.admonition.gyra-moment::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 12px;
  width: 32px;
  height: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3C!-- Gyra: Two-wheeled balancing robot --%3E%3C!-- Wheels --%3E%3Ccircle cx='20' cy='54' r='8' fill='%23555' stroke='%23333' stroke-width='2'/%3E%3Ccircle cx='44' cy='54' r='8' fill='%23555' stroke='%23333' stroke-width='2'/%3E%3C!-- Axle --%3E%3Crect x='18' y='52' width='28' height='4' rx='2' fill='%23666'/%3E%3C!-- Body - slightly tilted to show instability --%3E%3Crect x='22' y='20' width='20' height='32' rx='4' fill='%23e91e63' transform='rotate(-3 32 36)'/%3E%3C!-- Face plate --%3E%3Crect x='24' y='24' width='16' height='12' rx='2' fill='%23fff' transform='rotate(-3 32 30)'/%3E%3C!-- Eyes --%3E%3Ccircle cx='28' cy='29' r='2.5' fill='%2300bcd4'/%3E%3Ccircle cx='36' cy='28.5' r='2.5' fill='%2300bcd4'/%3E%3C!-- Antenna --%3E%3Cline x1='32' y1='20' x2='34' y2='10' stroke='%23333' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='34' cy='8' r='3' fill='%2300bcd4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.85;
}

/* Adjust icon position for smaller screens */
@media (max-width: 600px) {
  .admonition.gyra-moment::after {
    width: 24px;
    height: 24px;
    top: 1px;
    right: 8px;
  }
}