style.css

/* Apply Montserrat font to all elements and reset padding */
* {
    font-family: 'Montserrat', sans-serif;
    padding: 0;
}

/* Style for h2 elements */
h2 {
    font-size: 1.8rem;  
    margin: 0.5rem 0;  
}

/* Style for span elements */
span {
    font-size: 1.5rem;  
}

/* Define classes for color styles */
.white {
    color: white;  
}

.green {
    background: green;  
    opacity: 1;  
}

.red {
    background: red; 
    opacity: .5;  
}

/* Define the cursor element */
.cursor {
    width: 2px; /* Set width of the cursor */
    height: 20px; /* Set height of the cursor */
    background: rgb(79, 79, 79);  
    animation: blink 0.8s step-end infinite; /* Define blinking animation */
    opacity: .8;  
}

/* Define the blinking animation for cursor */
@keyframes blink {
    from, to {
        opacity: 1; /* Hide the cursor at the beginning and end of the animation */
        background-color: rgba(77, 75, 75, 0.669);  
    }
    50% {
        opacity: .8; /* Show the cursor at the midpoint of the animation */
        background-color: rgba(109, 104, 104, 0.6);  
    }
}

/* Body styles */
body {
    font-family: 'Montserrat', sans-serif;  
    font-size: 1rem;  
    color: #FFFFFF;  
    -webkit-transition: all 200ms linear;  
    transition: all 200ms linear;  
    text-rendering: optimizeLegibility !important;  
    -webkit-font-smoothing: antialiased !important; /* Apply anti-aliasing */
    scroll-behavior: smooth; /* Enable smooth scrolling */
    background-color: #1f2029;  
    background: url("./assets/imgs/Animated-Shapes.svg");  
    background-attachment: fixed;  
    background-position: center;  
    background-repeat: repeat;  
    padding: 0 1rem;  
}

/* Styles for text input field with id 'query' */
#query {
    width: 99%;  
    display: flex; 
    justify-content: center;  
    align-items: center; 
    margin-top: 1rem; 
    font-size: 1.4rem;  
    height: 5rem;  
}

/* Styles for score, accuracy, WPM, and timer elements */
#score, #accuracy, #wpm, #timer {
    font-size: 1.8rem;  
}

/* Styles for start buttons */
#start {
    margin: 0.5rem 1rem 0.5rem 0;  
    font-size: 1.25rem; 
    height: 3rem; 
}

/* Styles for title element */
#title {
    font-size: 3rem;  
    text-align: center;  
}

/* Styles for the container element with id 'words' */
#words {
    padding: 10px 0;
}

/* Button CSS styles */
.button-54 {
    font-family: "Open Sans", sans-serif;  
    font-size: 1rem;  
    letter-spacing: 2px;  
    text-decoration: none;  
    text-transform: uppercase;  
    color: #000; 
    cursor: pointer;  
    border: 3px solid; 
    padding: 0.25em 0.5em; 
    box-shadow: 1px 1px 0px 0px, 2px 2px 0px 0px, 3px 3px 0px 0px, 4px 4px 0px
}

.button-54:active {
   box-shadow: 0px 0px 0px 0px;
   top: 5px;
   left: 5px;
}

@media (min-width: 768px) {
    .button-54 {
      padding: 0.25em 0.75em;
    }
}