:root
{
    --games-section-margin: 120px;
}

#company-logo
{
    /* I set this percentage based on the smaller iPhone screen size and then just make sure the max width is set when the screen size
    is at the max viewport width (e.g. 1000) */
    width: 75%;
    max-width: 350px;

    /* We get the current size of the logo then use a percentage of it as a margin so that when we shrink the screen and the image shrinks,
    the margin shrinks with the image  */
    /* margin-bottom: calc(min(var(--company-logo-percent), calc(var(--company-logo-width) * 1px)) * 0.6); */
}

#star-creature
{
    transform-origin: 50% 25px;
}

.animated-creature
{
    width: 40px;
    margin-top: var(--games-section-margin);
    margin-bottom: var(--games-section-margin);
}

#games
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: var(--games-section-margin);
}

#games .outline-badge
{
    transform: translateY(20px);
}

#games #game-banner-flex
{
    width: 100px;
}

#games .game-banner
{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#games .game-banner a
{
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    max-width: 300px;
}

/* If you have the video as the one that isn't absolute positioned, refreshing will show the image as squashed for a second as the video loads */
#games video
{
    position: absolute;
    transition: opacity 0.15s ease-out;
}

#games a:hover video, #games a:active video
{
    opacity: 0.5;
}

#games .game-banner-border
{
    z-index: 10;
}

#games .game-banner-logo
{
    position: absolute;
    width: 75%;
    transition: transform 0.15s ease-out
}

@media(max-width: 550px) 
{
    main
    {
        width: 80%;
    }

    #games
    {
        flex-direction: column;
        display: flex;
        align-items: center;
    }

    #swappy-shapes-banner
    {
        margin-bottom: 50px;
    }

    #game-banner-flex
    {
        display: none;
    }

    #games .outline-badge
    {
        transform: translateY(-35px);
    }
}