html{
    height: 100%;
}

body{
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background: linear-gradient(135deg, rgb(47, 72, 122), rgb(91, 22, 107));
}

.form {
    max-width: 450px;
    min-width: 320px;
    width: 100%;
    padding: 20px 15px;
    border: 2px solid rgb(101, 218, 190);
    border-radius: 6px 16px;
    background: linear-gradient(45deg, rgb(47, 122, 105), rgb(91, 22, 107));
    color: #fcf8eb;
}

.form-legend{
    font-size: 24px;
    font-weight: 700;
    padding: 5px 0;
    text-align: center;
}

.form-group{
    margin: 0 ;
    padding: 0;
    border: 0;
    font-weight: 600;
}

.form-group:last-of-type {
    margin-bottom: 8px;  
}

.form-label{
    display: flex;
    flex-direction: column;
    row-gap: 4px;
    margin-bottom: 8px;
}

.form-input,
.form-textarea{
    padding: 4px 6px;
    border: 2px solid rgb(174 181 187);
    border-radius: 5px;
    font-size: 16px;
    background-color: rgba(241, 241, 241, 0.349);
    color: #fcf7e9;
}
.form-input::placeholder,
.form-textarea::placeholder{
    font-size: 14px;
    color: #fcf8ebc2;
}

.form-textarea{
    font-family: inherit;
    resize: vertical;
    min-height: 30px;
    max-height: 200px;
}

.button,
.input-checkbox{
    cursor: pointer;
}
.button{
    padding: 5px 10px;
    max-width: 120px;
    width: 100%;
    color: inherit;
    font-size: 16px;
    border-radius: 4px;
    border: 2px solid rgb(174 181 187);
    background-color: rgb(88 70 118);
}
.button:hover{
    border: 2px solid rgb(101, 218, 190);
}

.form-input:focus,
.form-textarea:focus,
.button:focus{
    outline: 0;
    border: 2px solid rgb(101, 218, 190);
}
.input-checkbox:focus{
    outline: 2px solid rgb(101, 218, 190);
}