main {
    height: 100%;
    background: var(--bg);
    display: grid;
    place-items: center;
}
.signin__container {
    width: 50%;
    background: var(--card-bg);
    border: 1px solid var(--border);
    padding: 1rem;
    border-radius: 1rem;
}
.form__title {
    color: var(--text);
    font-size: 2rem;
}
.form__field {
    padding: .5rem;
    border-radius: 1rem;
    border: 1px solid var(--input-border);
    width: 100%;
    margin: .5rem;
    background: var(--input-bg);
    color: var(--text);
}
.form__field:focus{
    outline: 2px solid var(--input-focus);
}
.form__field::placeholder {
    color: var(--input-placeholder);
}
button.form__field, .signin {
    background: var(--input-focus);
    cursor: pointer;
    color: var(--text)
}
.alert__pop {
    position: absolute;
    padding: 1rem;
    border: 1rem;
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    color: var(--info-text);
    left: 50%;
    top: 1rem;
    transform: translateX(-50%);
    border-radius: 1rem;
}