#binary_grid_outer {
    display: grid;
    height: 300px;
    align-items: center;
    justify-items: center;
}

#binary_grid_outer>* {
    grid-area: 1/1/2/2;
}

#brgrid,
#br_grid2 {
    display: grid;
    height: 300px;
    width: 200px;
    gap: 50px;
    grid-template-columns: 2;
    grid-template-rows: 3;
    grid-template-areas:
        "a f"
        "b e"
        "c d";
}

#brgrid {
    z-index: 4;
    /* opacity: 0; */
}

.dot {
    width: 75px;
    height: 75px;
    background-color: black;
    border-radius: 50%;
}

#circle1,
#b1 {
    grid-area: a;
}

#circle2,
#b2 {
    grid-area: b;
}

#circle3,
#b3 {
    grid-area: c;
}

#circle4,
#b4 {
    grid-area: d;
}

#circle5,
#b5 {
    grid-area: e;
}

#circle6,
#b6 {
    grid-area: f;
}

.low {
    background-color: white;
}

#br_grid2 {
    align-items: center;
    justify-items: center;
    z-index: 3;
}

.bit {
    color: black;
    /* opacity: 0; */
    height: 75px;
    font-family: 'IBM Plex Mono';
    font-size: 70px;
    line-height: 1;
    will-change: transform;
    /* border: 1px solid blue; */
}

#binary {
    display: flex;
    font-family: 'IBM Plex Mono';
    font-size: 70px;
    gap: 50px;
    opacity: 0;
    z-index: 2;
}

/* @media (max-width: 800px) {
    #binary {
        gap: 10px;
    }
} */

/* 
#binary>* {
    border: 1px solid red;
} */

#bn_gif {
    font-family: 'Courier Prime', Courier, monospace;
    text-align: justify;
    text-align-last: justify;
    width: 50vw;
    opacity: 0;
    /* will-change: transform; */
    z-index: 1;
    margin-bottom: 10px;
}

@media (max-width: 800px) {
    #bn_gif {
        width: 90vw;

    }
}