:root {
  --md-default-fg-color--light: #404040;
  --md-code-hl-function-color: #7a008f;
  --md-default-bg-color: #f2f2f2;
  --md-primary-fg-color: #5f7ccc;
  --tpw-font-size: .75rem;
}

h1 {
  text-align: center;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Center content if the width is too low for the table of contents to display */
@media screen and (max-width: 60em) {
  .md-main__inner.md-grid {
    justify-content: center !important;
  }
}

.md-typeset {
  font-size: var(--tpw-font-size) !important;
}

.md-typeset ol li, .md-typeset ul li {
  margin-bottom: 4px !important;
}

.md-header__button.md-logo img {
  height: 2rem !important; /* Header itself has no height set; it's dictated by the logo */
  margin: 5px 0 !important;
}

.md-header__button {
  margin: 0 0 0 0px !important;
  padding: 0 !important;
}

.md-nav__link {
  user-select: none;
}

.hljs-comment {
  color: #3e3e3e;
}

.hljs-params {
  color: #893917;
  font-weight: bold;
}

.hljs-keyword {
  color: #893917
}

.hljs-title {
  color: #032982;
}

code {
  font-family: SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,Courier,monospace;
}

p {
  line-height: 24px;
  margin: 0;
  margin-bottom: 9px;
  margin-top: 9px;
  font-size: var(--tpw-font-size) !important;
}

h5, h4, h3, h2, h1 {
  margin: 18px 0 8px 0 !important;
  font-weight: 700 !important;
  color: var(--md-default-fg-color--light);
}

h5 {
  text-transform: none !important;
  font-size: 110% !important;
}

code {
  font-size: 90% !important;
}

.admonition-title {
  color: #000000 !important;
}

/* Used by nightly.md table; prevents text in first column from wrapping */
td:first-child {
  white-space: nowrap;
}

img {
  margin-top: 2px;
  margin-bottom: 2px;
}

summary {
  user-select: none;
}

/* Underline links in main content section */
.md-content a {
  text-decoration: underline;
}

/* Admonitions */

.admonition {
  border-radius: 0px !important;
  border-color: transparent !important;
}

.admonition.info {
  background-color: #e7f2fa;
}

.admonition.warning {
  background-color: #ffedcc;
}

.admonition {
  font-size: var(--tpw-font-size) !important;
}

/* Content area */
.md-main__inner.md-grid {
  max-width: 65rem !important;
  justify-content: space-between; /* Snap first and last element to edges, so that the center grid element is centered but can leave a gap (through max-width) */
}

.md-content {
  max-width: 38rem !important;
  background: white;
}

.md-main__inner {
  margin-top: 0px !important;
}

/* Centering tables */
.md-typeset__table {
  display: flex !important;
}

.md-typeset__table table {
  margin: 0 auto !important;
  flex-grow: 0;
  width: unset !important;
}

/* Code Highlighting */

/* Function keyword, table and function name */
.nf, .nc, .kr { 
  font-weight: 700;
}

/*
 * Card style
 * Source: https://uiverse.io/JohnnyCSilva/jolly-elephant-67
*/

.card-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
  margin-top: 1em;
}

a.card {
  text-decoration: none;
  color: unset !important;
}

.card {
  width: 340px;
  height: 320px;
  background: white;
  border-radius: 10px;
  box-shadow: 15px 15px 30px #bebebe;
             /* -15px -15px 30px #ffffff; */
  transition: 0.2s ease-in-out;
}

/* Make cards compact on mobile layouts */
@media (max-width: 730px) {
  .card {
    width: 100%;
    height: fit-content !important;
  }
}

.card-img {
  overflow: hidden;
  width: 100%;
  height: 50%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: linear-gradient(#e66465, #9198e5);
  display: flex;
  align-items: top;
  justify-content: right;
  border-bottom: 2px solid #7d428f;
}

.card-img img {
  width: 100%;
  transition: transform .2s; /* Animation */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  object-fit: cover;
  margin: 0 !important;
}
.card:hover img {
  transform: scale(1.05); /* Zoom in on hover */
}

.card hr {
  margin: 0 !important;
}

.card-text {
  margin: 10px 15px 10px 15px;
  display: flex;
  flex-direction: column;
  align-items: space-around;
}

.card-text h3 {
  margin-top: 0 !important;
  text-align: center;
  font-size: large;
  font-weight: 600;
  color: black;
}

.card-text p {
  font-size: 13px;
}

.card:hover {
  cursor: pointer;
  box-shadow: 0px 10px 20px rgba(0,0,0,0.1);
}