body {
  animation: 2s ease-out 0s 1 FadeIn;
}
@keyframes FadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

body {
  --bs-body-font-size: 18px;
  --bs-border-radius: 0.5rem;
}

h1 {
  font-family: "Fontdiner Swanky", serif;
  text-shadow: 5px 5px #1d1b22;
}

h3 {
  line-height: 45px;
}

/* Constrain container width even more than container-sm.
https://getbootstrap.com/docs/5.3/layout/containers/#how-they-work */
@media (min-width: 992px) {
  .container-sm {
    max-width: 960px !important;
  }
}

.card h2 {
  padding-bottom: 1rem;
}

html,
body {
  background-color: #2e3436;
}

/* Colours from Tango theme */
.red,
code {
  color: #ef2929;
}
.green,
a {
  color: #8ae234;
}

.img-wrapper {
  width: atuo;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-border-radius);
  background-color: #2e3436;
}
.img-wrapper img {
  max-width: 100%;
}

.card-body object {
  background-color: #f8f8f2;
  border-radius: 25% 25%;
  padding: 5px;
  box-shadow: 5px 5px #a09fa2;
}

.github-logo {
  padding-right: 5px;
}

.card-set .card {
  border-radius: 0;
  border-bottom: 0;
}
.card-set .card:first-child {
  border-top-right-radius: var(--bs-card-border-radius);
  border-top-left-radius: var(--bs-card-border-radius);
}
.card-set .card:last-child {
  border-bottom-right-radius: var(--bs-card-border-radius);
  border-bottom-left-radius: var(--bs-card-border-radius);
  border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}