@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");

:root {
  --md-text-font: "Inter";
}

body,
button,
input,
select,
textarea {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
:root > * {
  --oc-blue: #1769e0;
  --oc-blue-light: #5b9cf0;
  --oc-blue-dark: #0c3d91;
  --oc-cyan: #00a8b5;
  --md-primary-fg-color: var(--oc-blue);
  --md-primary-fg-color--light: var(--oc-blue-light);
  --md-primary-fg-color--dark: var(--oc-blue-dark);
  --md-accent-fg-color: var(--oc-cyan);
}

[data-md-color-scheme="slate"] {
  --md-hue: 216;
  --md-primary-fg-color: #5b9cf0;
  --md-accent-fg-color: #41d2dc;
}

.md-header__button.md-logo img,
.md-nav__button.md-logo img {
  width: auto;
  height: 2rem;
  object-fit: contain;
}

.oc-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin-block: 1rem 2rem;
}

.oc-card {
  display: flex;
  min-height: 7rem;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  color: var(--md-typeset-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.5rem;
  transition: border-color 125ms, box-shadow 125ms, transform 125ms;
}

.oc-card:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 8%);
  transform: translateY(-0.125rem);
}

.oc-card strong {
  color: var(--md-primary-fg-color);
  font-size: 1.05rem;
}

.oc-card span {
  color: var(--md-default-fg-color--light);
}