<commit_before>html {
    background-color: #222;
}

:root {
    --imgHeight: 0;
    --imgWidth: 0;
}
body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    .bubble-row {
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 100;
        position: absolute;
        transform: translateX(-50%);
        height: 50px;
        text-align: center;
        bottom: 0;
        .bubble {
            z-index: 101;
            position: relative;
            top: 50%;
            transform: translateY(-57%);
            cursor: pointer;
            display: inline-block;
            opacity: 0.3;
            width: 20px;
            height: 20px;
            .marker {
                pointer-events: none;
                z-index: 102;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                height:60%;
                width: 60%;
                border: 1px solid rgb(40, 180, 120);
                transition: border-color 0.2s ease-in;
            }
            &:hover {
                .marker {
                    border: 1px solid rgb(180, 30, 100);
                }
            }
        }
        .bubble.active {
            opacity: 1;
            .marker {
                height: 80%;
                width: 80%;
            }
        }
    }
    .carousel-container {
        margin: 0;
        padding: 0;
        .carousel {
            display: inline-block;
            position: absolute;
            top: 0;
            left: 0;
            padding: 0;
            .slide {
                width: var(--imgWidth);
                height: var(--imgHeight);
                position: absolute;
                opacity: 0;
                transition: opacity 0.5s ease-in-out;
            }
            .slide.active {
                z-index: 100;
                opacity: 1;
            }

            .carousel-controls {
                .go-right, .go-left {
                    position: absolute;
                    text-align: center;
                    width: calc( var(--imgWidth) / 10);
                    height: var(--imgHeight);
                    z-index: 1000;
                    color: black;
                    cursor: pointer;
                    transition: 0.2s;
                    transition: background-color 0.19s ease-in-out;
                    &:hover {
                        i {
                            opacity: 1;
                        }
                        background-color: rgba(0,0,0, 0.2);
                    }
                    i {
                        opacity: 0;
                        transition: opacity 0.19s ease-in-out;
                        color: white;
                        position: relative;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
                
                .go-right {
                    transform: translateX(-100%);
                    left: var(--imgWidth);
                    i {
                        text-shadow: -1px 1px 0px black;
                    } 
                }
                .go-left {
                    i {
                        text-shadow: 1px 1px 0px black;
                    }
                }
            }
        }
    }
        background-color: #222;
    }


*.unselectable {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
 
    /*
      Introduced in IE 10.
      See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
    */
    -ms-user-select: none;
    user-select: none;
}

@media (min-width: 600px)  {
    .bubble-row {
        left: calc(var(--imgWidth)/2);
        width: 40%;
    }
}
<commit_msg>changed how the controls act in mobile<commit_after>html {
    background-color: #222;
}

:root {
    --imgHeight: 0;
    --imgWidth: 0;
}
body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    .bubble-row {
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 100;
        position: absolute;
        transform: translateX(-50%);
        height: 50px;
        text-align: center;
        bottom: 0;
        .bubble {
            z-index: 101;
            position: relative;
            top: 50%;
            transform: translateY(-57%);
            cursor: pointer;
            display: inline-block;
            opacity: 0.3;
            width: 20px;
            height: 20px;
            .marker {
                pointer-events: none;
                z-index: 102;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                height:60%;
                width: 60%;
                border: 1px solid rgb(40, 180, 120);
                transition: border-color 0.2s ease-in;
            }
            &:hover {
                .marker {
                    border: 1px solid rgb(180, 30, 100);
                }
            }
        }
        .bubble.active {
            opacity: 1;
            .marker {
                height: 80%;
                width: 80%;
            }
        }
    }
    .carousel-container {
        margin: 0;
        padding: 0;
        .carousel {
            display: inline-block;
            position: absolute;
            top: 0;
            left: 0;
            padding: 0;
            .slide {
                width: var(--imgWidth);
                height: var(--imgHeight);
                position: absolute;
                opacity: 0;
                transition: opacity 0.5s ease-in-out;
            }
            .slide.active {
                z-index: 100;
                opacity: 1;
            }

            .carousel-controls {
                .go-right, .go-left {
                    position: absolute;
                    text-align: center;
                    width: calc( var(--imgWidth) / 10);
                    height: var(--imgHeight);
                    z-index: 1000;
                    color: black;
                    cursor: pointer;
                    transition: 0.2s;
                    transition: background-color 0.19s ease-in-out;
                    &:hover {
                        i {
                            opacity: 1;
                        }
                        background-color: rgba(0,0,0, 0.2);
                    }
                    i {
                        opacity: 0;
                        transition: opacity 0.19s ease-in-out;
                        color: white;
                        position: relative;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
                
                .go-right {
                    transform: translateX(-100%);
                    left: var(--imgWidth);
                    i {
                        text-shadow: -1px 1px 0px black;
                    } 
                }
                .go-left {
                    i {
                        text-shadow: 1px 1px 0px black;
                    }
                }
            }
        }
    }
        background-color: #222;
    }


*.unselectable {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
 
    /*
      Introduced in IE 10.
      See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
    */
    -ms-user-select: none;
    user-select: none;
}

@media (min-width: 600px)  {
    .bubble-row {
        left: calc(var(--imgWidth)/2);
        width: 500px;
    }
}

{'fraction_non_alphanumeric': 0.10527000650618087, 'fraction_numerical': 0.03422251138581653, 'mean_word_length': 0.8252196627879363, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1294280', 'n_tokens_mistral': 2337, 'n_tokens_neox': 1971, 'n_words': 452}