.rolldice-container {
	 width: 25vmin;
	 aspect-ratio: 1;
	 cursor: pointer;
}
 .dice-inner {
	 position: relative;
	 width: 25vmin;
	 aspect-ratio: 1;
	 border-radius: 1vmin;
	 transform-style: preserve-3d;
	 transform-origin: 50% 50% -12.5vmin;
	 transform: rotateX(180deg) rotateY(180deg);
	 transition: transform 2s ease-in-out;
}
 .face {
	 position: absolute;
	 background: radial-gradient(circle at center, #eee, #ccc);
	 width: 25vmin;
	 aspect-ratio: 1;
	 border-radius: 1vmin;
	 transform: rotateX(0deg) rotateY(180deg);
	 transform-origin: 50% 50% -12.5vmin;
	/*backface-visibility: hidden;
	*/
}
 .face:nth-child(1) {
	 transform: rotateY(0deg);
}
 .face:nth-child(2) {
	 transform: rotateY(90deg);
}
 .face:nth-child(3) {
	 transform: rotateY(180deg);
}
 .face:nth-child(4) {
	 transform: rotateY(270deg);
}
 .face:nth-child(5) {
	 transform: rotateX(90deg);
}
 .face:nth-child(6) {
	 transform: rotateX(270deg);
}
 .point {
	 position: absolute;
	 width: 5vmin;
	 aspect-ratio: 1;
	 border-radius: 100%;
	 align-self: center;
	 justify-self: center;
	 background: #444;
	 box-shadow: inset 5px 0 10px #222;
}
 .point-top {
	 top: 2.5vmin;
}
 .point-middle {
	 top: 10vmin;
}
 .point-bottom {
	 bottom: 2.5vmin;
}
 .point-left {
	 left: 2.5vmin;
}
 .point-center {
	 left: 10vmin;
}
 .point-right {
	 right: 2.5vmin;
}
 .roll-btn {
	 padding: 1vmin 1.5vmin;
	 border: none;
	 border-radius: 1vmin;
	 cursor: pointer;
	 font-weight: bolder;
}