/*
Theme Name: Bootstrap Fitness Child
Description: Bootstrap Fitness Child Theme
Author: Justin Leonard
Template: bootstrap-fitness
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: bootstrap-fitness-child
*/
 @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Homemade+Apple&family=Press+Start+2P&family=Special+Elite&display=swap');



:root {
    --color-brand-primary: #d0c6c7;
    --color-brand-red: #D22630;
    --color-brand-gray:#C8C9C7;
    --color-ui-primary:#901dd8;
    --color-ui-primary-dk:#003B53;
    --color-ui-primary-lt:#99C1CC;
    --color-ui-primary-ltr:#EEF3F4;
    --color-ui-secondary:#4A4F54;
    --color-ui-secondary-dk:#22272B;
    --color-ui-secondary-lt:#707070;
    --color-ui-secondary-ltr:#F8F8F8;
    --color-ui-tertiary:#9D4B70;
    --color-ui-tertiary-dk:#6C1D45;
    --color-ui-tertiary-lt:#C3A4B4;
    --color-ui-tertiary-ltr:#EFE7EB;
    --color-ui-success:#228665;
    --color-ui-success-dk:#006448;
    --color-ui-success-lt:#7DE3B9;
    --color-ui-success-ltr:#ECF7F3;
    --color-ui-danger:#D22630;
    --color-ui-danger-dk:#800008;
    --color-ui-danger-lt:#FF605A;
    --color-ui-danger-ltr:#FFEBEE;
    --color-ui-warning:#FF9E18;
    --color-ui-warning-dk:#B95E04;
    --color-ui-warning-lt:#FFCF51;
    --color-ui-warning-ltr:#FFF5E7;
    --color-ui-black:#001E26;
    --color-ui-black-dk:#000000;
    --color-ui-black-lt:#D0D0D0;
    --color-ui-black-ltr:#EFEFEF;
    --color-ui-white:#ffffff;
    --color-ui-gray:#C8C9C7;
    --color-ui-gray-dk:#979896;
    --color-ui-gray-lt:#F4F5F4;
    --color-ui-gray-ltr:#FBFCFA;
    --color-ui-focus: #378EF0;
    --color-text-black: #001E26;
    --color-text-secondary: #22272B;
    --color-text-gray: #C8C9C7;
    --color-text-white: #ffffff;
    --color-text-link-primary: var(--color-ui-primary);
    --color-text-link-primary-hover: var(--color-ui-primary-dk);
    --color-text-link-secondary: var(--color-text-black);
   ;
    --color-border-default: var(--color-ui-gray);
    --color-border-light: var(--color-ui-black-ltr);
    --spacing-none: 0rem;
    --spacing-xs: 0.125rem;
    --spacing-xs2: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-sm2: 0.75rem;
    --spacing-md: 1rem;
    --spacing-md2: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-lg2: 2.5rem;
    --spacing-lg3: 3rem;
    --layout-xs: 0.125rem;
    --layout-xs2: 0.25rem;
    --layout-sm: 0.5rem;
    --layout-sm2: 0.75rem;
    --layout-md: 1rem;
    --layout-md2: 1.5rem;
    --layout-lg: 2rem;
    --layout-lg2: 2.5rem;
    --layout-lg3: 3rem;
    --layout-xl: 4rem;
    --layout-xl2: 6rem;
    --layout-xl3: 10rem;
    --border-radius-sm: 0.125rem;
    --border-radius-md: 0.1875rem;
    --border-radius-lg: 0.25rem;
    --border-thinner: 1px;
    --border-thin: 4px;
    --border-thick: 6px;
    --border-standard: var(--border-thinner) solid var(--color-border-light);
    --border-strong: var(--border-thinner) solid var(--color-border-default);
    --text-caption: 0.75rem;
    --text-label: 0.875rem;
    --text-body: 1rem;
    --text-title: 1.25rem;
    --text-heading1: 1.5rem;
    --text-heading2: 2rem;
    --text-heading3: 2.75rem;
    --tw-light: 300;
    --tw-regular: 400;
    --tw-medium: 500;
    --tw-bold: 700;
    --lh-sm: 1;
    --lh-md: 1.16;
    --lh-lg: 1.25;
    --shadow-dark: var(--color-ui-gray-dk);
    --shadow-light: var(--color-ui-gray);
    --bs-d2: 1px 1px 2px var(--shadow-light);

    --heading-font: 'Special Elite', sans-serif;
    --body-font: 'Rajdhani', sans-serif;
    --ds-font-body: 'Mulish', sans-serif;
}

.text-caption{ 
    font-size: .75rem; 
}
.text-label{ 
    font-size: 0.875rem;}
