*{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
html,body{
    margin: 0;
    padding: 0;
}
h2{
    margin: 30px;
}
h1{
    margin: 20px;
}
.navbar{
    background-color: #26bbb3;
    color: rgb(255, 255, 255);
    text-align: center;
    padding: 0.5rem;
}
.linear,.Bubble,.Selection,.Insertion{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}
.array,.Binaryarray,.Bubblearray,.Selectionarray,.Insertionarray{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: white;
    border: black 2px solid;
    border-radius: 10px;
}
.elements,.Belements,.bubbleelements,.selectionelements,.Insertionelements{
    padding: 10px;
    margin: 5px;
    border-radius: 4px;
    padding: 15px;
    font-size: large;
    font-weight: bolder;
    background-color: gold;
}
.Search,.sort{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: normal;
    text-align-last: center;
}
.linearSetting,.BubbleSetting,.SelectionSetting,.InsertionSetting{
    padding: 10px 150px 50px 150px;
    border: 2px solid black;
    border-radius: 20px;
}
input[type="number"],select{
    width:55px;
    border-radius: 10px;
    padding:5px;
}

input,select{
    outline: none;
}
button{
    border-radius: 20px;
    background-color: black;
    color: white;
    padding: 7px 20px;
}
button{
    cursor: pointer;
}
@media (max-width:600px) {
    .elements, .Belements, .bubbleelements ,.selectionelements,.Insertionelements{
        padding: 10px;
        margin: 3px;
        border-radius: 4px;
        padding: 9px;
        font-size: small;
        font-weight: bolder;}
    .linearSetting, .BubbleSetting, .SelectionSetting, .InsertionSetting {
            padding: 5px 70px 20px 70px;
            border: 2px solid black;
            border-radius: 20px;
    
    }
    .linear, .Bubble, .Selection, .Insertion {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
    }
    .array, .Binaryarray, .Bubblearray, .Selectionarray, .Insertionarray {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        background-color: white;
        border: black 2px solid;
        margin: 50px 0;
        border-radius: 10px;
    }
}
footer{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}