@import url("markdown.css");
@import url("fonts.css");
@import url("theme.css");

main {
  flex: 1;
}
/* =========================
   Control shown
   ========================= */

.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}

/* =========================
   Theme toggle button
   ========================= */

#theme-toggle,
#theme-toggle-mobile {
  position: relative;
}

#theme-toggle svg,
#theme-toggle-mobile svg {
  position: absolute;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  stroke: currentColor;
  fill: none;
}

/* Dark mode icon visibility fix */
html.dark #theme-toggle svg,
html.dark #theme-toggle-mobile svg,
html.dark #theme-toggle svg *,
html.dark #theme-toggle-mobile svg * {
  stroke: #fff !important;
  fill: #fff !important;
  color: #fff !important;
}

/* =========================
   Global transitions
   ========================= */

html,
body,
* {
  transition: background-color 0.3s ease;
}

/* =========================
   Responsive adjustments
   ========================= */

@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }

  .mobile-only {
    display: block;
  }

  footer {
    margin-bottom: 80px;
  }
}