:root {
	--componentSize: 600px;
	--diceSize: 130px;
}

@media screen and (max-width: 700px) {
	:root {
		--componentSize: 400px;
		--diceSize: 110px;
	}
}

@media screen and (max-width: 450px) {
	:root {
		--componentSize: 300px;
		--diceSize: 70px;
	}
}

.diceWrapper {
	/* border: 1px solid #a0a0a0; */
	display: flex;
	align-content: start;
	align-items: start;
	justify-content: center;
	flex-wrap: wrap;
	margin: 40px auto 0px auto;
	width: var(--componentSize);
	overflow: hidden;
}

.oneDice {
	flex-shrink: 0;
	width: var(--diceSize);
	height: var(--diceSize);
	margin: calc(var(--diceSize) / 14);
	background-image: linear-gradient(190deg, rgb(230,230,230) 0%, rgb(255,255,255) 100%);
	border: calc(var(--diceSize) / 50) solid rgb(180,180,180);
	border-radius: calc(var(--diceSize) / 17);
	display: grid;
	grid-template-rows:  1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;
	box-shadow: 3px 3px 3px 0px #e5e5e5;
}

.withDot {
	display: flex;
	align-items: center;
	justify-content: center;
}

.withDot::before {
	display: block;
	content: '\2022';
	font-size: calc(var(--diceSize) / 1.32);
	line-height: calc(var(--diceSize) / 4.5);
}

.wrapperAmountOfDice {
	/* border: 1px solid red; */
	text-align: center;
	width: var(--componentSize);
	font: 30px sans-serif;
	margin: 90px auto 0 auto;
}

.wrapperAmountOfDice select {
	text-align: center;
	font: 30px sans-serif;
	text-align-last: center;
	padding: 0px 40px;
	margin-top: 10px;
}

.wrapperButton {
	width: var(--componentSize);
	/* border: 1px solid red; */
	margin: 50px auto 0 auto;
	text-align: center;
}

.wrapperButton .rollDiceButton {
	font: 30px sans-serif;
	padding: 10px 20px;
	background-color: #407040;
	border: 1px solid #404040;
	border-radius: 5px;
	color: white;
}

.wrapperButton .rollDiceButton:disabled {
	background-color: #a0a0a0;
}

.info {
	width: var(--componentSize);
	margin: 20px auto 0 auto;
	font: 16px sans-serif;
	text-align: center;
	color: #103010;
}