:root { --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace; --foreground-rgb: 0, 0, 0; --background-rgb: 255 255 255 / 75%; --background-rgb-pale: 214 219 220 / 85%; --btn-primary: #1D2671; --btn-primary-hover: #9f7b7b; } :root[data-theme="dark"] { --foreground-rgb: 255, 255, 255; --background-rgb: 0 0 0 / 55%; --background-rgb-pale: 30 30 30 / 85%; --btn-primary: #607d8b; --btn-primary-hover: #3c6c83; } ::selection { color: #fff; background-color: var(--btn-primary); } * { box-sizing: border-box; padding: 0; margin: 0; } html, body { font-size: 16px; font-family: 'Inter', sans-serif; max-width: 100vw; } body { background-color: rgb(var(--background-rgb-pale)); background: #1D2671; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #1D2671, #9f7b7b); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to right, #1D2671, #9f7b7b); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ color: rgb(var(--foreground-rgb)); min-height: 100vh; } [data-theme="dark"] body { background: #0F2027; /* fallback for old browsers */ background: -webkit-linear-gradient(to left, #2C5364, #203A43, #0F2027); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, #2C5364, #203A43, #0F2027); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } a { color: inherit; text-decoration: none; } @media (prefers-color-scheme: dark) { html { color-scheme: dark; } } img { display: block; max-width: 100%; } label { display: block; } button { border: none; cursor: pointer; outline: none; } h1, .h1 { margin-bottom: 1rem; } h2, .h2 { margin-bottom: .5rem; } h4 { margin: 1rem 0 .5rem; } .main { max-width: 90vw; margin: 0 auto; display: flex; flex-flow: column; justify-content: center; align-items: center; min-height: 90vh; } .main__logo { background-color: #fff; border-radius: 4px; margin: 0 auto 1.5rem; max-width: 100%; padding: .5rem; } .main__container { max-width: 750px; padding: 5rem 0; width: 100%; } .main__wrapper { background-color: rgb(var(--background-rgb)); border-radius: 4px; box-shadow: 0 1rem 1rem -.5rem rgb(0 0 0 / 25%); padding: 3rem; position: relative; } .main__response { padding-left: 2rem; position: relative; padding-top: 0.9rem; } .main__response:before { content: ""; color: #d30; font-size: 5rem; font-weight: 600; position: absolute; line-height: 1; top: 0; left: 0; transition: all .3s ease; } .main__response.invalid:before, .main__response.error:before { content: "!"; color: #d30; } .main__response.warning:before { content: "!"; color: #ff9800; } .main__response.valid:before, .main__response.semivalid:before { content: "\2713"; color: #4caf50; font-size: 2.5rem; top: 0.5rem; } .main__response.semivalid:before { color: #ffc107; } .validation { display: flex; flex-flow: column; gap: 1rem; margin: 1rem 0; position: relative; } .validation__label { margin: 1rem 0; width: 100%; } .validation__input { background-color: #fff; box-shadow: 0 0 4px 0 transparent; border: 3px solid transparent; border-radius: 4px; color: #000; font-size: 1rem; outline: none; padding: 1rem; transition: all .3s ease; width: 100%; margin-bottom: .5rem; } .validation__input.valid { background-color: #c5ffc7; box-shadow: 0 0 0 2px #4caf50; } .validation__input.semivalid { background-color: #fff1ca; box-shadow: 0 0 0 2px #af954c; } .validation__input.warning { background-color: #ffe1b4; box-shadow: 0 0 0 2px #ff9800; } .validation__input.invalid, .validation__input.error { background-color: #ffd7d7; box-shadow: 0 0 0 2px #f44336; } .validation__input:focus { background-color: #fff; box-shadow: 0 0 0 2px #03a9f4; } .validation__btn { background-color: var(--btn-primary); border: 1px solid transparent; border-radius: 4px; color: #fff; padding: 1rem; font-size: 1.25rem; transition: all .3s ease; position: relative; } .validation__btn:hover, .validation__btn:focus { background-color: var(--btn-primary-hover); color: #fff; } .validation__btn[disabled] { color: #888; cursor: not-allowed; background-color: transparent; border: 1px solid #888; opacity: .75; } .validation__btn:after { width: 2rem; height: 2rem; border-style: solid; border-color: #fff #fff #fff transparent; border-radius: 50%; border-width: 4px; content: ""; display: block; position: absolute; top: .5rem; left: calc(50% - 2rem); opacity: 0; pointer-events: none; } .validation__btn.loading { color: transparent; pointer-events: none; } .validation__btn.loading:after { animation: rotate 1s forwards infinite; opacity: 1; } .theme-switch { background-color: rgb(var(--background-rgb)); color: rgb(var(--foreground-rgb)); font-size: 18px; line-height: 1; width: 3rem; height: 3rem; border-radius: 50%; position: fixed; top: 1rem; right: 1rem; transition: all .3s ease; } .theme-switch:hover { background-color: rgb(var(--background-rgb-pale)); } .main__error:not(:empty) { font-weight: 600; color: #d30; } .footer { color: #fff; padding: .5rem; position: fixed; bottom: 0; left: 0; } @media (max-width: 465px) { .main__wrapper { margin: 3rem 0; padding: 1.5rem; } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /*HIDE CAPTHCA*/ .footer + div { display: none !important; }