#keyboard-widget {
	.instructions {
		text-align: center;
		color: var(--darker-blue);
		margin-top: 2rem;
		margin-bottom: 0.5rem;
		font-family: "open sans bold", sans-serif;
	}

	svg {
		fill: transparent;
		stroke-width: 2px;
		stroke: var(--darker-blue);
		margin-bottom: 3rem;

		path {
			cursor: pointer;
			&:focus {
				fill: var(--darker-blue);
				&~text {
					fill: white;
				}
			}
		}

		text {
			pointer-events: none;
			stroke: transparent;
			fill: var(--darker-blue);
			font-weight: bold;
		}
	}

	.output {
		height: 0px;
		transition: height 300ms linear;

		.row {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-gap: 1rem;
			opacity: 0;
			transition: opacity 200ms linear;

			&.opaque {
				opacity: 1;
			}

			.cell {
				display: grid;
				grid-template-columns: min-content 1fr;
				align-items: center;
				background-color: var(--darker-blue);
				border-radius: 0.5rem;
				padding: 0.5rem 1rem;
				margin-bottom: 0.5rem;
				font-size: 1.3rem;
				color: white;
				
				&:nth-child(1), &:nth-child(2) {
					font-family: "open sans bold", sans-serif;
				}

				div.title {
					font-family: "bebas", sans-serif;
				}
				div.key, div.sequence, div.note {
					text-align: center;
				}
				div.key, div.sequence {
					font-family: sans-serif;
					font-weight: bold;
					line-height: 1.8rem;
					margin: 0px 1rem;
				}
				div.sequence {
					letter-spacing: 0.5rem;
				}
				div.note {
					font-size: 1rem;
				}
			}
		}
	}
}