style.css

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* Consistent font family */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    margin: 0;
    font-size: 1em;
    /* Standard size for body text */
    font-weight: 400;
    /* Normal weight for body text */
    color: #333333;
    /* Dark gray color for readability */
    line-height: 1.6;
    /* Line height for improved readability */
    letter-spacing: 0.5px;
    /* Slight letter spacing */
    margin: 0;
    /* Remove default margin */
    padding: 0;
    /* Remove default padding */
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10 and IE 11 */
    user-select: none;
    /* Standard syntax */
}

.h1 {
    font-size: 2.5em;
    /* Adjust size as needed */
    font-weight: 700;
    /* Bold font for emphasis */
    color: #333333;
    /* Dark gray color for readability */
    text-align: center;
    /* Center-aligning the text */
    margin-top: 10px;
    /* Add space above the heading */
    margin-bottom: 10px;
    /* Add space below the heading */
    line-height: 1.2;
    /* Line height for improved readability */
    letter-spacing: 1px;
    /* Slight letter spacing */
}

.h2 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* Consistent font family */
    font-size: 2em;
    /* Slightly smaller than h1 */
    font-weight: 600;
    /* Slightly less bold than h1 */
    color: #444444;
    /* Slightly lighter gray for differentiation */
    text-align: center;
    /* Left-aligning the text */
    margin-top: 10px;
    /* Add space above the heading */
    margin-bottom: 10px;
    /* Add space below the heading */
    line-height: 1.3;
    /* Line height for improved readability */
    letter-spacing: 0.5px;
    /* Slight letter spacing */
}

.h3 {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* Consistent font family */
    font-size: 1.75em;
    /* Slightly smaller than h2 */
    font-weight: 500;
    /* Medium boldness */
    color: #555555;
    /* Slightly lighter gray for differentiation */
    text-align: left;
    /* Left-aligning the text */
    margin-top: 10px;
    /* Add space above the heading */
    margin-bottom: 10px;
    /* Add space below the heading */
    line-height: 1.4;
    /* Line height for improved readability */
    letter-spacing: 0.5px;
    /* Slight letter spacing */
}

.small {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* Consistent font family */
    font-size: 0.875em;
    /* Smaller size for small text */
    font-weight: 400;
    /* Normal weight for small text */
    color: #666666;
    /* Medium gray color for less emphasis */
    line-height: 1.5;
    /* Line height for improved readability */
    letter-spacing: 0.5px;
    /* Slight letter spacing */
    margin: 0px;
    /* Remove default margin */
    margin-top: 10px;
    padding: 0;
    /* Remove default padding */
}

ul {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* Consistent font family */
    font-size: 1em;
    /* Standard size for list text */
    font-weight: 400;
    /* Normal weight for list text */
    color: #333333;
    /* Dark gray color for readability */
    line-height: 1.6;
    /* Line height for improved readability */
    letter-spacing: 0.5px;
    /* Slight letter spacing */
    margin: 0 0 1em 1.5em;
    /* Space below the list and indent the list */
    padding: 0;
    /* Remove default padding */
    list-style-type: disc;
    /* Default bullet point style */
}

ul li {
    margin-bottom: 0.5em;
    /* Space between list items */
}

a {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* Consistent font family */
    font-size: 1em;
    /* Standard size for links */
    font-weight: 400;
    /* Normal weight for links */
    color: #007BFF;
    /* Blue color for links */
    text-decoration: none;
    /* Remove underline */
    line-height: 1.6;
    /* Line height for improved readability */
    letter-spacing: 0.5px;
    /* Slight letter spacing */
    transition: color 0.3s ease;
    /* Smooth transition for color change */
}

.keyboard {
    display: grid;
    grid-template-columns: repeat(12, 50px);
    grid-gap: 5px;
    grid-auto-rows: 50px;
}

.key {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s;
    box-sizing: border-box;
}

.key.pressed {
    background-color: #cd1126;
    color: #fff;
}

.key.wide {
    grid-column: span 2;
    width: 105px;
}

.key.extra-wide {
    grid-column: span 3;
    width: 160px;
}

.key.space {
    grid-column: span 6;
    width: 325px;
}

.key.favorite {
    width: fit-content;
    padding-left: 10px;
    padding-right: 10px;
}

.count {
    color: #aaa;
    white-space: nowrap;
    font-size: smaller;
}