.ws { display: flex; flex-direction: column; justify-content: center; align-items: center; } .ws .errMessage { display: none; } .ws .forms_data { border: 2px solid rgba(0, 0, 0, 1); padding: 0px 25px; padding-top: 15px; text-align: center; box-shadow: 2px 3px 0px 0px #000000FC; border-radius: 13px; } .forms_data .wordleSolver-label { font-size: 14px; font-weight: 600; } .forms_data .wordleSolver-field { border-radius: 5px; margin: 0 5px 0 0 !important; font-size: 30px; text-transform: uppercase; text-align: center; width: 48px; height: 48px; line-height: 55px; font-weight: bold; border: 1px solid rgba(0, 0, 0, 0.1); background: #fff; padding: 0 !important; outline: none !important; } .forms_data .wordleSolver-field:focus { box-shadow: unset !important; /* border-color: #ced4da !important; */ } #addMore { font-size: 25px; background-color: transparent; border: none; width: 100%; text-align: right; padding-right: 2px; } .wordlesolver-btn { padding: 8px 25px; font-size: 15px; background-color: #FFB21D; border-color: #FFB21D; /* color: #fff; */ border-radius: 7px; width: 111px; font-weight: 900; border: 2px solid black; } .wordlesolver-btn:focus { outline: none; box-shadow: unset !important; } .wordlesolver-btn:hover { color: #fff; } .createWordleLink { text-align: center; display: block; /* box-shadow: 0 0 1px rgb(0 0 0 / 10%); */ border: 2px solid black; padding: 10px 15px; width: 320px; background: #FFB21D; border-radius: 20px; font-size: 15px; margin-bottom: 2rem; margin: 5px auto; box-shadow: 1px 1px 0px 0px #000000FC; color:#000 !important } .createWordleLink:hover{ text-decoration: none; } .allGroupWords { background-color: #fff!important; width: auto; height: auto; border-radius: 15px; box-shadow: 0 0 2px rgba(0,0,0,.2); margin: 10px 0; border: 2px solid var(--black-color); } .allfiveletterswords { background-color: #fff!important; width: auto; height: auto; border-radius: 15px; box-shadow: 0 0 2px rgba(0,0,0,.2); margin: 10px 0; border: 2px solid var(--black-color); } .allfiveletterswords>.wordListHeading { background: var(--black-color); padding: 10px 0 5px 25px; border-top-right-radius: 13px; border-top-left-radius: 13px; color: #fff; } .wordList .anchor__style { color: #000!important; font-size: 15px; text-decoration: none!important; font-weight: 600; } #wordleWordCount { font-size: 18px; /* width: 75%; */ margin: 10px auto; } .ws-fcs { color: #fff !important; background-color: #20a815 !important; } .ws-fcs2 { color: #fff !important; background-color: #C59E28 !important; } .ws-fcs3 { color: #fff !important; background-color: #3D3D3E !important; } .wordList>ul li{ padding: 8px 0; background: #f8f9fa; border-radius: 5px; margin: 6px 6px; width: auto; min-width: 100px; text-align: center; border: solid 1px var(--black-color) !important; box-shadow: 2px 2px 1px 0 var(--black-color) !important; } .related_post_heading { width: 100%; font-size: 46px; text-align: left; font-weight: 800; font-stretch: normal; font-style: normal; line-height: 1.24; letter-spacing: normal; color: #11304e; margin-bottom: 45px; padding-top: 75px; display: inline-block; } #wordleSolvererrorMsg { margin: 10px auto; width: 75%; } .refineSerach { text-align: center; display: none; box-shadow: 0 0 1px rgb(0 0 0 / 10%); border: none; padding: 10px 15px; width: 320px; background: #20a815; border-radius: 20px; font-size: 15px; margin-bottom: 2rem; margin: 5px auto; color: #fff; } .refineSerach:hover { color: #fff !important } @media (max-width: 768px) { #wordleSolverData{ display: flex; justify-content: center; align-items: center; } .allfiveletterswords, #wordleWordCount { width: 80%; } }