wordl.css

:root {
    --correct-color:rgb(83, 141, 78);
    --wrong-spot-color:rgb(181, 159, 59);
    --incorrect-color:rgb(58, 58, 60);
    --ignore-color:rgb(245, 245, 245);
    --input-color: gray;
    --off-white: #FCF7F8;
    --background: #191919;
    --text-color: white;
    --bar-color: #3891A6;
    --words-visibility: "transparent";
    --gray-color: #424242;

    touch-action: pan-x pan-y;
    height: 100%;  
}

html, body {
    font-family: 'Clear Sans', 'Helvetica Neue', Arial, sans-serif;
    height: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    color: var(--text-color);
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: var(--background);
}

#container {
    top: -2.5rem;
    position: relative;
    height: 90%;
    width: min(450px, 100%);
    margin: 0;
    padding: 0;
}

/* GUESS AND ALL SUB DIVS */
/* CONATINS ALL INFO ON WORDS ENTERED & PATTERNS */
#guesses {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    margin-top: -1rem;
}

.grid {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 95%;
    flex: 45%;
}

.row {
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(630px, 100%);
    max-width: 100%;
}

.row.normal {
    height: 3.5rem;
    margin-bottom: 1px;
}

.row.testing {
    height: 2rem;
    margin: 0;
}

.tile {
    position: relative;
    flex: 1;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 0;
    border: none;
    height: 100%;
    padding: 0;
}

.row.normal > .tile {
    max-width: 3.5rem;
    margin: 0;
    margin-right: 1px;
}

.row.testing > .tile {
    font-size: 1rem;
    max-width: 2rem;
    margin: 0;
}

#next-previous-buttons {
    margin-top: .5rem;
    display: flex;
    column-gap: 1rem;
}

#next-previous-buttons button {
    text-decoration: underline;
    font-size: .95rem;
    position: relative;
    height: 3rem;
}

/* lines for arrows */
.filter::after, .undo::after {
    content: "";
    height: 7%;
    width: 20%;
    background: var(--text-color);
    position: absolute;
    bottom: 0;
}

.filter::after {
    right: 6%;
}

.undo::after {
    left: 6%;
}

/* triangle for arrows */
.filter::before, .undo::before {
    content: "";
    width: 0;
    height: 0;
    background: transparent;
    position: absolute;
    bottom: 0;
    border-top: solid 0.5em transparent;
    border-bottom: solid 0.5em transparent;
    bottom: -12%;
}

.filter::before {
    right: 5%;
    border-left: solid 0.5em var(--text-color);
}

.undo::before {
    left: 5%;
    border-right: solid 0.5em var(--text-color);
}

button {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-color);
    border: none;
    background-color: transparent;
}

select {
    border-radius: 0.125rem;
    color: var(--background);
    text-align: center;
}

#refresh {
    position: relative;
    top: 3em;
    right: 9em;
    height: 2.29em;
    width: 2em;
}

.header-button {
    position: absolute;
    z-index: 100;
    font-size: 1.25rem;
    text-align: center;

    padding: 0;
    bottom: 0;
}

.info {
    left: .5rem;
}

.test {
    right: .5rem;
}

.header-button.settings {
    left: 3rem;
}

button:not(.tile):hover, select:hover {
    filter: brightness(90%);
}

button:hover, .tile:hover, .increment:hover {
    cursor: pointer;
}

#word-entered {
    background-color: transparent;
    caret-color: white;
    border: none;
    border-bottom: solid 2px var(--correct-color);
    border-radius: none;
    color: var(--text-color);
    height: 2rem;
    font-size: 1.2rem;
    width: min(95%, 12rem);
    text-align: center;
    margin: .5rem;
    padding: 0;
    font-weight: bold;
}

#word-entered::placeholder {
    color: var(--text-color);
    font-weight: normal;
}

#word-entered:focus::placeholder {
    color: transparent;
}

*:focus {
    outline: none;
}

/* HEADING & TITLE */
/* INCLUDES TITLE @ TOP OF PAGE AND LETTER COUNT SELECTOR */
#top-of-screen {
    font-variant-caps: small-caps;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0.25rem;
    margin-top: 0.5rem;
}

#top-of-screen h1, h3 {
    margin: 0;
    padding: 0;
    font-size: 1.75rem;
}

#top-of-screen button {
    height: 2rem;
}

.screen {
    width: min(630px, 95%);
    margin: auto;
    position: absolute;
    overflow: hidden;
    text-align: center;
    background: var(--off-white);
    box-shadow: var(--gray-color) 0 0 0 1px;
    z-index: 100;
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-left: .5rem;
    padding-right: .5rem;
    max-height: 0;
    color: var(--background);
}

