*{
    --bg-main:#0E141B;
    --main-text:#F3F3F3;
    --dim-text:#76808cd4;
    --dim-text-border:#76808c82;


    --secondary-blue:#4B619B;

    --primary-blue:#66C0F4;
    --primary-red:#CD5444;

    --primary-green:#A1CD44;


    --main-button-padding:8px 12px 8px 12px;
    --main-border-radius:5px;
    --item-header-gaps:10px;
    --base-transition-time:0.2s;
    /* System greys */	--gpSystemLightestGrey: #DCDEDF;	--gpSystemLighterGrey: #B8BCBF;	--gpSystemLightGrey: #8B929A;	--gpSystemGrey: #67707B;	--gpSystemDarkGrey: #3D4450;	--gpSystemDarkerGrey: #23262E;	--gpSystemDarkestGrey: #0E141B;	/* Store blue greys */	--gpStoreLightestGrey: #CCD8E3;	--gpStoreLighterGrey: #A7BACC;	--gpStoreLightGrey: #7C8EA3;	--gpStoreGrey: #4e697d;	--gpStoreDarkGrey: #2A475E;	--gpStoreDarkerGrey: #1B2838;	--gpStoreDarkestGrey: #000F18;	/* Gradients */	--gpGradient-StoreBackground: linear-gradient(180deg, var(--gpStoreDarkGrey) 0%, var(--gpStoreDarkerGrey) 80%);	--gpGradient-LibraryBackground: radial-gradient(farthest-corner at 40px 40px,#3D4450 0%, #23262E 80%);	/* Colours */	--gpColor-Blue: #1A9FFF;	--gpColor-BlueHi: #00BBFF;	--gpColor-Green: #5ba32b;	--gpColor-GreenHi: #59BF40;	--gpColor-Orange: #E35E1C;	--gpColor-Red: #D94126;	--gpColor-RedHi: #EE563B;	--gpColor-DustyBlue: #417a9b;	--gpColor-LightBlue: #B3DFFF;	--gpColor-Yellow: #FFC82C;	--gpColor-ChalkyBlue: #66C0F4;	/* Backgrounds */	--gpBackground-LightSofter: #6998bb24;	--gpBackground-LightSoft: #3b5a7280;	--gpBackground-LightMedium: #678BA670;	--gpBackground-LightHard: #93B8D480;	--gpBackground-LightHarder: #aacce6a6;	--gpBackground-DarkSofter: #0e141b33;	--gpBackground-DarkSoft: #0e141b66;	--gpBackground-DarkMedium: #0e141b99;	--gpBackground-DarkHard: #0e141bcc;	--gpBackground-Neutral-LightSofter: rgba(235, 246, 255, 0.10);	--gpBackground-Neutral-LightSoft: rgba(235, 246, 255, 0.20);	--gpBackground-Neutral-LightMedium: rgba(235, 246, 255, 0.30);	--gpBackground-Neutral-LightHard: rgba(235, 246, 255, 0.40);	--gpBackground-Neutral-LightHarder: rgba(235, 246, 255, 0.50);

}


.test_size{
    width: 85%;
    margin: auto; 
    margin-top: 30px;
    max-width: 1500px;
}


body{
    font-family: Arial, sans-serif;
    margin: 0;
    background: linear-gradient(180deg, var(--gpStoreDarkGrey) 0%, var(--gpStoreDarkerGrey) 80%);
    user-select: none;
}

h1{
    color: var(--main-text);
    margin: 0;
    font-size: 1.9em;
}

p{
    color: var(--main-text);
}

.item-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #0E141B;
    border-radius: var(--main-border-radius);
    padding: var(--item-header-gaps);
}

button{
    all: unset;
    cursor: pointer;
    transition: color var(--base-transition-time) , background-color var(--base-transition-time) , border-color var(--base-transition-time);
}

.dim-button{
    color: var(--dim-text);
    background: transparent;
    border: 1px solid var(--dim-text-border);
    padding: var(--main-button-padding);
    border-radius: var(--main-border-radius);
}

.dim-button:hover{
    color: var(--main-text);
    border-color: #76808ccf;
}

.main-button{
    color: var(--main-text);
    background-color: #1E2329;
    padding: var(--main-button-padding);
    border-radius: var(--main-border-radius);
}

.main-button:hover{
    background-color: #313843;
}

.item-container{
    display: flex;
    gap: var(--item-header-gaps);
}

.wishlist{
    display: flex;
    align-items: center;
}

.scrnshot_container{
    width: 100%;

    display: flex;
    gap: 1%;

    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
}

.scrnshot_container img{
    width: 19.2%;
    border-radius: 5px;
    cursor: pointer;
}

.chevron img{
    height: 34px;
    transition: scale 0.2s;
}

.chevron:hover img{
    scale: 1.2;
}

.current_screenshot{
    border: 2px solid #4B619B;
    box-sizing: border-box;
}

.video_border{
    border: 2px solid #A1CD44;
    box-sizing: border-box;
}

.pages_icon{
    border-radius: 25px;
    background-color: #1E2329;
    width: 45px;
    height: 10px;
    margin-right: 10px;
}

.pages_icon_inner{
    background-color: var(--secondary-blue);
    border-radius: 25px;
    width: 100%;
    height: 100%;
}

.big_image_section{
    background: #0e141bbf;
    border-radius: 5px; 
    margin-top: 10px;
    padding: 10px;
    display: flex;
}

.details p{
    font-size: 0.9em;
    margin-bottom: 4px;
}

.dim{
    color: var(--dim-text);
}



.parent {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(6, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    width: 100%;
}

a{
    all: unset;
    cursor: pointer;
}

.tags{
    margin-top: 12px;
    display: flex;
    gap: 4px;
    width: 100%;
    margin-bottom: 5px;
}

.tags a{
    background-color: #262c33;
    color: var(--dim-text);
    padding: 8px;
    border-radius: 5px;
    font-size: 0.8em;
    transition: all 0.2s;
}

.tags a:hover{
    background-color: #313843;
    color: var(--main-text);
}


.slide_container:hover .slide{
    opacity: 1;transform: translate(1vw);
}

.slide_container{
    display: flex;
    width: fit-content;
}

p.slide{
    opacity: 0;
    transition: opacity 1s,transform .75s;
    color: var(--primary-blue);
    font-size: 0.7em;
}

p.slide:hover{
    text-decoration: underline;
}

.wide{
    grid-column: span 2;
}

.maker_info{
    color: var(--primary-blue);
    width: fit-content;
}

.maker_info>p{
    color: var(--primary-blue);
}

.maker_info:hover{
    text-decoration: underline;
}

.animating{
    pointer-events: none;
    transition: transform .5s ease 0s;
}

.move{
    transform: translate3d(-101%, 0px, 0px);
}

.review_amount{
    color: var(--secondary-blue);
    margin-left: 14px;    
    font-size: 0.8em;
}


.review_glance_txt{
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
}

@media only screen and (max-width: 768px) {
    .details{
        display: none;
    }
}

.min_size_detaisl{
    width: 350px;
}

.cart_but{
    color: var(--main-text);
    background: var(--secondary-blue);
    border-radius: 5px;
    padding: var(--main-button-padding);
}