div.main-home {

    div,
    a {
        color: currentColor;
        text-decoration: none;

        &:active {
            color: currentColor;
        }

        /* This is used for the "/games/" page */
        &.games-layout {
            flex-grow: 2;
            margin: 10px;
            padding: 5px;
            text-align: center;
            background-color: #454545;
            background-image: url('/assets/imgs/error/title_gameover.png'), url('/assets/imgs/error/bg_interior.png');
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover, cover;
            image-rendering: pixelated;
            height: 180px;
            width: clamp(200px, 100px, 400px);
            user-select: none;
            cursor: default;
            box-shadow: inset 0px 0px 0px 125px rgba(18, 18, 18, 0.5);
            border: solid 3px #ececec;
            border-radius: 5px;

            &[access=true] {
                cursor: pointer !important;
            }

            &[shadow=false] {
                box-shadow: none !important;

                h2 {
                    display: none;
                }
            }

            &[shadow=special] {
                box-shadow: inset 0px 0px 0px 125px rgba(18, 18, 18, 0.45) !important;
                z-index: 0;

                h2 {
                    transform: translateY(105px);
                    z-index: -1;
                    position: relative;
                }
            }

            &[access=info] {
                cursor: help !important;
                box-shadow: inset 0px 0px 20px 10px rgb(236, 200, 101, 0.5) !important;
            }

            &[access=false] {
                cursor: not-allowed !important;
                box-shadow: inset 0px 0px 20px 10px rgb(189, 38, 41, 0.5) !important;
            }

            &[flex-size=large] {
                flex-grow: 5000 !important;
            }

            &[flex-size=medium] {
                flex-grow: 4 !important;
            }

            &[flex-size=fill] {
                width: -webkit-fill-available;
            }

            &#ghosts-japes {
                background-image: url('https://charcuteriedev.com/Assets/Images/Ghosts%20and%20Japes.png'), url('/assets/imgs/games/ghosts-and-japes/ghost_backup.png');
                background-position: center center;
                background-size: cover;
                image-rendering: auto;
                background-repeat: no-repeat;
            }

            &#pixel-prey-reformed {
                background-image:
                    url('/assets/imgs/games/pixel-prey/pixel_prey_halloween_logo.png'),
                    url('/assets/imgs/games/pixel-prey/pixel_prey_background_halloween.png');
                background-position: center center;
                background-size:
                    /* Logo */
                    contain,
                    /* Background */
                    cover;
                image-rendering: pixelated;
                background-repeat: no-repeat;
            }

            &#maw-manor {
                background-image:
                    url('/assets/imgs/games/maw-manor/title.png'),
                    url('/assets/imgs/games/maw-manor/nel.png'),
                    url('/assets/imgs/games/maw-manor/hills.png'),
                    url('/assets/imgs/games/maw-manor/manor.png'),
                    url('/assets/imgs/games/maw-manor/clouds.png'),
                    url('/assets/imgs/games/maw-manor/sky.png');
                background-position:
                    /* Title */
                    center center,
                    /* Nel */
                    15% bottom,
                    /* Hills */
                    center center,
                    /* Manor */
                    70% -70px,
                    /* Clouds */
                    center center,
                    /* Sky */
                    center center;
                background-size:
                    /* Title */
                    contain,
                    /* Nel */
                    clamp(120px, 10%, 200px),
                    /* Hills */
                    cover,
                    /* Manor */
                    contain,
                    /* Clouds */
                    cover,
                    /* Sky */
                    cover;
                image-rendering: pixelated;
                background-repeat: no-repeat;
            }

            &#retale-i {
                background-image:
                    url('/assets/imgs/games/retale-i/retale_i_title.png'),
                    url('/assets/imgs/games/retale-i/retale_i_dark.png'),
                    url('/assets/imgs/games/retale-i/retale_i_background.png');
                background-position: center top, center center, right center;
                background-size: cover, cover, cover;
                image-rendering: auto;
                background-repeat: no-repeat, no-repeat, repeat-y;
                animation: retale-i-parallax 55s infinite linear;
            }

            &#retale-ii {
                background-image:
                    url('/assets/imgs/games/retale-ii/retale_ii_title.png'),
                    url('/assets/imgs/games/retale-ii/retale_ii_background.png');
                background-position: center bottom, right center;
                background-size: cover, cover;
                image-rendering: auto;
                background-repeat: no-repeat, repeat-y;
                animation: retale-ii-parallax 55s infinite linear;
            }

            &#retale-iii {
                background-image:
                    /* Logo */
                    url('/assets/imgs/games/retale-iii/logo_retale_3.png'),
                    /* Magic Parallax */
                    url('/assets/imgs/games/retale-iii/magic_parallax.png');
                background-position:
                    /* Logo */
                    center center,
                    /* Magic Parallax */
                    top center;
                background-size: cover;
                image-rendering: auto;
                background-repeat:
                    /* Logo */
                    no-repeat,
                    /* Magic Parallax */
                    no-repeat;
                animation: retale-iii-parallax 55s infinite linear;
            }

            &#echidna-wars-dx {
                background-image:
                    url('/assets/imgs/games/echidna-wars-dx/title_title.png'),
                    url('/assets/imgs/games/echidna-wars-dx/title_screen.png');
                background-position: top right, center center;
                background-size: clamp(200px, 50%, 800px), cover;
                background-repeat: no-repeat;
                image-rendering: pixelated, auto;
                animation: echidna-intro 1.5s cubic-bezier(0.46, -0.01, 0.44, 1.24);
                animation-iteration-count: 1;
            }

            &#decadent-deity {
                background-image: url('/assets/imgs/games/decadent-deity/logo_screen.png');
                background-position: center center;
                background-size: contain;
                background-repeat: no-repeat;
                image-rendering: auto;
                background-color: #ffffff;
            }

            &#uropoke {
                background-image: url('/assets/imgs/games/uropoke/shrike_finished_vored.png');
                background-position: center;
                background-size: cover;
                background-repeat: no-repeat;
                image-rendering: pixelated;

                &:hover {
                    background-image: url('/assets/imgs/games/uropoke/shrike_finished_digesting.png');

                    &:active {
                        background-image: url('/assets/imgs/games/uropoke/shrike_finished_digested.png');
                    }
                }
            }

            &#mmvrs {
                background-image: url('/assets/imgs/games/mmvrs/mmvrs_home.jpg');
                background-position: center center;
                background-size: cover;
                background-repeat: no-repeat;
                image-rendering: auto;
            }

            &#mystic-maya {
                background-image: url('/assets/imgs/games/mystic-knight-maya/mkm-background.png');
                background-position: center center;
                background-size: cover;
                background-repeat: no-repeat;
                image-rendering: auto;
            }

            &#wheel-of-fates {
                transition: background-position 0.50s cubic-bezier(0.68, -0.55, 0.27, 1.55), background-size 0.25s ease-in-out;
                background-image:
                    url('/assets/imgs/games/wheel-of-fates/title_logo.png'),
                    url('/assets/imgs/games/wheel-of-fates/title_backerontitle.png'),
                    url('/assets/imgs/games/wheel-of-fates/rouletta_win.png'),
                    url('/assets/imgs/games/wheel-of-fates/land_firststage.png');
                background-position:
                    center center,
                    center center,
                    center 200px,
                    center center;
                background-color: #85c8c9;
                background-size: contain, cover, contain, contain;
                /*background-size: 75%, cover, contain, contain;*/
                background-repeat: no-repeat;
                image-rendering: auto, auto, auto, pixelated, auto;

                &:hover {
                    background-image:
                        url('/assets/imgs/games/wheel-of-fates/title_logo.png'),
                        url('/assets/imgs/games/wheel-of-fates/title_backerontitle.png'),
                        url('/assets/imgs/games/wheel-of-fates/rouletta_win.png'),
                        url('/assets/imgs/games/wheel-of-fates/land_firststage.png');
                    background-position:
                        top center,
                        center -90px,
                        center 50px,
                        center center;
                    background-size: 125px, cover, contain, contain;
                }
            }

            &#foxy-feast {
                background-image:
                    url('/assets/imgs/games/foxy-feast/foxy-feast-title.png'),
                    url('/assets/imgs/games/foxy-feast/foxy_maw.gif'),
                    url('/assets/imgs/games/foxy-feast/background-clouds.png'),
                    url('/assets/imgs/games/foxy-feast/background-sky.png');
                background-position: top, top, bottom, center center;
                background-size: contain, cover, cover, cover;
                background-repeat: no-repeat;
                image-rendering: pixelated;

                &:hover {
                    background-image:
                        url('/assets/imgs/games/foxy-feast/foxy-feast-title.png'),
                        url('/assets/imgs/games/foxy-feast/foxy_stare.png'),
                        url('/assets/imgs/games/foxy-feast/background-clouds.png'),
                        url('/assets/imgs/games/foxy-feast/background-sky.png');

                    &:active {
                        background-image:
                            url('/assets/imgs/games/foxy-feast/foxy-feast-title.png'),
                            url('/assets/imgs/games/foxy-feast/foxy_blep.png'),
                            url('/assets/imgs/games/foxy-feast/background-clouds.png'),
                            url('/assets/imgs/games/foxy-feast/background-sky.png');
                    }
                }
            }

            &#monster-nomster {
                background-image:
                    url('/assets/imgs/games/monster-nomster/nomster_logo.png'),
                    url('/assets/imgs/games/monster-nomster/nomster_closed_maw.png'),
                    url('/assets/imgs/games/monster-nomster/nomster_background.jpg');
                background-position: top center, right 85%, center center;
                background-size: contain, 55%, cover;
                background-repeat: no-repeat;
                image-rendering: auto, auto;

                &:hover {
                    background-image:
                        url('/assets/imgs/games/monster-nomster/nomster_logo.png'),
                        url('/assets/imgs/games/monster-nomster/nomster_open_maw.png'),
                        url('/assets/imgs/games/monster-nomster/nomster_background.jpg');

                    &:active {
                        background-image:
                            url('/assets/imgs/games/monster-nomster/nomster_logo.png'),games/
                            url('/assets/imgs/games/monster-nomster/nomster_open_wide_maw.png'),
                            url('/assets/imgs/games/monster-nomster/nomster_background.jpg');
                    }
                }
            }

            &#r18\+youki {
                background-image:
                    url('/assets/imgs/games/r18+youki/youki_logo.png'),
                    url('/assets/imgs/games/r18+youki/youki_bg.png');
                background-position: center center;
                background-size: contain, cover;
                background-repeat: no-repeat;
                image-rendering: auto, auto;
            }

            &#village-in-trees {
                background-image:
                    url('/assets/imgs/games/village-in-trees/alchemy_shop.png');
                background-position: center center;
                background-size: cover;
                background-repeat: no-repeat;
                image-rendering: auto;
            }

            &#packed-rat {
                background-image:
                    url('/assets/imgs/games/packed-rat/rat_title.png'),
                    url('/assets/imgs/games/packed-rat/rat_desert_bg.png'),
                    url('/assets/imgs/games/packed-rat/rat_desert_sky.png');
                background-position: center center, bottom center, center center;
                background-size: contain, contain, cover;
                background-repeat: no-repeat;
                image-rendering: pixelated, pixelated, pixelated;
            }

            &#advoreture {
                background-image: url('/assets/imgs/games/advoreture/advoreture_title.png');
                background-position: center center;
                background-size: contain;
                background-color: black;
                background-repeat: no-repeat;
                image-rendering: auto;
            }

            &#helixftw {
                background-image: url('/assets/imgs/games/helixftw/helix_ftw_background.png');
                background-position: center center;
                background-size: cover;
                background-repeat: no-repeat;
                image-rendering: auto;
            }

            &#junk-of-knight {
                background-image:
                    url('/assets/imgs/games/junk-of-knight/junk_title.png'),
                    url('/assets/imgs/games/junk-of-knight/junk_knight.gif'),
                    url('/assets/imgs/games/junk-of-knight/junk_background.png');
                background-position: top center, bottom right, center center;
                background-size: contain, 75px, cover;
                background-repeat: no-repeat;
                image-rendering: pixelated;
            }

            &#fiend {
                background-color: #2e2933;
                background-image: url('/assets/imgs/games/fiend/fiend_idle.gif');
                background-position: center bottom;
                background-size: contain;
                background-repeat: no-repeat;
                image-rendering: pixelated;

                &:hover {
                    background-image: url('/assets/imgs/games/fiend/fiend_nervous.gif');
                }
            }

            &#untitled-vore-game {
                background-image: url('/assets/imgs/games/untitled-vore-game/hungry_critters.png');
                background-position: center;
                background-size: cover;
                background-repeat: no-repeat;
                image-rendering: auto;
            }

            &#tower-escape {
                background-image:
                    url('/assets/imgs/games/tower-escape/tower_title.png'),
                    url('/assets/imgs/games/tower-escape/tower_background.png');
                background-position: center top, center center;
                background-size: contain, cover;
                background-repeat: no-repeat;
                image-rendering: pixelated;
            }

            &#vscroller {
                background-color: #595757;
                background-image: none;
            }

            &#helixftr {
                background-color: #3ea4e9;
                background-image: none;
            }

            &#barbftr {
                background-color: #cccccc;
                background-image: none;
            }

            &#fuckfightfeed {
                background-color: #b5a886;
                box-shadow: inset 0 0 80px #7F765F;
                background-image: none;
            }

            &#predatory-pursuit {
                background-color: #010101;
                background-image: url('/assets/imgs/games/predatory-pursuit/pursuit_icon.png');
                background-position: bottom center;
                background-size: contain;
                background-repeat: no-repeat;
                image-rendering: auto;
            }

            &#chocola-tower {
                background-color: #6e4c3b;
                box-shadow: inset 0 0 60px #785848;
                background-image: none;
            }
        }
    }
}

@keyframes retale-i-parallax {

    0% {
        background-position: center top, center center, right 0;
    }

    100% {
        background-position: center top, center center, right 300%;
    }
}

@keyframes retale-ii-parallax {
    0% {
        background-position: center top, right 0;
    }

    100% {
        background-position: center top, right 300%;
    }
}

@keyframes retale-iii-parallax {
    0% {
        background-position: center center, top center;
    }

    50% {
        background-position: center center, bottom center;
    }

    100% {
        background-position: center center, top center;
    }
}

@keyframes echidna-intro {
    from {
        background-position: 600% top, center center;
    }

    to {
        background-position: top right, center center;
    }
}