.register-container {
    width: 450px;
    margin: 80px auto;
    padding: 40px;
    border: #000 solid 2px;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(0,0,0,0.035) 0px,
            rgba(0,0,0,0.035) 1px,
            transparent 1px,
            transparent 9px,
            rgba(0,0,0,0.035) 9px,
            rgba(0,0,0,0.035) 10px,
            transparent 10px,
            transparent 18px,
            rgba(0,0,0,0.035) 18px,
            rgba(0,0,0,0.035) 19px,
            transparent 19px,
            transparent 27px,
            rgba(0,0,0,0.035) 27px,
            rgba(0,0,0,0.035) 28px,
            transparent 28px,
            transparent 36px,
            rgba(0,0,0,0.035) 36px,
            rgba(0,0,0,0.035) 37px,
            transparent 37px,
            transparent 80px
        ),
        #ffffff;
}

.register-container h1 {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
    font-family: "Georgia", "Times New Roman", serif;
    font-style: italic;
    letter-spacing: 2px;
}

.register-container > p {
    width: 100%;
    margin: 0 auto 30px;
    margin-top: 15px;
    padding: 12px 16px;
    background-color: #f8f8f8;
    border-left: 4px solid #000;
    border-radius: 4px;
    font-style: italic;
    color: #555;
    line-height: 1.4;
    text-align: left;
}

form {
    position: relative;
}

.form-group {
    position: relative;
    margin-bottom: 25px;
}

.form-group input {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border-radius: 3px;
    background: none;
    outline: none;
    border: 1px solid #000;
    transition: border-color 0.35s ease-out, box-shadow 0.35s ease-out;
}

.form-group input:hover {
    border-color: #504f4f;
    box-shadow: 0 0 0 1px #504f4f;
}

.form-group input:focus {
    border-color: #000;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
}

.form-group input:-webkit-autofill,
.form-group input:-webkit-autofill:hover,
.form-group input:-webkit-autofill:focus,
.form-group input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    -webkit-text-fill-color: #000 !important;
    transition: background-color 9999s ease-in-out 0s;
}

.form-group label {
    position: absolute;
    top: 12px;
    left: 12px;
    color: #999;
    font-size: 16px;
    pointer-events: none;
    transition: 0.2s ease all;
    background-color: white;
    padding: 0 4px;
}

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label {
    top: -10px;
    left: 8px;
    font-size: 12px;
    color: #000;
}

.btn {
    width: 100%;
    padding: 12px;
    background-color: #fff;
    color: #000;
    border: 2px solid #000;
    border-radius: 4px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn:hover {
    background-color: #000;
    color: #fff;
}

.form-error {
    background-color: #ffebee;
    color: #c62828;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ef9a9a;
    border-radius: 4px;
    font-weight: bold;
}

.field-errors .errorlist {
    margin-top: 6px;
    margin-bottom: 15px;
    padding-left: 0;
    color: #d32f2f;
    font-weight: 500;
    list-style-type: none;
    font-size: 0.95rem;
}

.field-errors .errorlist li {
    background-color: #fdecea;
    border: 1px solid #f5c6cb;
    padding: 8px 12px;
    border-radius: 4px;
}

.register-footer {
    margin-top: 16px;
    text-align: center;
    color: #444;
    font-size: 0.95rem;
}

.register-footer a {
    color: #000;
    font-weight: 700;
    text-decoration: none;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background-color 0.35s ease, color 0.35s ease;
}

.register-footer a:hover {
    background-color: #000;
    color: #fff;
}