:root {
	--peg-size: 30px;
	--slot-size: 30px;
	--pin-size: 5px;

	--c-normal: #555;
	--c-active: #888;


}

body, body * {
	box-sizing: border-box;
}
body {
	background: #333;
	padding: 15px;
  padding-top: 200px;
	}

.game {
	width: 320px;
	margin: 0 auto;
	padding: 0px;
}

.controls-row {
	 display: flex;
	 align-items: center;
	 justify-content: space-between;
	 width: 100%;
	 padding: 0 0 20px 0;

}
.control {
	 border-radius: 50%;;
	 width: var(--peg-size);
	 height: var(--peg-size);
}

.game-board {
	min-height: 400px;
}

.guess-row {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin: 0 0 10px;
}

.guess-slot {
	border: solid 2px var(--c-normal);
	border-radius: 50%;
	height: var(--slot-size);
	display: block;
	width: var(--slot-size);
	transition: all .2s linear;
}

.guess-row.active .guess-slot,
.guess-row.active . {
	border-color: var(--c-active);
}

.guess-row.complete ,guess-slot {
	opacity: 0.6;
}

.guess-slot.hovered {
	border: 1px solid white;
	transform: scale(1.25);
}


.row-score {
	display: flex;
	flex-wrap: wrap;
	height: var(--slot-size);
	width: var(--slot-size);

}

.row-score__pin {
	border-radius: 50%;
	display: block;
	height: var(--pin-size);
	width: var(--pin-size);
	margin: 3px;
	border: 1px solid var(--c-normal);
}


/* correct color, correct position */
.row-score__pin--correct {
	background-color: red;
	border-color: transparent;
}

/* Right color, wrong position */
.row-score__pin--close {
	background-color: white;
	border-color: transparent;
}

.row-score__pin--incorrect {
	background-color: var(--c-normal);
	border-color: transparent;
}