.text-body{ 
    font-size: 1rem;
}
.text-title{ 
    font-size: 1.25rem;
}
.text-heading1{ 
    font-size: 1.5rem;
}
.text-heading2{ 
    font-size: 2rem;
}
.text-heading3{ 
    font-size: 2.75rem;
}
/* .shape-wrap {
    width: 50%;
    height: 100%;
    position: absolute;
    left: -40px;
    bottom: 0;
    transform: skew(20deg);
    z-index: -1;
}
.shape.shape-1 {
    width: 220px;
    height: 60%;
    left: 30%;
    z-index: 1;
    opacity: .8;
}
.shape.shape-2 {
    height: 90%;
    left: 20%;
    opacity: .7;
}
.shape.shape-3 {
    height: 70%;
    z-index: 2;
    opacity: .4;
}
.shape.shape-4 {
    height: 40%;
    left: -10%;
    opacity: .6;
}
.shape {
    background: #f90cff;
    background-image: linear-gradient(to right bottom,#f90cff,#e027ff,#c534ff,#a93eff,#8a44ff,#6560ff,#3c73ff,#0081ff,#009cff,#00b3ff,#00c6f5,#0cd7e8);
    width: 200px;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 2px;
}
*/
body{
	/* position: relative;
    height: 100%!important;
    width: 100%; */  
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: var(--body-font);
    font-size: var(--text-body);
    color: var(--color-text-white) !important;
    background-color: #000;
    background: url("/wp-content/themes/bootstrap-fitness-child/images/art/blueprint_grid_bg-001.png") repeat 24px;

}
body::before {
    content: "";
    background: radial-gradient(circle at top right,transparent 10%,#020211 10%, #020211 20%, transparent 21%), radial-gradient(circle at left bottom,transparent 10%,#020211 10%,#020211 20%, transparent 21%),radial-gradient(circle at top left,transparent 10%,#020211 10%,#020211 20%, transparent 21%), radial-gradient(circle at right bottom,transparent 10%,#020211 10%,#020211 20%, transparent 21%), radial-gradient(circle at center,#020211 30%, transparent 31%);
    background-size: 1em 1em;
    background-color: #ffffff;
    opacity: 0.35
}
p {
    color: var(--color-text-black);
}
/* Navigation */
.main-navigation ul li a {
    font-size: var(--text-body);
}
.detail-content ul li {
    list-style: none;
}
.gutena-tabs-block>.gutena-tabs-tab {
    margin: -36px 0 0 0;
}
.game-display {
    position: relative;
    perspective: 1000px; /* Adjust the value as needed */
}
.cabinet-image {
    width: 100%; /* Adjust as needed */
}
.game-video {
    position: absolute;
    top: -2.75%;
    left: -18%;
    transform: rotate3d(1, -1, 0.275, 39deg);
    transform-style: preserve-3d;
    scale: .202;
    cursor: pointer;
}

svg:not(:host).svg-inline--fa, svg:not(:root).svg-inline--fa {
    overflow: visible;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
.svg-inline--fa {
    display: var(--fa-display,inline-block);
    height: 1em;
    overflow: visible;
    vertical-align: -0.125em;
}
.meta-icon {
    height: 3.75rem;
}
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #ffffff;
    color: #000000;
    padding: 10px;
    z-index: 1000;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}
  /* Headings */
  h1, h2 {
    color: var(--color-text-black);
    font-weight: var(--tw-bold);
}
.site-title a {
    font-size: 32px;
}
a {
    color: #cfc328;
}
/*
.wp-block-media-text__content.is-layout-flow.wp-block-media-text-is-layout-flow a {
    color: #ffffff;
    display: inline-block;
    background: #2a55b4;
    font-size: 1.25rem;
    font-weight: 900;
    padding: 0.25rem 1rem;
}
.wp-block-media-text__content.is-layout-flow.wp-block-media-text-is-layout-flow span {
    background: white;
    padding: 1px 1px 1px 8px;
    display: inline-block;
    color: black;
}
*/
.wp-block-media-text__content.is-layout-flow.wp-block-media-text-is-layout-flow p {
    margin-bottom: 0;
}
.inside-page {
    padding: 0;
}
.game-header .game-meta {
    font-size: 32px;
    color: #00ffde;
    text-transform: uppercase;
    font-weight: 600;
    font-family: var(--heading-font);
    letter-spacing: 2px;
    rotate: -4deg;
    transform-origin: 0 0;
}
.game-card .game-meta.card-title {
    font-size: 1.5rem;
    color: #000;
    text-transform: none;
    font-weight: 600;
    font-family: var(--heading-font);
    letter-spacing: 0;
    rotate: -4deg;
    transform-origin: 0 0;
    margin-left: -.5rem;
}
.game-header .game-title {
    margin-bottom: 0;
}
.game-card .game-title {
    margin-bottom: 0;
    font-size: 3rem;
    font-weight: 700;
    margin-top: -0.875rem;
    line-height: 1;
}
article .game-card .game-title a {
    text-decoration: none;
    color: rgb(49 90 183);
}
.game-header .game-title h1 {
    font-size: 96px;
    line-height: 2.5rem;
    margin-top: 0.5rem;
    margin-bottom: var(--layout-sm);
    color: white;
    font-weight: 800;
}
.game-card .game-title h1 {
    font-size: 2rem;
    line-height: 2.5rem;
    margin-top: 0.5rem;
    margin-bottom: var(--layout-sm);
    color: white;
    font-weight: 800;
}
.game-header .game-title p {
    margin-bottom: 0;
}
.game-card .game-title p {
    margin-bottom: 0;
}
.game-card .game-info {
    font-family: var(--heading-font);
    font-weight: 400;
    font-style: normal;
    display: flex;
    color: #000;
    gap: var(--layout-md2); /* Optional: Adjust the spacing between entries */
    margin-top: -.5rem;
}

.game-card .game-info .game-info-item {
    display: inline-block; /* Each item (e.g., Genre, Control) is inline */
    text-align: left; /* Align text to the left */
}

/* Stacking labels above data */
.game-card .game-info .game-info-label {
    font-weight: 400;
    display: block;
    margin-bottom: -.5rem;
    rotate: -4deg;
    transform-origin: 0 0;
    font-size: var(--text-label);
}

.game-card .game-info .game-info-data {
    display: block;
    font-size: var(--text-title);
    margin-left: .75rem;
    margin-top: -.875rem;
    line-height: 2;
}
/* .game-header .game-meta span {
    border-right: var(--border-strong);
} */
.game-header .game-meta span {
    display: inline-block;
    padding-right: var(--spacing-xs);
}
.game-card .game-meta span {
    display: inline-block;
    padding-right: var(--spacing-xs);
}
.game-header .game-meta span::after {
    content: "|";
    margin-left: var(--layout-sm);
}
.game-card .game-meta span::after {
    content: "|";
    margin-left: var(--layout-sm);
}
.game-header .game-meta span:last-of-type:after {
    content: "";
}
.game-card .game-meta span:last-of-type:after {
    content: "";
}
.game-card .game-meta .game-price-label {
    display: block;
    padding-right: var(--spacing-xs);
    font-size: var(--text-heading1);
    line-height: 0;
    font-family: var(--heading-font);
    font-weight: var(--tw-regular);
    font-style: normal;
}
.game-card .game-meta .game-price {
    display: inline-block;
    padding-right: var(--spacing-xs);
    font-size: var(--text-heading1);
    line-height: 2;
    font-family: var(--heading-font);
    font-weight: var(--tw-regular);
    font-style: normal;
}

/* Container for the price boxes */
.price-container {
    display: flex;
    justify-content: space-between; /* Space between the boxes */
    text-align: center;
    margin: 20px 0;
}

/* Individual price boxes */
.price-box {
    flex: 1; /* Each box takes equal space */
    font-family: var(--heading-font);
    padding: 15px;
    font-weight: bold;
}

/* Style for the price labels */
.price-label {
    display: block;
    font-size: 1em;
    /* background-color: black; */
    color: white;
    padding: 12px 0;
    margin-bottom: 4px;
}

/* Style for the price values */
.price-value {
    font-size: 1.75em;
    font-weight: bold;
    display: block;
    padding: 0 0;
    margin-top: -4px;
}

/* Custom styles for different price boxes */
.lower-price {
    background-color: transparent; /* White background */
}
.lower-price .price-label {
    /* Add background image */
    background-image: url('./images/art/banner-4.svg');
    background-repeat: no-repeat; /* Ensure the image doesn't repeat */
    background-size: cover; /* Cover the entire label with the background */
    background-position: center; /* Center the background image */
    rotate: -2deg;
}

.avg-price {
    background-color: transparent;
    color: white; /* White text for the price */
}

.avg-price .price-label{
    /* Add background image */
    background-image: url('./images/art/banner-1.svg');
    background-repeat: no-repeat; /* Ensure the image doesn't repeat */
    background-size: cover; /* Cover the entire label with the background */
    background-position: center; /* Center the background image */
}

.higher-price {
    background-color: transparent; /* Light gray background */
}
.higher-price .price-label {
    /* Add background image */
    background-image: url('./images/art/banner-6.svg');
    background-repeat: no-repeat; /* Ensure the image doesn't repeat */
    background-size: cover; /* Cover the entire label with the background */
    background-position: center; /* Center the background image */
    rotate: 2deg;
}
.price-box {
    color: black;
    padding: 0;
    text-align: center;
}

/* Optional: Add hover effect for interactivity */
.price-box:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow on hover */
}
.content-top .brand-logo {
    margin-right: var(--layout-md);
    display: none;
}

