.flipped {
	width: fit-content;
	transform: rotateY(180deg);
	animation: hideshow 2s ease infinite -1s;
	right: 0;
}

.overlap {
	position: absolute;
	width: fit-content;
	animation-play-state: inherit;
}

.wall {
	background: white;
	width: 10px;
	/*width of 1/0*/
	height: 20px;
	/*width of 1/0*/
}

/*
@keyframes spin {
	0% {
		transform: rotateY(0deg);
	}
	50% {
		transform: rotateY(180deg);
	}
	100% {
		transform: rotateY(360deg);
	}
}

@keyframes hideshow {
	0% {
		opacity: 1.0;
	}
	50% {
		opacity: 0.0;
	}
	100% {
		opacity: 1.0;
	}
}
*/

@keyframes fade {
  0% {opacity:1.0}
  100% {opacity:0.0}
}

.shown {
	animation: hideshow 2s ease infinite;
}

.tile {
	width: fit-content;
	height: fit-content;
	animation: spin 2s ease infinite;
}

[binary-toggle] {
	display: block;
	float: left;
	margin: 10px;
  margin: 0px;
}

header {
  position: relative;
}


.coolHeaderCell.from.animated {
  animation:fade 1s infinite;
}

/*
header:nth-child(even) .coolHeaderCell .animated {
  animation:fade 1s infinite paused reverse both;
}
*/
.coolHeaderCell {
  color:hsl(0, 0%, 73%)
}

.coolHeaderCell {
  position: absolute;
  width: 20px;
  height: 20px;
  /*border: 1px solid #000;*/
  margin: 0px;
  text-align: center;

}
.rb-m,.rb-x,.rb-k {
    color: #00b8b8 !important;
    font-family: Comfortaa;
}
.rb-l,.rb-a,.rb-b,.rb-s {
    color: #ff5555 !important;
    font-family: Comfortaa;
}
.rb-colon,.rb-colon2 {
    color: #808080 !important;
    font-family: Comfortaa;
}
.rb-b2,.rb-l2,.rb-o,.rb-g {
    color: #ff8000 !important;
    font-family: Comfortaa;
}