*, *::before, *::after {
    box-sizing: border-box;
    background-image: linear-gradient(#F1F2F4, #F1F3F4);
}
h2,h3,p {
    margin:0;

}
p {
    text-align:justify;
}
.box-user_input input,
.box-user_input select {
    width: 50%;
    max-width: 25rem;
}
/*.box-user_input, .box-about, .box-impact{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
    max-width: 40rem;
    padding: 1.5rem;
    text-align: center;

    margin: 2rem auto;
    background-color: rgba;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba;
}*/
.box-user_input {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    width: 100%;
    max-width: 40rem;
    padding: 1.5rem;
    text-align: center;
    margin: 2rem auto;
    border-radius: 20px;
    background-color:rgba;
    box-shadow:0 4px 15px;
}

.box-about {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    width: 100%;
    max-width: 40rem;
    padding: 1.5rem;
    text-align: center;
    margin: 2rem auto;
    border-radius: 20px;
    background-color:rgba;
    box-shadow:0 4px 15px;
}
.box-impact{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    width:100%;
    max-width: 40rem;
    padding: 1.5rem;
    text-align: center;
    margin: 2rem auto;
    border-radius: 20px;
    background-color:rgba;
    box-shadow:0 4px 15px;
}
.submit{
    background-color: #F1F2F4;
    transition: background-color 0.15s, transform 0.15s;
    /*shortcut version would be: transition: all, 0.15. I left it as is to remind myself*/

}