
body { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; }
.bar_holder {
    display: grid;
    grid-template-columns: 1fr;
    margin: 50px;
    gap: 20px;
    
}
.game_bar_old {
    display: grid;
    grid-template-columns: 0fr 250px 1fr;
    gap: 2px;

    background-color: #2c292d;
    /* border-radius: 5px; */
    padding: 10px;
    border: 4px solid rgb(152, 195, 51);
    width: 100%;
    text-indent: 1em;
    /* height: 200px; */
    overflow: hidden;
    transition:
        scale 300ms cubic-bezier(1,-0.19,.54,1.15),
        grid-template-columns 300ms cubic-bezier(1,-0.19,.54,1.15),
        background-color 200ms;
}
.game_bar {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2px;

    background-color: #2c292d;
    padding: 10px;
    border: 4px solid #a6e22e;
    width: 100%;
    text-indent: 1em;
    overflow: hidden;
    transition:
        scale 200ms cubic-bezier(1,-0.19,.54,1.15),
        grid-template-columns 300ms cubic-bezier(1,-0.19,.54,1.15),
        background-color 200ms
}
.jam_bar {
    display: grid;
    grid-template-columns: 1fr 250px;
    gap: 2px;

    background-color: #2c292d;
    padding: 10px;
    border: 4px solid #fd6188;
    width: 100%;
    text-indent: 1em;
    overflow: hidden;
    transition:
        scale 200ms cubic-bezier(1,-0.19,.54,1.15),
        grid-template-columns 300ms cubic-bezier(1,-0.19,.54,1.15),
        background-color 200ms
}
.main_bar_sect {
    background-color: red;
    width: 100%;
    height: 100%;
}
.bar_img {
    display: absolute;
    border-radius: 5px;;
    /* margin: 2.6%; */
    width: 250px;
    height: 100%;
    z-index: 1;
    border: 2px solid white;
    cursor: pointer;
    transition: opacity 210ms;
}
.bar_img:hover { scale: 1.03; }
img { image-rendering: pixelated; }
.awesome_sticker {
    position: relative;
}
.side_stuff {
    overflow: hidden;
    width: 100%;
    height: 100%;
    white-space: nowrap;
}
.side_inner {
    position: relative; width: 100%; height: 100%;
}
.side_game {
    color: #a6e22e;
    display: grid;
    /* grid-template-columns: 1fr 5fr 1fr; */
    padding: 10px;
}
.side_game_inner {
    color: white;
    padding: 20px;
}
.jam_side {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    height: 230px;
    width: 100%;
    &::-webkit-scrollbar { width: 1vw; height: 1vw;}
    &::-webkit-scrollbar-track { border: 0.25vh solid rgb(195, 76, 76); border-radius: 1vh; background-color: black;}
    &::-webkit-scrollbar-thumb { background: #78dce8; border-radius: 1vh;}
    &::-webkit-scrollbar-thumb:hover { background: #63c3c3;}
}
.jam_entry {
    display: inline-block;
    width: 250px;
    height: 95%;
}
.jam_entry > iframe {
    border-radius: 10px;
    border: 2px solid #78dce8;
}
.jam_entry > div > div > a > img {
    border-radius: 3px;
    border: 2px solid #78dce8;
}

/* @media only screen and (max-width: 600px) {
    .jam_bar {}
    .bar_img { width: 0px; }
} */

.itch_button_div { font-size: 13px; text-align: center; padding-right: 0px; padding-top: 10px; position: absolute; top: 10px; right: 0px; width: 280px; height: 100%; display: flex; flex-direction: row-reverse; }
.itch_button_a { background-color: rgb(250,92,92); border-radius: 3px; box-shadow: rgba(255,255,255,0.21) 0px 0px 0px 1px 0px inset; font-size: 14px; padding-bottom: 0px; padding-top: 0px; padding-left: 10px; padding-right: 10px; text-align: center; text-shadow: rgb(229, 71, 71) 0px 1px 0px; color: rgb(255,255,255); height: 35px; line-height: 33px; display: inline-block; text-decoration-line: none; text-decoration-style: solid; text-decoration-thickness: auto; font-weight: 700; font-family: Lato, sans serif; cursor: pointer; border: 0.625px solid rgba(0, 0, 0, 0.1); text-indent: 0px; margin-right: 15px; } 
.itch_button_b { background-color: rgb(101, 198, 211); border-radius: 3px; box-shadow: rgba(255,255,255,0.21) 0px 0px 0px 1px 0px inset; font-size: 14px; padding-bottom: 0px; padding-top: 0px; padding-left: 10px; padding-right: 10px; text-align: center; text-shadow: rgb(103, 183, 194) 0px 1px 0px; color: rgb(255,255,255); height: 35px; line-height: 33px; display: inline-block; text-decoration-line: none; text-decoration-style: solid; text-decoration-thickness: auto; font-weight: 700; font-family: Lato, sans serif; cursor: pointer; border: 0.625px solid rgba(0, 0, 0, 0.1); text-indent: 0px; margin-right: 15px; } 

::-webkit-scrollbar { width: 0.7vw; height: 0.7vw;}
::-webkit-scrollbar-track { border: 0.25vh solid rgb(248, 248, 248); border-radius: 1vh; background-color: black;}
::-webkit-scrollbar-thumb { background: rgb(229, 229, 229); border-radius: 1vh;}
::-webkit-scrollbar-thumb:hover { background: #8e8e8e;}