.screen p:not(.description) {
    margin: .75rem;
}

.screen .close {
    color: var(--background);
}

.mini-header {
    font-size: 1.5rem;
    border-bottom: solid 1px black;
    width: 90%;
    text-align: center;
    margin-top: 1rem;
}

.description {
    margin-top: 0;
    font-size: .8rem;
    color: var(--incorrect-color);
}

.info .description {
    width: 85%;
}

.top-header {
    text-align: center;
    margin-top: 1rem;
    border-bottom: solid 1px black;
    width: 90%;
}

.mini {
    font-size: .875rem;
    text-align: left;
    border-bottom: solid 1px black;
}

.hide {
    animation: hide .4s forwards;
}

.display {
    animation: display .7s forwards;
}

.test.dummy {
   display: inline; 
   color: var(--background);
}

.row.dummy {
    margin-top: .5rem;
}

.row.dummy > .tile {
    font-size: 1.5rem;
    max-width: 3.5rem;
    margin: 1px;
    aspect-ratio: 1;
}

.word-list.dummy {
    position: relative;
    width: 85%;
}

.examples {
    position: relative;
    width: 85%;
}

@keyframes hide {
    from {
        max-height: 200%;
    }

    to {
        max-height: 0;
    }
}

@keyframes display {
    from {
        max-height: 0;
    }

    to {
        max-height: 200%;
    }
}


/* ANSWERS */
/* CONTAINS ALL INFO SHOWN IN SUGGESTION BOX */
/* LIST OF BEST ANSWERS, NUMBER OF WORDS LEFT, REFRESH BUTTON */
#suggestions {
    position: relative;
    text-align: center;
    width: 100%;
    margin-top: 1rem;
    max-height: 450rem;
    border: solid 2px var(--gray-color);
    padding-top: 1rem;
    background-color: rgb(39 39 39);
}

.possibilities.total {
    text-align: center;
    margin: 0;
}

.possibilities.separated {
    font-size: .75rem;
    text-align: center;
}

.showlist {
    position: relative;
    text-decoration: underline;
}

.showlist:hover {
    cursor: pointer;
}

.showlist div {
    display: inline-block;
    position: absolute;
    width: 100%;
    font-size: .75rem;
    top: 1rem;
    overflow-y: scroll;
    max-height: 350px;
    color: var(--background);
    padding-top: .5rem;
    padding-bottom: .5rem;
}

.showlist div:not(.showlist div.visible) {
    height: 0;
    width: 0; 
    overflow: hidden;
}

.visible {
    background: var(--off-white);
    color: var(--text-color);
    border: 1px solid black;
    z-index: 100;
}

.visible p {
    /* margin-top: .5rem;
    margin-bottom: .5rem; */
    margin: 0;
}

.label {
    display: inline;
    vertical-align: middle;
}

#mode {
    margin: .75rem;
}

h3.mini-title {
    font-size: 1rem;
    text-align: center;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
    text-decoration: underline;
}

#answers {
    position: relative;
}

.best-guesses {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.back {
    z-index: -1;
    color: transparent;
    background: transparent;
    position: absolute;
    height: 0;
    width: 0;
    overflow: hidden;
}

.front {
    z-index: 99;
    color: var(--text-color);
}

.normal .word-list {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.best-guesses.hard {
    top: 0;
}

.hard > h3 {
    border-bottom: solid 1px #FCF7F8;
    width: 90%;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    font-style: italic;
}

.hard > h3:first-child {
    margin-top: .5rem;
}

ul {
    margin: 0;   
    padding: 0;
    list-style: none;
    margin-bottom: 0;
}

ul li:not(.others) {
    max-width: 100%;
    min-height: 2rem;
    flex: 1;
}

li:not(.likely, .others) {
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: pre-wrap;
}

.others {
    height: unset;
    text-align: center;
    padding: .5rem;
}

.likely {
    padding: .5rem;
    text-align: center;
    padding-bottom: 0;
}

.others, .likely {
    display: block;
}

#nowords {
    margin: 1rem;
    font-style: italic;
}

.suggestion {
    display: inline;
    left: 1rem;
    position: absolute;
    font-weight: bold;
}

.suggestion, .score, .final {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}


.score {
    display: inline;
    position: absolute;
    right: 1rem;
    font-weight: bold;
    color: rgb(101 189 94)
}

.final {
    font-weight: bold;
}

/* BOT */
/* CONTAINS ALL INFO DISPLAYED IN WORDLE BOT */
/* BAR GRAPHS, AVERAGE, SUMMARY MESSAGE, & TEST SETTINGS */
#results {
    background: rgb(18, 18, 19);
    margin: auto;
    position: absolute;
    height: 100%;
    width: min(100%, 450px);
    color: white;
    font-weight: bold;
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    column-gap: 2px;
    bottom: 0;
    justify-content: center;
    z-index: -1;
}

