:root{
    --primary: #007bff;
    --primaryH: #0069d9;
    --secondary: #6c757d;
    --secondaryH: #5a6268;
    --success: #28a745;
    --successH: #218838;
    --info: #17a2b8;
    --infoH: #138496;
    --warning: #ffc107;
    --warningH: #e0a800;
    --danger: #cd3545;
    --dangerH: #c82333;
}
*{
    box-sizing: border-box;
    color: #fff;
}
body{
    margin: 0;
    padding: 0;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
}
h2{
    text-align: center;
    color: var(--info);
}
h4{
    color: var(--warning);
}
.input{
    width: 100%;
    outline: none;
    border: 0.1rem solid #c6c6c6;
    padding: 0.4rem;
    background: transparent;
    transition: 0.3s linear;
}
.input:hover,
.input:focus,
.textbox:hover,
.textbox:focus{
    border-color: var(--danger);
}

.textbox{
    outline: none;
    width: 100%;
    border: 0.1rem solid #c6c6c6;
    background: transparent;
    resize: none;
    transition: 0.3s linear;
    padding: 0.4rem;
}
.btn-success{
    outline: none;
    padding: 0.6rem;
    border: none;
    background: var(--success);
    cursor: pointer;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    transition: 0.3s linear;
}
.btn-success:hover,
.btn-success:focus{
    background: var(--successH);
}
.error-message{
    font-size: 900;
    color: var(--danger);
}
#wrapper{
    width: 50%;
}