*{
outline: none;
font-family: monospace;
}

body{
background: rgb(7,7,15);
}

h1{
text-align: center;
color: white;
}
h1 p{
font-size: 2em;
margin-bottom: 1px;
}

#words{
max-width: 1000px;
min-height: 100px;
max-height: 100px;
width: 80%;
background: none;
margin: 4vh auto auto auto;
overflow-x: hidden;
overflow-y: scroll;
text-align: center;
border: none;
scrollbar-width: none; /* For Firefox */
-ms-overflow-style: none; /* For Internet Explorer and Edge */
}

#words::-webkit-scrollbar {
  display: none; /* For Chrome, Safari, and Opera */
}


#words *{
font-family: monospace;
font-size: 28px;
}

.word{
color: gray;
}

.wrong{
color: tomato;
}

.correct{
color: #00ffae;
}

.space.wrong{
background: tomato;
white-space: break-spaces;
opacity: 0.2;
}

#caret{
position: fixed;
color: lime;
left: -1px;
top: -1px;
font-size: 29px;
font-family: monospace;
animation: blink 1s step-end infinite; /* Blinking animation */
}

@keyframes blink {
    50% {
        opacity: 0.1; /* Fade out at halfway point */
    }
}

#info{
width: 100%;
color: white;
font-size: 32px;
display: grid;
grid-template-columns: repeat(2, 1fr); /* Creates 2 equal columns */
gap: 10px;
text-align: center;
width: 70%;
max-width: 1000px;
margin: auto;
}

#speed{
  text-align: left;
}

#timeLeft{
  text-align: right;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 50vw;
  margin: auto;
  height: 10vh;
}

th, td {
  border: 1px solid #00ffae;
  padding: 8px;
  text-align: center;
  font-size: 18px;
}

th {
  background-color: #00ffae;
  word-wrap: break-word; /* Break long words */
  white-space: normal;
}

td{
  color: white;
}

#results{
  display: block;
  position: fixed;
  left: 0;
  top: 34vh;
  background: transparent;
  width: 100vw;
  height: 100%;
  text-align: center;
  backdrop-filter: blur(15px);
}

#results h1{
color: rgb(230,230,230);
}

.rotatable {
    transition: transform 1s; /* Smooth transition when not rotating */
}

.rotatable:hover {
    animation: rotate 0.8s linear infinite; /* Start rotation on hover */
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(180deg);
    }
}

.rotatable:not(:hover) {
    animation: none; /* Stop animation on hover out */
    transform: inherit; /* Maintain current rotation */
}