style.css

*{
    font-family: monospace;
}

body{
    font-family: monospace;
    display: flex;
    justify-content: center;
    align-items: center;
    height:100vh
}
.main{
    width:600px;
    box-shadow: 5px 10px;
    padding: 20px;
    border:1px solid;
   

}
div.input-main{
    display: grid;
    grid-template-columns: 1fr min-content;
    gap: 1;
}
div.input-main input{
    font-size: large;
    
    font-weight:bold;
   
    
}
div.input-main button{
    font-size: large;
    border-style: none;
    border-radius: 5px;
   
    font-weight:bold;
   
}
div.range-main{
    display: grid;
    grid-template-columns: 1fr min-content;
}
div.range-main span{
    padding: 10px;
    font-size: large;
    background-color: rgb(241, 239, 239);
   
    border-radius: 10px;
    margin: 10px;
}
div.options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
    
}
div.option{
    background-color: rgb(241, 239, 239);
    padding: 10px;
    font-size:20px;
    border-radius: 5px;
    cursor: pointer;
}
div.option label{
    display: block;
    
    cursor: pointer;
}
button.generate{
    width: 100%;
    font-size: 18px;
    font-weight: 600;
    padding: 3px;
    margin-top: 10px;
   
    
}