canvas {
    border: 1px solid black; 
    top: 0;
    bottom: 0;
    left: 50;
    right: 50;
  }

.row{
    display: flex;      
}
  .w3-container {
    margin: 0 auto;
    width: 80%;
}

button {
  margin: 1px;
  border-radius: 4px;
  background-color: white;
  border: 2px solid #04AA6D;
}

#todoDiv, #ohjeDiv, #statsDiv {
  display: none;
}

button {
    transition-duration: 0.4s;
  }

button:focus {
    color: black;
}

@media (pointer: fine) {
  button {
    /* Styles for pointing devices */
  }

button:hover {
    background-color: #04AA6D; /* Green */
    color: white;
  }
}
button:active {
  color: orange;
}
  
h2 {
    text-align: left;
}

#tila, #noWrap {
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap;
}

footer{ 
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

#ball {
  width: 24px;
  height: 24px;
  border-radius: 50%;  /* Makes the shape a circle */
  background-color: black; /* Initial green color */
  border: 1px solid #000;
  position: static;
  margin-left: 25px;
  transform: translate(-50%, -50%);
}