*, *::before, *::after {
	box-sizing: inherit;
}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
html {
	box-sizing: border-box;
}
body {
	background-color: #e8e8e8;
    display: grid;
    place-items: center;
}
#container {
    display: grid;
    width: min(90vh, 90vw);
    height: min(90vh, 90vw);
}
#container .tile {
    position: relative;
    width: 100%;
    height: 100%;
    mix-blend-mode: darken;
}
#container .tile > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    mix-blend-mode: darken;
}
#container .red { background: #f30; }
#container .blue { background: #0cf; }
#container .grey { background: #bbb; }

@keyframes forward {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes backward {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}
[data-o="false"] { animation: 8s cubic-bezier(.9, 0, .1, 1) 10 normal forward; }
[data-o="true"] { animation: 8s cubic-bezier(.9, 0, .1, 1) 10 normal backward; }