:root {
    --main-bg-rgb: 170, 221, 170; /* #ada; */
    --bs-bg-opacity: 1;
}

@media (prefers-contrast: more) {
  :root {
    /* Try to prevent opacity changes */
    --bs-bg-opacity: 1 !important;
  }
}
@media (prefers-reduced-transparency: reduce) {
  :root {
    /* Try to prevent opacity changes */
    --bs-bg-opacity: 1 !important;
  }
}

body {
    background: rgb(var(--main-bg-rgb));
    padding-left: 12px;
    padding-right: 12px;
}

.content {
    padding: 12px;
    background-color: #ffffff;
    border-radius: 8px;
}

.thumbnail {
    border-radius: 4px;
}

.bg-fade-mask {
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1.0) 50%, transparent 100%);
    position: absolute;
    left: 0px;
    right: 0px;
    z-index: -1;
    top: 0px;
    max-height: 100%;
    overflow: clip;
}

.content img {
    max-width: 100%;
    height: auto;
}

.img-fluid-bg {
    width: 100%;
    height: auto;
}

#game-content .content, #back-button .btn {
    /* Set background-color with game.toml css */
    background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity));
    color: rgb(var(--bs-body-rgb));
    backdrop-filter: blur(5px);
}
#back-button .btn {
    font-weight: bold;
}

#bucket-content .img-contain {
    text-align: center;
    display: block;
}

#bucket-content .img-contain img {
    max-height: 500px;
    object-fit: cover;
    object-position: center 0;

    /* Override this with the aspect ratio that best fits your cover images */
    /* aspect-ratio: 630 / 500; */
}

.author-link {
    text-decoration: none;
}
.author-link:hover {
    text-decoration: underline;
}

#game-title {
    font-weight: bolder;
}

#game-head-container {
    text-align: center;
}

.m-n1 {
  margin:-.25rem
}
.m-n2 {
  margin:-.5rem
}
.m-n3 {
  margin:-1rem
}
.m-n4 {
  margin:-1.5rem
}
.m-n5 {
  margin:-3rem
}

.clear-cols-bottom {
    margin-top: -1rem;
}

#bucket-content .row > div > .card {
    height: 100%;
}

#bucket-content .card .card-title a {
    font-weight: bold;
}

#bucket-content .card .card-title a {
    text-decoration: none;
}

#bucket-content .card .card-title a:hover {
    text-decoration: underline;
}