body{
    font-family: Arial, sans-serif;
}
#tasks{
}
button{
    border: 1px solid black;
}
button:active{
    background-color: rgba(0,0,0,0.1);
}

#tasks h1{
    font-size: 2rem;
    margin: 0;
    padding: 0;
}

input{
    min-width:1rem;
}

input, button, span{
    font-size: 2rem;
    background-color: rgba(255,255,255,0.5);
}

input.tasks-done{
    border: 0;
    font-style: italic;
    color: grey;
    background-color: rgba(255,255,255,0.5);
}

.task{
    padding: 0.5rem;
    margin: 0.2rem;
    border-radius: 0.2rem;
    /* background-should be translucent polkadots rgba(0,0,0,0.1) */

}


/* ...or add this class to an element */
.task {
  background-image:
    radial-gradient(rgb(0,0,0,0.1) 34.4%, transparent 34.4%),
    radial-gradient(rgb(0,0,0,0.1) 34.4%, transparent 34.4%);
  background-position: 0px 0px, 44px 44px;
  background-size: 88px 88px;
  background-color: rgb(255, 51, 51);
}