@import url(mcu.css);
@import url(icons.css);
@import url(theme.css);
@import url(mdl.css);
@import url(global.css);

@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");

html {
  font-family: system-ui, sans-serif;
  scroll-behavior: smooth;
  color-scheme: light dark;
}

body {
  font-family: Raleway, sans-serif;
  font-size: 0.8rem;
  padding: 0;
  margin: 0;
  background: var(--md-sys-color-surface-container-lowest);
  color: var(--md-sys-color-on-surface);
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48;
}

article {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1rem;
  min-height: 100vh;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes slide-from-right {
  from {
    transform: translateX(90px);
  }
}

@keyframes slide-to-left {
  to {
    transform: translateX(-90px);
  }
}

/* define animations for the old and new content */
::view-transition-old(slide-it) {
  animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(slide-it) {
  animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* tie the view transition to a given CSS class */
.sample-transition {
  view-transition-name: slide-it;
}

p.error {
  color: red;
}