Something went wrong. Try again.
add or update alt text on your media forked from psingletary.com/verifier
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276/* src/app.css */@import './styles/variables.css';
.App { font-family: "articulat-cf", sans-serif; font-weight: 500; font-style: normal; margin: 0; padding: 20px; text-align: center; color: var(--text); background-color: var(--background); transition: color 0.3s ease, background-color 0.3s ease;}
h1 { font-family: "articulat-cf", sans-serif; font-weight: 800; color: var(--button-bg); font-size: 2.1em; margin-top: 0px; margin-bottom: 8.5px; transition: color 0.3s ease; line-height: 1em;}
h2 { color: var(--text); font-size: 1.5em; margin-top: 28px; margin-bottom: 10px; font-weight: 800; transition: color 0.3s ease; line-height: 1em;}
h3 { font-size: 1.3em; font-family: "articulat-cf", sans-serif; font-weight: 800; font-style: normal; color: var(--text); transition: color 0.3s ease; line-height: 1em;}
p { margin-top: 1.2em; margin-bottom: 1.2em; font-size: 1em; font-family: "articulat-cf", sans-serif; font-weight: 500; font-style: normal; color: var(--text); transition: color 0.3s ease; line-height: 1.3em;}
a { color: #3b9af8; font-family: "articulat-cf", sans-serif;}
a:visited { color: #004f84;}
body { margin: 0; font-family: "articulat-cf", sans-serif; font-weight: 500; font-style: normal; background-color: var(--background); color: var(--text); transition: background-color 0.3s ease, color 0.3s ease;}
form { background: var(--navbar-bg); border: 5px solid var(--card-border); border-radius: 12px; box-shadow: none; gap: 15px; justify-content: center; margin: 10px auto; padding: 20px 30px; display: flex; flex-direction: column; transition: background-color 0.3s ease, border-color 0.3s ease;}
input { border: 2px solid var(--card-border); border-radius: 6px; max-width: 200px; padding: 9px; text-align: center; margin: auto; align-content: center; justify-content: center; font-size: 1.1em; background-color: var(--navbar-bg); color: var(--text); transition: all 0.3s ease; font-family: articulat-cf;}
@media (max-width: 450px) { input { max-width: 85%; margin: auto; }}
input:hover { border: 2px solid var(--button-bg); background: var(--background);}
input:focus { border: 2px solid var(--button-bg); background: var(--background);}
button { background: var(--button-bg); border: none; border-radius: 6px; color: var(--button-text); cursor: pointer; margin: auto; max-width: 175px; padding: 10px 15px; font-weight: 700; font-size: 1em; transition: background-color 0.3s ease;}
button:hover { background: #004F84;}
.error { color: #ff4444; transition: color 0.3s ease;}
ul { display: inline-block; margin: 10px 0px; text-align: left; color: var(--text); font-family: articulat-cf;}
ol { font-family: articulat-cf; margin: 10px 0; opacity: 1; padding-left: 40px;}
.main-container { align-content: center; margin: 0 auto; max-width: 1000px; width: 100%;}
.app-container { background-color: var(--background); transition: background-color 0.3s ease;}
.form-input:focus { background-color: var(--background); outline: none;}
.autocomplete-items { background-color: var(--navbar-bg); left: 0; overflow: clip; position: absolute; right: 0; top: 116%; z-index: 99; border: 2px solid var(--card-border); border-radius: 6px; gap: 3px; display: flex; flex-direction: column; padding: 10px; text-align: left; transition: all 0.3s ease; max-width: 200px; margin: auto;}
.autocomplete-item { display: flex; overflow: clip; padding: 6px; color: var(--text); transition: all 0.3s ease;}
.autocomplete-item:hover { background-color: var(--background); border-radius: 6px; border: 2px solid var(--card-border);}
.autocomplete-item img { width: 20px; height: 20px; border-radius: 50%; margin-right: 7px; object-fit: cover;}
.autocomplete-items:empty { display: none;}
.last-updated { font-style: italic; margin-bottom: 20px; opacity: 26.5%; font-size: 0.8em; text-align: center; color: var(--text); transition: color 0.3s ease;}
.alt-card { padding: 40px 30px; background: var(--navbar-bg); transition: background-color 0.3s ease;}
.alt-card h1 { text-align: center;}
.disclaimer { opacity: 0.6; font-size: 0.8em; margin-top: 13.5px;}
/* Dark mode overrides */.dark-mode .App,.dark-mode body,.dark-mode .app-container { background-color: var(--background); color: var(--text);}
.dark-mode input:hover,.dark-mode input:focus { background-color: #2d2d2d; border-color: var(--button-bg);}
.dark-mode .error { color: #ff6b6b;}
.dark-mode .autocomplete-item:hover { background-color: #2d2d2d;}
.dark-mode .last-updated { opacity: 0.4;}