:root { --bkg: var(--brack); --text: var(--beige); --action: var(--turquoise); --lowlink: var(--taupe); --input: var(--grock); }
.front main { text-align: left; }
.front main .cover { display: grid; place-content: center; max-width: 28em; margin: auto; margin-left: calc(50vw - 1.5em); padding: 0; padding-right: 2em; height: 100vh; width: auto; }
.front svg.btn { width: 3em; background-color: var(--blued); color: var(--text); border: 0; padding: 0.8em; margin-left: 0; }
.front .login { color: var(--lowlink); }
.front h1 { color: var(--action); }
*.quote { color: var(--text); }
.front .cover * { -webkit-filter: drop-shadow(1px 1px 2px var(--black)); }
h2.quote { font-size: 3.5em; }
main > .veil { background-color: var(--dark-pur); }
input { color: var(--text); }
@media only screen and (max-width: 609px) { .front main .cover { padding-right: 1em; }
h2.quote { font-size: 2.5em; }
}