/* overflow-x: scroll; */
.min-half {
    min-width: 50px !important;
}
.header-codeColor-lesson {
    padding-left: 2.5%;
}
.step-container{
    position: relative;
    z-index: 0;
}

.step {
    display: flex;
    justify-content: space-between;
}

/* .step, */
.step-float:focus,.step-float:focus{
    z-index: 100;
}
.step-float{
    position: relative;
    padding-bottom: 5%;
}
.step-img,
.step-vid {
    float: right;
    width: 45%;
    margin-top: 5%;
    /* Adjust as needed */
    margin-right: 5%;
    margin-left: 10px;
    /* z-index: 0; */
    /* Optional: adds space between console and text */
}

.step-img>img,
.step-vid>video {
    position: relative;
    width: 98%;
    border: 1px solid white;
    max-width: 500px;
    z-index: 0;
    transition: all 0.025s ease;
}

.step-img img.enlarge{
    z-index: 10;
    min-height: 150px;
    min-width: 200px;
    margin-right: 50%;
}
.imgs-container .img-container:nth-child(odd) img.enlarge{
    z-index: 10;
    /* min-height: 150px;
    min-width: 200px;*/
    margin-left: 20%;
}
video.enlarge-vid {   
    position: absolute;
    z-index: 10;
    min-height: 150px;
    transform: scale(1.5);
    min-width: 250px;
    right: 20%;
}
.imgs-container {
    display: flex;
}
.imgs-container .img-container {
    width: 50%;
}
.imgs-container .img-container .step-img {
    width: 90%;
}
.step:active,.step:focus, 
.step-float:active,.step-float:focus{
    /* font-style: bold; */
}

.step > .step-txt{
    padding: 1%;
}
.step-float > .step-txt{
    padding: 0 2%;
}
.step-float > .step-txt > p{
    padding: 0 2%;
    margin-top: 2%;
}
.step-txt ul {
    margin-left: 3%;
}
.step-txt ul li{
    line-height: 1.5;
}
.step-float > p {
    margin: 1% 2%;
    margin-top: 2.5%;
    margin-left: 5%;
}

.step-float>.code-container {
    border: 2px solid red;
    margin-left: 2.5%;
}
.code-container {
    background-color: white;
    width: fit-content;
    margin-top: 2.5%;
    min-width: 400px;
}
.code-container>.copy-code {
    color: white;
    position: relative;
    /* ADD THIS */
    border-radius: 8px;
    width: 100%;
    z-index: 5;
    background-color: var(--bg-primary);
    width: 100%;
    padding: 1.5% 5% 2% 1.2%;
}
.clear {
    clear: both;
}

.step-float>.step-vid>video  {
    z-index: 0;
}

.enlarge {
    position: relative;
    transform: scale(1.5);
}
@media screen and (max-width: 721px) {
    .code-container{
        min-width: 250px;
    }   
    video {min-width: 250px;}
    video.enlarge-vid {
        right: 3%;
        top: 0;
        transform: scale(1.02);
    }
    .step-txt {
        font-size: 90%;
    }
    #targetDiv{
        padding-bottom: 15%;
        margin-bottom: 15%;
    }   
    img.enlarge {
        position: absolute;
        z-index: 10;
        min-height: 112px;
        min-width: 244px;
        max-width: 200px;
        margin-right: 80%;
    }
    
}