.key-container{justify-content:space-around;width:100%;margin:10px 0;display:flex}.key-container .circle{border-radius:50%;width:50px;height:50px;transition:all .3s;position:relative}.key-container .circle.unknown{background-color:var(--clr-grey);border:5px solid var(--clr-grey-dark)}.key-container .circle.blue{background-color:var(--clr-blue);border:5px solid var(--clr-blue-dark)}.key-container .circle.blue.pressed{background:radial-gradient(circle, white 0%, var(--clr-blue-light) 100%)}.key-container .circle.red{background-color:var(--clr-red);border:5px solid var(--clr-red-dark)}.key-container .circle.red.pressed{background:radial-gradient(circle, white 0%, var(--clr-red-light) 100%)}.key-container .circle.green{background-color:var(--clr-green);border:5px solid var(--clr-green-dark)}.key-container .circle.green.pressed{background:radial-gradient(circle, white 0%, var(--clr-green-light) 100%)}.key-container .circle.yellow{background-color:var(--clr-yellow);border:5px solid var(--clr-yellow-dark)}.key-container .circle.yellow.pressed{background:radial-gradient(circle, white 0%, var(--clr-yellow-light) 100%)}