#results.testing {
    z-index: 99;
    color: black;
}

#suggestions.testing {
    min-height: 450px;
}

#test-settings {
    position: absolute;
    bottom: 7rem;
    width: max(280px, 75%);
    height: 50%;
    border: solid 1px black;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    row-gap: 1.5rem;
    background: var(--off-white);
    padding: .5rem;
}

button.bot {
    color: var(--background);
    text-decoration: underline;
    font-weight: bold;
    border: solid;
}

.disclaimer {
    font-size: .875rem;
    font-weight: normal;
}

#testword {
    text-align: center;
    width:7rem;
}

label {
    display: inline-block;
}

input[type=checkbox] {
    display: inline-block;
}

.close {
    position: absolute;
    top: 0rem;
    left: 0rem;
    color: var(--text-color);
    font-size: 1.25rem;
}

.close:after {
    content: "\2716";
    display: inline-block;
}

.current {
    margin: auto;
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    top: 0;
}

.average {
    position: absolute;
    top: -1.5rem;
    color: var(--off-white);
}

.bar {
    position: relative;
    background: var(--bar-color);
    color: var(--off-white);
    box-shadow: 0 0 0 2px black;
    border-bottom: none;
    text-align: center;
    display: flex;
    justify-content: center;
    flex: 1;
}

.num-guesses {
    position: absolute;
    bottom: 0;
}

.count {
    position: absolute; 
    top: -1.2rem;
}

#summary {
    font-size: 1.25rem;
    position: absolute;
    text-align: center;
    width: 85%;
    margin-top: 2.5rem;
    color: var(--off-white);
}

#wrongs {
    font-size: 1rem;
    margin: 1rem;
}

/* sliders */
.switch {
    position: relative;
    display: inline-block;
    height: 1.375rem;
    aspect-ratio: 1.765;
    margin-top: .5rem;
    margin-bottom: .5rem;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .2s;
  transition: .2s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 76.5%;
  aspect-ratio: 1;
  left: 6.67%;
  bottom: 13%;
  background-color: white;
  -webkit-transition: .2s;
  transition: .2s;
}

input:checked + .slider {
  background-color: var(--correct-color);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--correct-color);
}

input:checked + .slider:before {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
}

/* Rounded sliders */
.slider.round {
  border-radius: 100vh;
}

.slider.round:before {
  border-radius: 50%;
}

/* G --> CORRECT */
/* Y --> WRONG SPOT */
/* B --> INCORRECT */
.G {
    background: var(--correct-color);
}

.B {
    background: var(--incorrect-color);
}

.Y {
    background: var(--wrong-spot-color);
}

.X {
    background: transparent;
    border: solid 1px lightgray;
}

.W-Peaks:before { 
    content: "";
    display: inline-block;
    position: absolute;
    border-left: .5em solid transparent;
    border-right: .5em solid transparent;
    height: 0;
    width: 0;
}

.B.W-Peaks::before {
    border-top: .4em solid white;
    bottom: .15em;
}

.Y.W-Peaks::before {
    border-bottom: .4em solid white;
    top: .15em;
}

.tracker {
    height: 100%;
    margin-left: .5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.woodle-count {
    height: 40%;
    margin: 5%;
    color: var(--off-white);
    font-weight: bold;
}

.row.testing .woodle-count {
    font-size: .6125rem;
}

.links {
    text-align: center;
    font-weight: bold;
    margin-bottom: 0;
}

.github {
    height: 35px;
}

.links:last-child {
    margin-top: 0;
}

.links a {
    color: #76bfff;
}

.substitutes {
    margin-bottom: 1rem;
}

.substitutes .suggestion {
    position: relative;
    left: unset;
}

.click:hover {
    cursor: pointer;
    filter: brightness(90%);
    text-decoration: underline;
}

#hints {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

#hints.empty {
    height: 0;
}

.multi-answer {
    margin-bottom: 1rem;
    padding: .5rem;
}

.black > span {
    color: black;
}

.green > span {
    color: green;
}

.red > span {
    color: red;
}

.orange > span {
    color: orange;
}

.puple > span {
    color: purple;
}

.brown > span {
    color: brown;
}

.gray > span {
    color: gray;
}

.blue > span {
    color: blue;
}

.extra-settings {
    margin: 0;
    padding: 0;
}