#homepage {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

#homepage > div {
    width: 55vw;
    padding: 1%;
}

.topStats {
    display: flex;
    justify-content: space-between;

}

.stats {
    font-size: 1.2em;
}

.wordCount > span:hover {
    cursor: pointer;
}

#displayWords {
    display: flex;
    flex-wrap: wrap;
}

/*style each individual word span*/
#displayWords > span {
    padding: 2px 5px;
}

/*middle box styling*/
div:nth-child(2) > div{
    padding: 1%;
    min-height: 1vh;
}

.highlight {
    color: mediumpurple;
    font-weight: bold;
}

.wrongInput {
    background: rgba(193, 66, 66, 0.64) !important;
}

.selectedCount {
    border-bottom: 1px solid black;
    font-weight: bold;
}

a {
    color: black !important;
}

a:hover {
    border-bottom: 1px solid black;
}

.correctWord {
    color: green;
}

.wrongWord {
    color: red;
}