/* Make header logo responsive on small screens */
#header img {
    max-width: 95%;
    height: auto;
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Hint text styling */
p.hint {
    font-style: italic;
    font-size: 0.9em;
    color: #888;
    margin-top: -1em;
}

/* Center store icons in game boxes and keep them horizontal */
.box footer ul.actions {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1em;
}

.box footer ul.actions li {
    margin-top: 0;
}

/* Center blog post navigation */
article.post > footer ul.actions {
    text-align: center;
}

/* Stack blog post navigation buttons vertically on small screens */
@media screen and (max-width: 480px) {
    article.post > footer ul.actions {
        flex-direction: column;
        gap: 0.5em;
    }

    article.post > footer ul.actions li {
        width: 100%;
    }

    article.post > footer ul.actions li .button {
        width: 100%;
    }
}

/* Style code blocks in blog posts */
article.post code {
    font-family: "Courier New", Courier, monospace;
    background-color: rgba(0, 0, 0, 0.08);
    padding: 0.5em 1em;
    margin-left: 0.5cm;
    border-radius: 0.5em;
    display: inline-block;
    max-width: calc(100% - 1cm);
    overflow-x: auto;
}

/* Indent blog post article lists a bit */
article.post > ol,
article.post > ul {
    margin: 1cm;
}

/* Center example members */
article.post > ul.examples {
    text-align: center;
}

article.post > ul.examples li {
    list-style-type: none;
    display: inline-block;
}

article.post > ul.examples li img {
    padding: 2mm;
}

/* Make cards in the same row have equal heights */
#games > .row,
#blog > .row {
    display: flex;
    flex-wrap: wrap;
}

#games > .row > [class*="col-"],
#blog > .row > [class*="col-"] {
    display: flex;
}

#games > .row > [class*="col-"] > .box,
#blog > .row > [class*="col-"] > .box {
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* Push the footer to the bottom of each card */
#games > .row > [class*="col-"] > .box > footer,
#blog > .row > [class*="col-"] > .box > footer {
    margin-top: auto;
}