.content-top .brand-logo img {
    height: 88px;
    margin-top: -.5rem;
}

.top-content {
    background-color: transparent;
}

.top-content .container {
    background-color: transparent;
    padding: var(--spacing-lg3) var(--spacing-md2) 0px;
    box-shadow: none;
}
/* Main Container */
.content-main .container {
}
.container {
    background-color: transparent;
    padding: 0px 24px 24px;
    box-shadow: none;
    border-radius: 10px;
}
.top-header {
    display: none;
}
.main-header .container {
    padding-bottom: 0;
}
.gutena-tabs-block>.gutena-tabs-content>.gutena-tab-block {
background: transparent;
}
.gutena-tabs-content>.gutena-tab-block p {
    color:var(--color-text-black);
}
.wp-block-media-text__content.is-layout-flow.wp-block-media-text-is-layout-flow p {
    color: #5ccdc4;
}
#modelContainer canvas {
    display: block;
    width: 100%;
    height: 100%;
}
.dimension iframe {
    border: 24px solid yellow;
}
.dimension {
    position: relative;
    margin-top: -160px;
}
.overlayed {
    position: absolute;
height: 400px;
}
.machine-hero {
    width: 320px ;
}
.stat-icon img {
    width: 24px;
}
.container.content-main {
    padding-top: 0;
}
.detail-page .content-main .nav-tabs {
    margin-top: -16px;
}   
.detail-page .content-main .inner-tabs {
    border-top: var(--border-strong);
    border-bottom: var(--border-strong);
}
.detail-page .content-main .nav-tabs .nav-link {
    margin-bottom: -1px;
    margin-right: var(--layout-md);
    background: 0 0;
    border: none;
    border-radius: 0.25rem;
}
.detail-page .content-main .main-tabs {
    margin-top: -40px;
}



        /* Navbar Styles */
        .navbar {
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        /* Table Styles */
        .table {
            border-collapse: separate;
            border-spacing: 0 10px;
        }

        .table td {
            padding: 10px;
            background-color: #f1f1f1;
            border-radius: 5px;
        }

        /* User Gallery Styles */
        .img-fluid {
            border-radius: 10px;
            max-width: 100%;
            height: auto;
        }

        .nav.inner-tabs {
            position: sticky;
            top: 0; 
            z-index: 1000; 
            background-color: white;
        }
        
        .nav-link {
            display: block;
            padding: 5px 10px; /* Adjust as needed for spacing */
            text-decoration: none; /* Removes underline */
            color: black; /* Change as per your color scheme */
        }
        
        .nav-link.active {
            background-color: #eee; /* Gives a subtle background to the active link */
            font-weight: bold; /* Makes the active link bold */
        }


        .testimonial-item {
            clip-path: polygon(90% 0, 100% 20%, 100% 100%, 0% 100%, 0 66%, 0 0);
            margin: 0px 0px -10px 0px;
            background: linear-gradient(90deg,rgba(105,85,180,.1) 0%,rgba(105,85,180,.5) 50%,rgba(105,85,180,.1) 100%);
            clip-path: polygon(90% 0,100% 20%,100% 100%,0% 100%,0 66%,0 0);
            padding: 16px;
            position: relative;
        }
        .testimonial-item {
            margin-bottom: 0px;
            padding: 22px 0 0 0;
        }
        .testimonial-item:after {
            /* background-image: linear-gradient(rgba(0,172,255,0.7) .1em, transparent .1em), linear-gradient(90deg, rgba(0,106,255,0.7) .1em, transparent .1em);
              background-size: 1em 1em; */
                content: "";
                position: absolute;
                width: 70%;
                height: 75%;
                left: 12%;
                transform: perspective(6em) rotateX(70deg);
                bottom: -1rem;
                z-index: -5;
                -webkit-transition: all .3s cubic-bezier(.165,.84,.44,1);
                transition: all .3s cubic-bezier(.165,.84,.44,1);
            }
        .gutena-tabs-block>.gutena-tabs-tab>.gutena-tab-title {
            background: transparent;
            color: white;
        }
        .skip-link {
            display: none;
        }
        .shape-wrap {
            opacity: .25;
        }
        
        .game-title {
            position: relative;
        }
        .gutena-tabs-content>.gutena-tab-block p {
            color: var(--color-text-white);
        }
        
        .gutena-tabs-block>.gutena-tabs-tab>.gutena-tab-title.active {
            color: var(--color-text-black);
        }
        .gutena-tab-title.active:before {
            background-color: rgb(226 232 240/1);
            content: "";
            transform: skewX(-15deg);
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
        }
        .eighties {
          min-height: 1em;
          position: relative;
        }
        .eighties:before, .eighties:after {
            content: attr(data-text);
            display: block;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            height: -0.5em;
            font-size: 1em;
            text-align: left;
            text-shadow: 5px 0 3px rgba(251, 0, 231, 0.8), 0 5px 3px rgba(0, 233, 235, 0.8), -5px 0 3px rgba(0, 242, 14, 0.8), 0 -5px 3px rgba(244, 45, 0, 0.8), 5px 0 3px rgba(59, 0, 226, 0.8);
            color: rgba(255, 255, 255, 0.9);
            overflow: hidden;
            transform: translateY(-100%);
        }
        .eighties:before {
          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .eighties:after {
            margin-top: 0em;
            padding-right: 0;
            height: 0.72em;
            line-height: 0;
        }
        .mask {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-attachment: fixed;
        }
       /* ul.fireflies { 
            list-style: none; 
        } 
          
        ul.fireflies li { 
            border-radius: 50%; 
            background-color: rgb(255, 255, 73); 
            background-image: radial-gradient(rgb(249, 206, 36) 5%, 
                                              rgb(254, 179, 4) 25%, 
                                              rgb(252, 191, 7) 60%); 
            box-shadow: 0 0 5px 2px rgb(250, 193, 93),  
                        0 0 20px 10px rgb(255, 228, 140), 
                        0 0 40px 15px rgb(255, 219, 41); 
            height: 5px; 
            width: 5px; 
            top: -20px; 
            position: absolute; 
            animation: leftright 24s infinite cubic-bezier(0.39, 0, 0.63, 1), 
                updown 8s infinite 1.25s cubic-bezier(0.39, 0, 0.63, 1), 
                blinking 3s infinite; 
        } 
          
        /* first 10 */
      /*  ul.fireflies li:nth-of-type(1) { 
            animation-delay: 1s; 
            animation-duration: 65s, 81s, 0.01s; 
            animation-fill-mode: backwards, backwards; 
        } 
          
        ul.fireflies li:nth-of-type(2) { 
            animation-delay: 0.5s; 
            animation-duration: 80s, 75s, 0.01s; 
        } 
          
        ul.fireflies li:nth-of-type(3) { 
            animation-delay: 1.5s; 
            animation-duration: 70s, 60s, 0.01s; 
            animation-fill-mode: backwards, backwards; 
        } 
          
        ul.fireflies li:nth-of-type(4) { 
            animation-delay: 2.5s; 
            animation-duration: 90s, 80s, 0.01s; 
        } 
          
        ul.fireflies li:nth-of-type(5) { 
            animation-delay: 0.3s; 
            animation-duration: 55s, 75s, 0.01s; 
        } 
          
        ul.fireflies li:nth-of-type(6) { 
            animation-delay: 2.2s; 
            animation-duration: 79s, 63s, 0.01s; 
            animation-fill-mode: backwards, backwards; 
        } 
          
        ul.fireflies li:nth-of-type(7) { 
            animation-delay: 0.9s; 
            animation-duration: 70s, 80s, 0.01s; 
        } 
          
        ul.fireflies li:nth-of-type(8) { 
            animation-delay: 1.6s; 
            animation-duration: 50s, 40s, 0.01s; 
            animation-fill-mode: backwards, backwards; 
        } 
          
        ul.fireflies li:nth-of-type(9) { 
            animation-delay: 1.8s; 
            animation-duration: 77s, 88s, 0.01s; 
        } 
          
        ul.fireflies li:nth-of-type(10) { 
            animation-delay: 3s; 
            animation-duration: 87s, 73s, 0.01s; 
            animation-fill-mode: backwards, backwards; 
        } 
          
        /* last 10 */
      /*  ul.fireflies li:nth-of-type(11) { 
            animation-delay: 1s; 
            animation-duration: 60s, 78s, 0.01s; 
            animation-fill-mode: backwards, backwards; 
        } 
          
        ul.fireflies li:nth-of-type(12) { 
            animation-delay: 0.5s; 
            animation-duration: 85s, 80s, 0.01s; 
        } 
          
        ul.fireflies li:nth-of-type(13) { 
            animation-delay: 1.5s; 
            animation-duration: 75s, 66s, 0.01s; 
            animation-fill-mode: backwards, backwards; 
        } 
          
        ul.fireflies li:nth-of-type(14) { 
            animation-delay: 2.5s; 
            animation-duration: 87s, 75s, 0.01s; 
        } 
          
        ul.fireflies li:nth-of-type(15) { 
            animation-delay: 0.3s; 
            animation-duration: 69s, 85s, 0.01s; 
        } 
          
        ul.fireflies li:nth-of-type(16) { 
            animation-delay: 2.2s; 
            animation-duration: 80s, 77s, 0.01s; 
            animation-fill-mode: backwards, backwards; 
        } 
          
        ul.fireflies li:nth-of-type(17) { 
            animation-delay: 0.9s; 
            animation-duration: 65s, 88s, 0.01s; 
        } 
          
        ul.fireflies li:nth-of-type(18) { 
            animation-delay: 1.6s; 
            animation-duration: 59s, 63s, 0.01s; 
            animation-fill-mode: backwards, backwards; 
        } 
          
        ul.fireflies li:nth-of-type(19) { 
            animation-delay: 1.8s; 
            animation-duration: 88s, 79s, 0.01s; 
        } 
          
        ul.fireflies li:nth-of-type(20) { 
            animation-delay: 3s; 
            animation-duration: 59s, 75s, 0.01s; 
            animation-fill-mode: backwards, backwards; 
        } 
          
        /* animations */
          
        /* It will create the left right movement */
        @keyframes leftright { 
          
            0%, 
            100% { 
                left: 0%; 
            } 
          
            16.666% { 
                left: 10%; 
            } 
          
            33.333% { 
                left: 0%; 
            } 
          
            50% { 
                left: 18%; 
            } 
          
            66.666% { 
                left: 10%; 
            } 
          
            83.333% { 
                left: 8%; 
            } 
        } 
          
        /* It will create the up down movement */
        @keyframes updown { 
          
            0%, 
            100% { 
                top: 0%; 
            } 
          
            25% { 
                top: 49%; 
            } 
          
            50% { 
                top: 95%; 
            } 
          
            75% { 
                top: 15%; 
            } 
        } 
          
        /* It will create the blinking effect 
        @keyframes blinking { 
          
            0%, 
            100% { 
                box-shadow: 0 0 5px 2px rgba(219,144,245,0.22),  
                            0 0 10px 5px rgba(235,185,249,0.26), 
                            0 0 30px 10px rgba(227,157,251,0.33); 
                height: 0; 
                width: 0; 
            } 
          
            50% { 
                box-shadow: 0 0 5px 2px rgb(128,149,243),  
                            0 0 20px 10px rgb(126,182,243), 
                            0 0 40px 15px rgb(133,148,238); 
            } 
          
            75% { 
                box-shadow: 0 0 0px 0px rgb(25,245,216),  
                            0 0 0px 0px rgb(249,244,246), 
                            0 0 0px 0px rgb(241,234,235); 
            } 
        }
        */
        .whte-shape {
            background-color: #fff;
            width: 66.666667%;
            height: 100%;
            position: absolute;
            left: -5px;
            bottom: 10px;
            border-radius: 2px;
            overflow: hidden;
            transform: skewX(-15deg);
            z-index: -1;
        }
        .name-bg-shape {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 0.25rem;
            position: absolute;
            left: 7px;
            bottom: 0;
            z-index: -1;
        }
        .name-bg-shape span:nth-child(1) {
            background-image: linear-gradient(to right bottom,#f90cff,#e027ff,#c534ff,#a93eff,#8a44ff,#6560ff,#3c73ff,#0081ff,#009cff,#00b3ff,#00c6f5,#0cd7e8);
            border-radius: 2px;
            width: 75%;
            height: 100%;
            transform: skewX(-15deg);
            position: relative;
        }
        picture {
            display: block;
            position: relative;
        }
        .machine-hero {
            filter: contrast(100%) brightness(90%) drop-shadow(4px 4px 15px rgb(11,11,11));
        }
        .machine-hero-2 {
        position: absolute;
            right: 120px;
            top: -27px;
            filter: brightness(0.32) hue-rotate(90deg);
            z-index: -1;
            scale: .75;
            display: none;
            
        }
        .machine-hero-3 {
            position: absolute;
            right: 208px;
            top: -32px;
            filter: brightness(0.20) hue-rotate(90deg);
            z-index: -2;
            scale: .65;
            display: none;
        }
        picture .shape-wrap {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            bottom: 0;
            transform: skew(-5deg);
            z-index: -1;
        }
        picture .shape.shape-1 {
            clip-path: polygon(0% 0%,90% 0,100% 10%,100% 100%,0 100%);
            width: 200px;
            height: 70%;
            left: 40%;
            z-index: 1;
            opacity: .8;
        }
        picture .shape.shape-2 {
            clip-path: polygon(0% 0%,90% 0,100% 10%,100% 100%,0 100%);
            height: 90%;
            left: 30%;
        }
        
        picture .shape.shape-3 {
            clip-path: polygon(0% 0%,90% 0,100% 10%,100% 100%,0 100%);
            left: 16%;
        }
        picture .shape.shape-4 {
            clip-path: polygon(0% 0%,90% 0,100% 10%,100% 100%,0 100%);
        
            left: 10%;
        }
        
        .letter {
            background: #fafafa;
            box-shadow: 0 0 10px rgba(0,0,0,0.3), 0 0 300px 25px rgba(222,198,122,0.7) inset;
            width: 100%;
            height: 100%;
            margin: 1.5% 50% auto;
            left: -225px;
            padding: 24px;
            position: relative;
        }
        
        .letter:before, .letter:after {
            content: "";
            background: #fafafa;
            box-shadow: 0 0 8px rgba(0,0,0,0.2), inset 0 0 300px rgba(222,198,122,0.7);
            height: 100%;
            width: 100%;
            position: absolute;
            z-index: -2;
            transition: .5s;
        }
        
        .letter:before {
            left: -5px;
            top: 2px;  
            transform: rotate(-1.5deg);
        }
        
        .letter:after {
            right: -3px;
            top: 0px;
            transform: rotate(2.4deg);
        }
        
        .letter:hover:before {
        transform: rotate(0deg);
        border: solid rgba(111,99,61,0.4);
        border-width: 0px 0px 0px 1px;
        left: -6px;
        top: -6px; 
        }
        
        .letter:hover:after {
        transform: rotate(0deg);
        border: solid rgba(111,99,61,0.4);
        border-width: 0px 0px 0px 1px;
        right: 3px;
        top: -3px;
        }
        p.meta-title {
            position: relative;
            margin-bottom: .5rem;
        }
        .wp-block-media-text__content a {
            font-size: 2.5rem;
            font-weight: bold;
            text-decoration: none;
            text-align: right;
            float: right;
        }
        
        p.meta-title span {
            color: #FFFFFF;
    letter-spacing: 2px;
            font-family: var(--heading-font);
            font-size: 24px;
            letter-spacing: 1px;
            position: absolute;
            top: 12px;
            left: 8px;
            background: none;
            z-index: -2;
            transform-origin: 0 0;
            transform: rotate(350deg);
            line-height: 20px;
            text-shadow: -2px -2px 0px black;
        }
        .meta-genre p.meta-title {
            position: relative;
        }
        .meta-genre p.meta-title span {
            top: 1px;
            left: -4px;
            z-index: 0;
            transform: rotate(350deg);
        }
        .meta-genre > .wp-block-media-text__content a {
            margin-left: 0;
                       font-size: 2.5rem;
                }
        .meta-genre.wp-block-media-text .wp-block-media-text__content {
            direction: ltr;
            grid-column: 2;
            grid-row: 1;
            padding: 0;
            margin-left: -16px;
        }
        .wp-block-media-text .wp-block-media-text__content {
            direction: ltr;
            grid-column: 2;
            grid-row: 1;
            padding: 0px 20% 0 0;
            word-break: break-word;
        }
        .wp-block-media-text__content a {
            font-size: 3rem;
            font-weight: bold;
            text-decoration: none;
            float: none;
            color: #ebe810;
            text-shadow: 2px 0 0 #f913e6, 0 2px 0 #f913e6, -4px 0 0 black, 0 -3px 0 black;
            margin-left: -12px;
        }

        .wp-block-media-text__media img, .wp-block-media-text__media video {
            height: auto;
            max-width: unset;
            vertical-align: middle;
            width: 150%;
        }
        .my-custom-columns {
            display: block; /* Overrides flex display */
            -moz-column-count: 2;
            -webkit-column-count: 2;
            column-count: 2;
            -moz-column-gap: 30px;
            -webkit-column-gap: 30px;
            column-gap: 30px;
        }
        .my-custom-columns span.game-screenshot-container {
            float: left; /* or 'left' depending on your design */
            margin: 16px 24px 12px 0; /* Adds some space around the image */
            width: 50%; /* Adjust the width as necessary */
            border: 4px solid black;
            border-radius: 5%;
            rotate: -4deg;
            box-shadow: 5px 0 3px rgba(251, 0, 231, 0.8), 0 5px 3px rgba(0, 233, 235, 0.8), 5px 0 3px rgba(59, 0, 226, 0.8);
        }
        .screenshot-caption {
            background: rgb(244,245,249);
            color: black;
            font-family: 'Arial';
            letter-spacing: 2px
        }
        .my-custom-columns p:first-of-type::first-letter {
            font-size: 3em; /* Example: Makes the first letter twice the size of the rest of the text */
            float: left; /* Makes the letter float to the left, which can create a drop cap effect */
            line-height: 1; /* Adjusts line height to ensure proper alignment */
            margin-right: 0.1em; /* Adds a small right margin for spacing */
            /* Add any other styles you want for the first letter here */
        text-shadow: 2px 0 0 #f913e6, 0 2px 0 #f913e6, -4px 0 0 black, 0 -3px 0 black;
        }

        @media (min-width: 768px) {
            .my-custom-columns {
                -moz-column-count: 2;
                -webkit-column-count: 2;
                column-count: 2;
                -moz-column-gap: 30px;
                -webkit-column-gap: 30px;
                column-gap: 30px;
            }
        }

        .game-card {
            padding: 2rem;
            background: 
            -webkit-linear-gradient(rgb(255 255 255), rgba(135, 60, 255, 0.0) 43%), 
            -webkit-linear-gradient(42deg, rgb(255 255 255 / 90%) 75%, #a2d444 0%)
        }

        pre {
                background-color: black;
                background-image: radial-gradient(rgba(0, 150, 0, 0.75), black 120%);
                margin: 0;
                overflow: hidden;
                padding: 2rem;
                color: white;
                font: 1.3rem Inconsolata, monospace;
                text-shadow: 0 0 5px #C8C8C8;
              }
              pre::after {
                content: "";
                position: fixed;
                top: 0;
                left: 0;
                background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15) 1px, transparent 1px, transparent 2px);
                pointer-events: none;
              }
    .thumbnail-column {
        background-image: radial-gradient(currentColor 1px, transparent 1px);
    background-size: calc(10* 1px) calc(10* 1px);
    
    }
    .thumbnail-column a {
        display: block;

    z-index: 1;  overflow: visible; /* Hide overflow */
        width: 100%; /* Responsive width */
        height: auto; /* Maintain aspect ratio */
        position: relative; /* Make the image a reference point for the pseudo-element */
    }
    
    .thumbnail-column a::after {
        content: ''; /* This is required for the pseudo-element to work */
    display: block; /* Allows it to behave like an element */
    width: 100%; /* Full width of the column */
    height: 220px; /* Set the height as needed */
    
    position: absolute; /* This takes the pseudo-element out of the document flow */
    top: 20px; /* Position it at the top of the container */
    left: 10px; /* Align it to the left */
    z-index: -1; /* Ensures the pseudo-element is behind the content */
        --b: 9px;
    --s: 210px;
    --c: #cd5252;
    width: round(var(--s), 4* var(--b));
    aspect-ratio: 1;
    border-radius: 47%;
    background: repeating-radial-gradient(calc(2* var(--b)) at top, #0000 -1px, #cd5252 0 calc(50% - 1px), #0000 50% calc(100% - 1px)) calc(50% + var(--b)) 100%, repeating-radial-gradient(calc(2* var(--b)) at bottom, #cd5252 -1px, #0000 0 calc(50% - 1px), #cd5252 20% calc(100% - 1px)) 50% 0;
    background-size: 110% 50%;
    background-repeat: no-repeat;
    mask: radial-gradient(calc(1.5* var(--b)) at calc(100% - var(--b) / 2) 0, #0000 calc(100% / 3), #000 calc(100% / 3 + 1px) 110%, #0000 0) calc(50% + var(--b) / 2) 100% / calc(3* var(--b)) 50% exclude no-repeat, conic-gradient(#000 0 0);
    }

    .alphabet-nav ul {
        list-style: none;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        background-color: #35c6e4;
    rotate: -1deg;
    background-size: 20px 20px;
    background-position: 0 0, 30px 30px;
    background-image: -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-image: -moz-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), -moz-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-image: -ms-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), -ms-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-image: -o-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), -o-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    }
    .alphabet-nav li {
        margin: 0;
        box-shadow: 1px 3px 0 #07ff35;
        rotate: 2deg;
    }

    .alphabet-nav li:nth-child(odd) {
        rotate: -2deg;
    }
    .alphabet-nav li:nth-child(even) {
        rotate: 1deg;
    }
    .alphabet-nav a {
        text-decoration: none;
        font-weight: bold;
        padding: .25rem .5rem .05rem;
        font-size: var(--text-title);
        color: #333;
        background-color: #f5f5f5;
        border-radius: 3px;
        transition: all 0.3s;
        font-family: 'Special Elite';
        box-shadow: 2px 4px black;
    }
    .alphabet-nav a:hover {
        background-color: #07ff35;
    color: var(--color-text-black);
    font-size: var(--text-heading1);
    text-shadow: 1px 2px #fae303c2;
    }

    .chart-container {
        background-color: white;
        position: relative;
        padding: 1rem;
    }
    
    .chart-container::before, .chart-container::after {
        content: "";
        position: absolute;
        height: 24px;
        width: 100%;
        left: 0;
        background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/23618/rip.svg) bottom;
        background-size: 80%;
    }
    
    .chart-container::before {
        transform: rotate(180deg);
        top: -10%;
        background-size: 180%;
    }

    
    .chart-container::after {
    }