/* ======
Games page
====== */

#content {
    padding-bottom: 2rem;
}

/* Sass doesn't support attribute type casting yet. */
/* Nor does VSCode's syntax highlighting */

#game-embed {
    display: block;
    box-shadow: rgb(150, 141, 150) 1px 1px 3px 0px;
    /* no Firefox support D: */
    /* width: calc-size(600px, min(100%, size)); */
    /* data-width|height are made into inline styles by ruffle. use gwidth instead */
    height: attr(data-game-height type(<length>), 400px);
    width: attr(data-game-width type(<length>), 400px);
    /* override ruffle's height to allow for aspect ratio to take effect */

    ruffle-player {
        width: 100%;
        height: 100%;
    }
}

#game-embed.game-embed--responsive {
    
    /* allow aspect-ratio to take over at smaller screen sizes */
    /* for some reason the <div> that contains the ruffle player sometimes exceeds its container width..
    (shadez)
    So, use a bit less than 100% of the container width. */
    
    height: auto;
    aspect-ratio: 1.5;
    /* hacky! */
    @media screen and (max-width: 50em) {
        width: 99%;
    }
}

/* for browsers without calc-size() support */
/* @media screen and (max-width: 50em) {
    .game-embed {
        width: 100%;
    }
} */