/* 
    Created on : 2023-7-4, 11:51:25
    Author     : sarkuya
*/

main section.first-sight h2 {
    font-size: 2em;
}

/* ---------- color themes ---------- */
.dark form#login {
    background-color: #5d666e;
}

.light form#login {
    background-color: #f6f8fa;
}

.dark form#login label {
    color: #53fdbf;
    font-weight: bold;
}

.light form#login label {
    color: #336699;
    font-weight: bold;
}

.dark form#login input[type='text'],
.dark form#login input[type='password'] {
    color: white;
    background-color: #555;
    border: 1px solid gray;
    outline-color: var(--blue-08);
}

.light form#login input[type='text'],
.light form#login input[type='password'] {
    color: black;
    background-color: white;
    border: 1px solid gray;
    outline-color: var(--blue-08);
}

.dark form#login input[type=submit] {
    color: white;
    background-color: rgb(179, 44, 164);
}

.dark form#login input[type=submit]:hover {
    background-color: rgb(207, 64, 191);
}

.light form#login input[type=submit] {
    color: white;
    background-color: rgb(31, 136, 61);
}

.light form#login input[type=submit]:hover {
    background-color: rgb(31, 150, 61);
}

.dark form#login .error {
    color: #eb7a7a;
}

.light form#login .error {
    color: #dd6161;
}

/* ---------- layout ---------- */

form#login {
    width: max-content;
    margin: 0 auto;
    padding: 1em;
    border-radius: 0.5em;
}

form#login label,
form#login input {
    padding: 0.5em 0;
}

form#login input {
    border-radius: 0.3em;
}

form#login {
    display: grid;
    border: 1px solid gray;

    grid-template-areas: "name-label  name-input"
                         ".           name-error"
                         "email-label email-input"
                         ".           email-error"
                         "pass-label  pass-input"
                         ".           pass-error"
                         ".           submit    ";

    grid-template-columns: auto 1fr;
    row-gap: 1em;
}

form#login label {
    text-align: right;
    min-width: 100px;
}

label[for="name"] { grid-area: name-label; }
input[name='name'] { grid-area: name-input; }
#name-error-msg { grid-area: name-error; text-align: left; }

label[for="password"] { grid-area: pass-label; }
input[type='password'] { grid-area: pass-input; }
#password-error-msg { grid-area: pass-error; text-align: left; }

label[for="email"] { grid-area: email-label; }
input[name='email'] { grid-area: email-input; }
#email-error-msg { grid-area: email-error; text-align: left; }

form#login input[type='submit'] {
    grid-area: submit;
    justify-self: right;

    padding: 0.5em 0.2em;
    width: 150px;

    border: 0px solid;
    border-radius: 0.3em;

    cursor: pointer;
}