styles.css

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap");

:root {
  --color-red: #ec1840;
  --color-purple: #7a18ec;
  --color-white: #fff;
  --color-black-1: #111;
  --color-black-2: #222;
  --color-black-3: #444;
}
html, body {
	font-family: Verdana, Geneva, sans-serif;
	overflow: visible;
	flex-direction: column;
	justify-content: space-around;
	height: 100%;

        /* prevent selection of text, images, or other things */
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;
}
.top {
	display: flex;
	justify-content: space-between;
	margin: 20px 20px 0 20px;
}
div.clock-container {
	display: flex;
	justify-content: flex-end;
}
div.clock {
	float: right;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 24px;
	color: var(--green);
	text-align: center;
}
.playground-buttons-container {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	width: 250px;
	height: 150px;
}
.content {
	margin-top: 60px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
div.block {
	width: 220px;
	height: 220px; 
	background-color: darkslategray;
	box-shadow: 1 1 1 1px black;
	border-radius: 20px;
	-webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
    transition: 1s ease-in-out;
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
}
div.word {
	width: 200px;
	height: 200px; 
	background-color: blue;
	box-shadow: 1 1 1 1px lightgrey;
}
.rotated-1 {
    transform: rotate(60grad);
}
.rotated-2 {
    transform: rotate(120grad);
}
.rotated-3 {
    transform: rotate(400grad) scale(1.25);
	margin-top: 100px;
}
.rotated-4 {
    transform: rotate(240grad);
}
.rotated-5 {
    transform: rotate(120grad);
	margin-top: 100px;
	margin-left: 200px;
}
div.new_child {
	width: 40px;
	height: 40px;
	background-color:  slategrey;
	opacity: .5;
	box-shadow: 5px 5px 5px var(--color-black-1);
	z-index: 2;
	border-radius: 50%;
	margin: 15px;
}
div.jsFetchStatus {
	margin-top: 50px;
	color: var(--color-black-1);
	min-width: 250px;
	padding: 10px;
	height: 30px;
	z-index: 2;
}