* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --color__text-headline: #323338;
    --color__input-label: #848588;
    --color__input-border: #E8ECEE;
    --color__text-notice: #E44258;
    --color__background-button: rgba(8, 199, 224, 1);
    --color__background-button-hover: rgba(8, 199, 224, .8);
    --color__text-button: #FFFFFF;
    --color__link: #5F48EA;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
}

body.login {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

a {
    text-decoration: none;
}

h1 {
    text-align: center;
    font-size: 32px;
    line-height: 1.25;
    color: var(--color__text-headline);

    &.screen-reader-text {
        display: none;
    }

    a {
        color: inherit;
        cursor: default;
    }
}

#login {
    max-width: 730px;
    width: 100%;
    padding: 40px 30px;
    box-shadow: 0 8px 16px 0 rgba(33, 30, 30, 0.16);
    border-radius: 20px;
}

.notice {
    max-width: 540px;
    width: 100%;
    margin: 30px auto 0;
    color: var(--color__text-notice);
    font-size: 12px;
}

form {
    max-width: 540px;
    width: 100%;
    margin: 30px auto 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 10px;
    color: var(--color__input-label);
}
input[type="text"],
input[type="password"] {
    border: 1px solid var(--color__input-border);
    border-radius: 5px;
    padding: 12px;
    font-size: 14px;
    line-height: 1.6;
    width: 100%;
}

input[type="text"]:focus-visible,
input[type="password"]:focus-visible,
input[type="text"]:focus,
input[type="password"]:focus {
    outline-color: var(--color__input-label);
    outline-style: solid;
    outline-width: 1px;
}
.wp-generate-pw,
input[type="submit"] {
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.334;
    text-align: center;
    background-color: var(--color__background-button);
    border: none;
    border-radius: 5px;
    padding: 12px 30px;
    width: 100%;
    color: var(--color__text-button);
    transition: background-color .2s ease;
}

input[type="submit"]:hover {
    background-color: var(--color__background-button-hover);
}

#backtoblog,
.forgetmenot {
    display: none;
}
.wp-generate-pw {
    margin-bottom: 10px;
}
.wp-pwd {
    position: relative;
}
.wp-pwd button {
    position: absolute;
    right: 14px;
    top: 14px;
    /*top: 50%;
    transform: translateY(-50%);*/
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    color: var(--color__input-label);
}
.pw-weak {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}
.pw-weak label {
    margin: 0;
    line-height: 1;
}
#pass-strength-result {
    text-align: center;
    width: 100%;
    padding: 5px;
    font-size: 12px;
    font-weight: 600;
}
#pass-strength-result.short {
    background-color: #ffabaf;
}
#pass-strength-result.bad {
    background-color: #facfd2;
}
#pass-strength-result.good {
    background-color: #f5e6ab;
}
#pass-strength-result.strong {
    background-color: #b8e6bf;
}
#nav {
    text-align: center;
}
#nav a {
    display: block;
    margin-top: 30px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
    color: var(--color__link);
}
.admin-email__actions {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.admin-email__actions a {
    display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
    color: var(--color__link);
}
.admin-email__actions-primary a {
    margin-bottom: 30px;
}
.indicator-hint {
    font-size: 12px;
    font-weight: 600;
}
.caps-warning {
    display: flex;
    align-items: center;
    margin-top: 15px;
}
.caps-warning {
    display: none;
}
.caps-warning svg {
    width: 26px;
}