body{
    background: rgb(42,149,172);
    background: radial-gradient(circle, rgba(42,149,172,1) 24%, rgba(8,79,113,1) 84%);
}

.logo{
    padding-top: 6px;
    padding-left: 15px;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.card {
    width: 900px; /* Set the width */
    height: 750px; /* Set the height */
}

.card-body {
    height: auto; /* Set the height */
    overflow-y: auto; /* Add scroll if content exceeds height */
}

    
.type-section {
    margin-top: 30px; /* Add margin to the top of the card */
    padding-top: 20px ;
    height: auto;
    width: auto;
}

#inputf {
    padding: 13px 20px 0;
    position: absolute;
    opacity: 0;
    z-index: -99;
}

.results {
    display: flex;
    justify-content: center; /* Center horizontally */
    list-style: none;
    padding: 0;
    overflow-y: auto;
}

.results li {
    height: 100px; /* Adjust the height of each list item */
    margin: 45px; /* Adjust margin between items */
}

.results li span {
    display: grid;
    position: relative;
}

.typing-text p span {
    position: relative;
}

.typing-text p span.active {
    color: rgb(0, 0, 0);
    text-decoration: solid;
}

.typing-text p span.correct {
    color: rgba(50, 214, 5, 0.878);
}

.typing-text p span.incorrect {
    color: rgb(179, 18, 18);
    outline: 1px solid #fff;
    background-color: #ffc7c7;
    border-radius: 4px;
}

::selection {
    color: #fff;
    background: rgb(42,149,172);
}

#try-again-button {
    width: 120px; /* Set the width */
    height: 40px; /* Set the height */
}