@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

html, body {
    height: 100%;
    width: 100%;

    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

body {
    margin:0;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #D8E0E4;
}

#wrapper {
    max-width: 1170px;
    width: 100%;
}

@media screen and (max-width: 960px)  {
    #wrapper {
        width: 92%;
    }
}

.turing-machine {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width:100%;
}


.info-section {
    display: flex;
    flex-direction: row;

    justify-content: space-around;

    margin-bottom: -100px;

    gap: 32px;

    width: 70%;

    flex-wrap: wrap;
}

@media screen and (max-width: 960px)  {
    .info-section {
        margin-bottom: 0px;
    }
}

.info-section__block {
    width: 200px;
}   

.info-section__block__title {
    box-shadow: -4px -4px 13px rgba(239, 249, 255, 0.83), 7px 7px 12px rgba(8, 46, 103, 0.25);
    border-radius: 19px;

    width: 100%;

    padding: 4px 0px;
    margin-bottom: 16px;

    text-align: center;

    font-weight: 700;
}


.info-section__block__stats {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.stat {
    display: flex;
    flex-direction: column;

    text-align: center;
}

.stat__name {
    font-weight: 400;
    font-size: 19px;
    text-align: center;

    color: #74838B;
}

.stat__value {
    font-weight: 700;
    font-size: 31px;
    text-align: center;

    color: #5A676D;
}

.info-section__cursor {
    margin: 48px 64px 0px;

    /* box-shadow: -11px -6px 28px #FFFFFF, 3px 4px 25px rgba(0, 0, 0, 0.37); */

}


.machine-section {
    width: 100%;

    margin-top: -24px;

    display: flex;
    flex-direction: row;

    
}

.tape-back {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* justify-content: center; */

    overflow-x: auto;
    scroll-snap-type: x mandatory;

    width: 100%;
    background: #819199;
    margin: 32px -16px;
    box-shadow: -4px -4px 13px rgba(239, 249, 255, 0.83), 7px 7px 12px rgba(8, 46, 103, 0.25);
}

.tape {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    padding-left: 46%;
    padding-right: 46%;

    gap: 8px;
}


.tape::-webkit-scrollbar {
    background: none;
    height: 16px;
    width: 10px;
    
}

.tape::-webkit-scrollbar-track {
    border: 16px solid rgba(255,255,255,0);
}

.tape::-webkit-scrollbar-thumb {
    background: linear-gradient(94.59deg, #E8F0F3 18.14%, #BDCCD3 123.86%);
    /* box-shadow: -3px -2px 5px #FFFFFF, 3px 4px 5px -1px rgba(0, 0, 0, 0.25); */
    border-radius: 19px;
    border: 3px solid #819199;
}

/* .tape::-webkit-scrollbar {
    height: 32px;
} */

.tape-border {
    width: 39px;
    height: 218px;

    background: #D8E0E4;

    box-shadow: -4px -4px 13px rgba(239, 249, 255, 0.83), 7px 7px 12px rgba(8, 46, 103, 0.25);
    border-radius: 19px; 

    z-index: 10;
}

.tape__element {
    background: #D8E0E4;

    border: 0;
    height: 120px;
    width: 92px;

    font-size: 32pt; 

    text-align: center;


    box-shadow: inset -4px -4px 13px -1px rgba(255, 255, 255, 0.72), inset 4px 4px 9px -1px rgba(8, 46, 103, 0.25);
    border-radius: 19px;

    z-index: 3;
}

.tape__element.active {
    background: #D6ACFF;
}



.btn {
    width: 293px;
    height: 49px;

    background: linear-gradient(95.97deg, #C999EE -1.6%, #967CF5 101.48%);
    border: 4px solid #9A7EF4;
    /* Выпуклый */

    box-shadow: -4px -4px 13px rgba(239, 249, 255, 0.83), 7px 7px 12px rgba(8, 46, 103, 0.25);
    border-radius: 19px;

    font-weight: 600;
    font-size: 16px;

    transition: 0.1s;

    margin-bottom: 16px;
}


.btn:hover {
    width: 350px;
    border-color: rgb(232, 210, 255);
}

.btn:active {
    background: linear-gradient(95.97deg, #C999EE -1.6%, #967CF5 101.48%);
    border: 4px solid #B09AF6;
    box-shadow: -4px -4px 13px rgba(239, 249, 255, 0.83), 7px 7px 12px rgba(8, 46, 103, 0.25), inset 5px 9px 20px rgba(5, 15, 106, 0.25), inset -9px -9px 13px 3px rgba(255, 255, 255, 0.25);
}

.btn-mode {
    background: #BDCCD3!important;
    color: #5A676D!important;
    border-color: #b1bec2!important;
}