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

body{
    height: 100%;
    display: flex;
    justify-content: center;
}

.container{
    min-height: 100vh;
    width: 95%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    border-style: dashed;
    border-radius: 5px;
    background: radial-gradient(ellipse  , silver , black);
    box-shadow: 3px 3px 60px 10px black , 2px 2px 50px 9px silver;
}

#selector{
    width: 90%;
    display: flex;
    flex-wrap: wrap;

}

.selector{
    width: 90%;
    display: flex;
    padding: 5px;
    gap: 5px;

}

input , select {
    padding: 3px 6px;
    outline: none;
    flex-grow: 1;
    font-weight: bold;
}

optgroup{
    background: silver;
    text-overflow: uppercase;
}

optgroup[label="length units"] {
    background: rgb(241, 240, 240);
}

form{
    width: 90%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.button{
    width: 90%;
    display: flex;
    flex-direction: row;
}
button{
    flex-grow: 1;
    outline: none;
    cursor: pointer;
    padding: 2px 6px;
    animation-name: mn;
    background: rgb(241, 240, 240);
    font-weight: bold;
}

button:hover{
    background: silver;
    transform: scale(1.1);
    transition-duration: 1s;

}



.selector div{
    display: flex;
    width: 100%;
    flex-grow: 1;
    flex-wrap: wrap;
}