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

html {

    background-color: #fff;
    font-family: Poppins , sans-serif;
    font-weight: 300;
    text-rendering: optimizeLegibility;
    
}
body{

    height: 100%;
   
}

header
{
    overflow: hidden;
    background-image:linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url('https://cdn.dribbble.com/users/508588/screenshots/14807514/media/1fb2d45578234e19a616285b3ab1cca8.jpg?compress=1&resize=1200x900');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;

}
.btn {
    width: 100%;
    height: 70px;
    background-color: transparent;
    display: flex;
    justify-content:flex-end;
    align-items: center;
}


.generate {
    height: 70%;
    width: 30%;
    font-size: large;
    border-radius: 50px;
}
.generate:link,
.generate:visited{
    border: 1px solid #fff;
    color: #fff;;
    margin-left: auto;
}

.generate:hover,
.generate:active {

   background-color: burlywood;
}

.generate:hover,
.generate:active{
    border: 1px solid black;
    color: #fff;
}

.selection-sort {
    height: 70%;
    width: 30%;
    font-size: large;
    border-radius: 50px;
}

.selection-sort:link,
.selection-sort:visited{
    border: 1px solid #fff;
    color: #fff;;
    margin-left: auto;
}

.selection-sort:hover,
.selection-sort:active {

   background-color: hotpink;
}

.selection-sort:hover,
.selection-sort:active{
    border: 1px solid black;
    color: #fff;
}

.bubble-sort{
    height: 70%;
    width: 30%;
    font-size: large;
    border-radius: 50px;
}

.bubble-sort:link,
.bubble-sort:visited{
    border: 1px solid #fff;
    color: #fff;;
    margin-left: auto;
}

.bubble-sort:hover,
.bubble-sort:active {

   background-color: green;
}

.bubble-sort:hover,
.bubble-sort:active{
    border: 1px solid black;
    color: #fff;
}

.merge-sort{
    height: 70%;
    width: 30%;
    border-radius: 10px;
}


.quick-sort
{
    height: 70%;
    width: 30%;
    font-size: large;
    border-radius: 50px;
}

.quick-sort:link,
.quick-sort:visited{
    border: 1px solid #fff;
    color: #fff;;
    margin-left: auto;
}

.quick-sort:hover,
.quick-sort:active {

   background-color: red;
}

.quick-sort:hover,
.quick-sort:active{
    border: 1px solid black;
    color: #fff;
}

.array-container {
    height: calc(100vh - 80px);
    width: 100%;
    background-color:black blue;
    overflow: scroll;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.array-container div {
    background-color:burlywood;
    min-height: 10%;
    width: 2%;
     /* position: relative;  */
    top: 5%;
    bottom: 0%;

}

.array-container .activeclass{
    background-color: red;
}
.array-container .activeclass2{
    background-color: green;
}
.array-container .activeclass3{
    background-color:orange;
}