h1{
    font-family: 'Verdana', sans-serif;
    font-size: 2.5em;
    color: rgb(34, 87, 54);
    
}
body{
    text-align: center;
    font-size: 1.5em; ;
    font-family: Arial, sans-serif;
    background-color: rgb(226, 231, 219);
}
#app{
    background-color: rgb(172, 242, 206);
    margin:auto;
    width:70%;
    padding: 10px;
    border-radius: 25px;
    box-shadow: inset 2px 2px 5px grey;
}
div{
    margin: 15px
}
.input{
    width: 20px;
    height: 20px;
    margin: 10px;
}
#length{
    width: 50px;
    height: 25px;
    font-size: 0.8em;
    text-align: center;
    border-radius: 5px;
}
button{
    font-size: 1em;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer;
    background-color: rgb(136, 221, 179);
    border: none;
    box-shadow: 2px 2px 5px grey;
    transition: hover 0.7s;
    transition: click 0.1s;
}
button:hover{
    background-color: rgb(104, 199, 153);
    box-shadow: 4px 4px 10px grey;
    scale: 1.01;
}
button:active{
    box-shadow: 1px 1px 2px grey;
    scale: 0.99;
}
#p{
    color: color-mix(in srgb, color percentage, color percentage);
    font-size: 1.5em;
    height: 1.2em;
    margin: 10px;
    font-weight: bold;
    min-height: 1.2em;
}
#password{
    font-family: 'Courier New', Courier;
    background-color: rgb(136, 221, 179);
    padding: 15px;
    border-radius: 15px;
    box-shadow: 2px 2px 5px grey;
    user-select: all;
}
#password:active{
    box-shadow: 1px 1px 2px grey;
}
#Generate{
    margin-top: 20px;
}
#lengthLabel{
    font-size: 0.8em;
}
#basePassword{
    width: 200px;
    height: 25px;
    font-size: 1em;
    text-align: center;
    border-radius: 5px;
}
#basePasswordLabel{
    font-size: 0.8em;
    padding: 20px;
}