*{
    margin : 0;
    padding : 0;
    box-sizing: border-box;
}

body{
    background-color: rgb(250, 235, 215,0.8);
}

#total{
    display: flex;
    flex-direction: column; 
}

#top{
    display: flex;
    flex-direction: column;    
}


#header{
    width : 100%;
    height : 5rem;
    background-color: rgb(255, 228, 196,0.7);
    text-align: center;
    font-size : 1.7rem;
    color : rgb(42, 64, 152);
    display: flex;
    flex-direction: column;
}

#options{
    margin-left : -20px;
}

.buttons{
    width : 60px;
    font-size : 15px;
}

#body{
    display: flex;
    flex-direction: column;
}


#algorithm{
    text-align: center;
    color : lightcoral;
    margin-left : -20px;
    margin-top : 20px;
}


#input-container{
    height : 40px;
    width : 100%;
    padding-left : 60px;
    font-size : 1.6rem;
    padding-top : 20px;
    display: flex;
    flex-direction: column;

}

#container1{
    display: flex;
    justify-content: space-between;
}

#notes{
    padding-right : 20px;
    font-size : 20px;
    text-align: right;
}

#string{
    margin-bottom: 5px;
}

#num{
    color:red;
}


#input{
    font-size :20px;
    padding-top : 10px;
    display: flex;
    justify-content: flex-start;
}

#inputtext{
    border-color: rgb(0,0,0,.3);
    text-decoration: underline;
    width : 60px;
    height : 25px;
    margin-left  : 20px;
    font-size : 20px;
    background-color: antiquewhite;
    text-align: center;
}


#grids{
    align-items: center;
    display: flex;
    justify-content: center;
}


#addclear{
    display: flex;
    margin-top  : 10px;
}

#addbutton{
    width  : 50px;
    text-align: center;
    font-size : 15px;
}

#clearbutton{
    width  : 60px;
    text-align: center;
    font-size : 15px;
    margin-left : 10px;
}

#nopagefault{
    font-size : 20px;
    text-align : center;
    margin-top : 5px;
    margin-right : 120px;
}










#slide-box{
    margin: 100px 0px -100px 20px;
    display: flex;
    justify-content: space-between;
}

#cur_element{
    display: flex;
}

#cur_element #text{
    padding-top : 10px;
    font-size : 20px;
    margin-right: 10px;
    margin-left : 40px;
}

#cur_element #black-box{
    width: 40px;
    height: 40px;
    background-color: black;
    display: grid;
    font-size : 35px;
    color : white;
    text-align: center;
}


#slider{
    padding-top  : 20px;
    padding-right : 600px;
}


#slidebar{
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 25px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

#slidebar:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

#slidebar::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    border-radius: 20px;
    background: blue; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

#values{
    display: flex;
    justify-content: space-between;
    font-size : 25px;
    margin-left : -10px;
    color : blue;
}

#bottom{
    margin : 100px auto;
    display: flex;
    flex-direction: column;
}

#grids{
    width : 800px;
    /* margin : 100px auto; */
    margin-left : 90px;
    padding-left : 20px;
    display: grid;
    margin-bottom: -20px;
}

#compare{
    opacity: 0;
    margin-top : 200px;
    margin-left : 50px;
    font-size : 30px;
}