*{
    margin: 0;
    padding: 0;
}
html{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
body {
    height: 100%;
    width: 100%;
    font-family: Arial, sans-serif;
    color: white;
    text-align: center;
}
#main{
    width: 100%;
    height: 100%;
    background-color: #131E3A;
    padding-top: 2% ;
    
}
#container{
    width: 80%;
    margin-left: 8%;
    margin-top: 5%;
    
}
#input_value{
    background-color: #1C2951;
    border: 1px solid white;
    box-shadow:8px 8px 12px gray,
                -8px -8px 12px gray;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content:space-around;
    padding: 1vw 0;
    margin-bottom: 3px;
}
#numberInput{
    width: 30vw;
    height: 2vw;
    border: 1px solid blue;
    font-size: 1.5vw;
}

h1 {
    background: linear-gradient(90deg, #ff7b00,#F5CC27,#27CFF5, #F52727);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 4vw;
    border: 2px solid gray;
    border-radius: 5vw;
    width: 60%;
    text-align: center;
}
#headingContainer{
    display: flex;
    align-items: center;
    justify-content: center;
}

#controls, #buttons {
    margin: 15px;
}

input, button {
    padding: 8px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
}

button {
    background: linear-gradient(#0080FE,#1134A6);
    color: #fff;
    cursor: pointer;
    width: 10vw;
    height: 4vw;
    border-radius: 10px;
    font-size: 1.4vw;
}
button:hover{
    box-shadow: 5px 5px 10px black;
}
button:active{
    background: linear-gradient(lightgreen,green);
    color:black
}

#array-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-top: 20px;
    flex-wrap: wrap;
    gap: 5px;
    min-height: 300px;
}

/* Box style */
.box {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border-radius: 5px;
}
#selection{
    background-color: #1C2951;
    border: 1px solid white;
    border-radius: 10px;
    box-shadow:-8px 8px 12px gray,
                8px 0px 12px gray;
}
#section label{
    width:5px;
}
#selection input{
    padding: 5px;
    margin-top:2%;
}

/* Bar style */
.bar {
    width: 20px;
    
    border-radius: 10px 10px 0px 0px;
}