body{
    text-align: center;
    font-family: sans-serif;
    margin-top: 20%;
}

button{
    border: 0;
    padding: 15px;
    width: 175px;
    color: white;
    background-color: rgb(56, 161, 56);
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
    align-self: center;
    align-items: center;
    display: flex;
    height: 46px;
    margin-left: auto;
    margin-right: auto;

}
button:disabled{
    border: 0;
    padding: 15px;
    width: 175px;
    color: white;
    background-color: rgb(49, 135, 49);

    border-radius: 5px;
    text-align: center;
    align-self: center;
    align-items: center;
    display: flex;
    height: 46px;
    margin-left: auto;
    margin-right: auto;
    cursor:not-allowed;

}
button:hover{
    background-color: rgb(49, 135, 49);
}
/* 
HTML: <div class="loader"></div> 
thanks to https://css-loaders.com/spinner/
*/
.loader {
    display: flex;
    width: 15px;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #ffffff;
    --_m: 
      conic-gradient(#0000 10%,#000),
      linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
            mask: var(--_m);
    -webkit-mask-composite: source-out;
            mask-composite: subtract;
    animation: l3 1s infinite linear;
  }
  @keyframes l3 {to{transform: rotate(1turn)}}