body{background-color:#121213;color:#d7d7d7}
.btn-outline-secondary:hover{border-color:transparent}
.form-control:disabled,
.form-control[readonly]{background-color:initial}
.btn-check:focus + .btn-outline-primary,
.accordion-button:focus,
.btn-check:focus + .btn{box-shadow:none}
textarea:focus,
textarea.form-control:focus,
input.form-control:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
[type=text].form-control:focus,
[type=password].form-control:focus,
[type=email].form-control:focus,
[type=tel].form-control:focus,
[contenteditable].form-control:focus{box-shadow:inset 0 -1px 0 #ddd}
.btn:focus{box-shadow:none}
.underline{border-bottom:2px solid #d7d7d7}
body[theme=light]{background-color:#fff;color:#121213}
body[theme=light] a{color:#121213 !important}
body[theme=light] .underline{border-bottom:2px solid #5d6176}
.theme-switch{width:25px;height:25px;margin-top:-42px}
#theme-toggle{visibility:hidden}
#theme-toggle + label{content:'';display:inline-block;cursor:pointer;height:19px;width:19px;border-radius:50%;transition:all 0.3s ease-in-out}
#theme-toggle:not(:checked) + label{background-color:gold}
#theme-toggle:checked + label{background-color:transparent;box-shadow:inset -6px -4px 0px 1px #5d6176}
.flags img{width:25px;height:25px}
.loader{width:24px;height:24px;display:block;margin:20px 0;position:relative;border:3px solid #fff;border-radius:50%;box-sizing:border-box;animation:animloader 2s linear infinite}
.loader::after{content:'';box-sizing:border-box;width:3px;height:12px;background:#fff;transform:rotate(-45deg);position:absolute;bottom:-11px;left:23px}
@keyframes animloader{0%{transform:translate(-5px,-5px)}25%{transform:translate(-5px,5px)}50%{transform:translate(5px,5px)}75%{transform:translate(5px,-5px)}100%{transform:translate(-5px,-5px)}}
.clear-btn{padding:0}
.suggested-letter{text-align:center}
.suggested-letter .inside{background-color:#222;padding:5px 0 0}
.suggested-letter .inside .letter{font-size:22px;font-weight:700;padding-bottom:5px}
.suggested-letter .inside .percentage{background-color:#343434}
.letters-row{display:flex;align-items:center;gap:8px;max-width:400px}
.results-word{margin-bottom:10px}
.results-word .inside{background-color:#222;padding:5px 10px;font-size:20px;font-weight:600;text-transform:uppercase;text-align:center;word-break:keep-all}
.letter-input{width:62px;height:62px;font-weight:700;font-size:32px;text-align:center;border-radius:0;color:#fff;margin-bottom:5px;background-color:#121213;border:2px solid #3a3a3c}
.letter-input.green.filled{background-color:#538D4E;border:2px solid #538D4E}
.letter-input.yellow.filled{background-color:#B59F3A;border:2px solid #B59F3A}
.letter-input.grey.filled{background-color:#3A3A3C;border:2px solid #3A3A3C}
.letter-input:focus{outline:none;border:2px solid #616165}
body[theme=light] .loader{border:3px solid #121213}
body[theme=light] .loader::after{background:#121213}
body[theme=light] .suggested-letter .inside{background-color:#f1f1f1}
body[theme=light] .suggested-letter .inside .percentage{background-color:#e1e1e1}
body[theme=light] .results-word .inside{background-color:#f1f1f1}
body[theme=light] .letter-input{color:#fff;background-color:#f1f1f1;border:2px solid #e1e1e1}
body[theme=light] .letter-input.green.filled{background-color:#538D4E;border:2px solid #538D4E}
body[theme=light] .letter-input.yellow.filled{background-color:#e4c640;border:2px solid #e4c640}
body[theme=light] .letter-input.grey.filled{background-color:#3A3A3C;border:2px solid #3A3A3C}
body[theme=light] .letter-input:focus{outline:none;border:2px solid #949494}
body[theme=light] .clear-btn{color:#121213 !important}
body[theme=light] .btn-outline-light{color:#121213 !important;border-color:#121213 !important}
body[theme=light] .btn-outline-light:hover{background-color:#121213;color:#fff !important}
body[theme=light] .btn-outline-warning{background-color:#ffc107;color:#121213 !important}
body[theme=light] .btn-outline-warning:hover{background-color:#fdd250}
.video-container{text-align:center;margin:20px 0}
@media (max-width:767px){.video-container{position:relative;width:100%;padding-bottom:56.25%;height:0}}
@media (max-width:767px){.video-container iframe{position:absolute;top:0;left:0;width:100%;height:100%}}
header{text-align:center;padding:10px 0}
header .logo{max-width:125px}