* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body, .container, main {
	width: 100%;
	height: 100%;
}

body {
	color: white;
	background: black;

	overflow: hidden;

	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif, monospace;
	font-size: 0.9rem;
}

.main {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.dice-container {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding: 1rem;
	overflow-y: auto;
}

.dice-display {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 5rem;
	height: 5rem;
	border: 1px solid black;
	border-radius: 0.7rem;
	font-size: 1.5rem;
	font-weight: bold;
	text-shadow:
        0.07em 0 black,
        0 0.07em black,
        -0.07em 0 black,
        0 -0.07em black;
	transition: transform 0.1s ease-out;
}

.rolling {
	animation: roll 0.7s infinite;
}

@keyframes roll {
	0% {
		transform: rotateX(0deg) rotateY(0deg);
	}
	25% {
		transform: rotateX(180deg) rotateY(0deg);
	}
	50% {
		transform: rotateX(180deg) rotateY(180deg);
	}
	75% {
		transform: rotateX(360deg) rotateY(180deg);
	}
	100% {
		transform: rotateX(360deg) rotateY(360deg);
	}
}

.dice-range {
	font-size: 0.8rem;
	margin-top: 0.5rem;
}

.row {
	display: flex;
	flex-direction: row;
}

.col {
	display: flex;
	flex-direction: column;
}

.row.center, .col.center {
	justify-content: center;
	align-items: center;
}

.row.center-x {
	justify-content: center;
}

.row.center-y {
	align-items: center;
}

.col.center-x {
	align-items: center;
}

.col.center-y {
	justify-content: center;
}

.row.gap1, .col.gap1 {
	gap: 1rem;
}

.options {
	display: flex;
	gap: 1rem;

	padding: 0.4rem 0.5rem;

	background-color: #232323;
	background: linear-gradient(187deg, rgb(41, 65, 61), rgb(10, 10, 10));

	width: 100%;
	height: 16rem;

	border-top: 1px solid white;
}

.info-container {
	position: absolute;
	right: 0;

	max-width: max-content;
	height: fit-content;

	padding: 0.4rem;

	color: #232323;

	background-color: rgb(226, 226, 226);
	background: linear-gradient(30deg, rgb(123, 138, 156) 0%, rgba(255, 255, 255, 1) 87%);

	border: 2px solid #5f5f5f;
	border-right: none;

	border-radius: 1rem;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;

	transform: translate(0%, 0%);
	transition: transform 0.5s ease;
}

.info-container.hidden {
	transform: translate(100%, 0%);
	user-select: none;
}

.info-container.grabbed {
	opacity: 0.85;
	cursor: grabbing;
}

.info-container-toggle {
	visibility: visible;

	display: block;

	position: absolute;
	top: 20%;
	left: 0;

	padding: 0.5rem;

	transform: translatex(-104%);

	opacity: 0.8 !important;

	background-color: white;

	cursor: pointer;

	user-select: none;
}

.info-container-toggle:hover {
	box-shadow: 0 0 0.7rem white;
}

.info-container-toggle:hover:active {
	box-shadow: 0 0 1rem white;
}

.info .stat {
	font-weight: 900;
	color: black;
}

.info .genral-stats {
	margin-left: 0.5rem;
	margin-bottom: 0.5rem;
}

.info .stat-section-title {
	cursor: move;
	cursor: grab;

	user-select: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.info-container.grabbed .info .stat-section-title {
	cursor: -moz-grabbing;
	cursor: -webkit-grabbing;
	cursor: grabbing;
}

.inline-input {
	display: inline;
	width: fit-content;
}

.inline-input[type="number"] {
	display: inline;
	width: 3rem;
}

.dice {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	width: 10rem;
	height: 10rem;

	border: 1px solid black;
	border-radius: 0.7rem;

	background-color: var(--color);
}

.create-dice {
	width: max(50%, max-content);

	margin: 0px 1rem;
	padding: 1rem;

	border: 1px dotted gray;
	border-radius: 1rem;

	color: black;
	background-color: rgb(41, 65, 61);
}

.create-dice:has(button[type="submit"]:active) {
	filter: brightness(96%);
}

.create-dice-body {
	font-family: monospace;
	font-weight: 80;
	font-size: 2.7rem;
}

.create-dice-body-inputs {
	gap: 1rem;
}

.form-dice {
	padding: 0.4rem;
	font-size: 1.3rem;
}

.dice-range-inputs {
	font-size: 2.7rem;
}

.dice-amount-input {
	font-size: 3rem;
	gap: 1rem;
}

.clear-input {
	box-sizing: border-box;

	width: 1.5em;
	height: 1em;
	padding: 0 0.1em;

	border: none;
	outline: none;
	box-shadow: none;
	
	border-bottom: 0.06em solid black;
	background-color: transparent;
	border-radius: 0.1rem;
	
	font-size: inherit;
	text-align: center;
	
	overflow-x: visible;

	transition: border 0.3s linear;

}

.clear-input:focus {
	border-radius: 0.17rem;
	border-bottom-color: #141414;
}

.submit-button {
	padding: 0.3rem 0.5rem;
	
	font-size: 1.1rem;
	border-radius: 0.5rem;
	
	cursor: pointer;
}

.submit-button[type="submit"] {
	background-color: rgb(95, 193, 95);
}

.submit-button:hover {
	filter: brightness(110%);
}

.submit-button:active {
	filter: brightness(80%);
	scale: 1.02 1;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	opacity: 1;
}

input[type="number"].clear-input::-webkit-inner-spin-button,
input[type="number"].clear-input::-webkit-outer-spin-button {
	display: none;
}


.option-box-result {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;

	width: max-content;

	margin: 0px 1rem;
	padding: 1rem;

	border: 1px dotted gray;
	border-radius: 1rem;
}

.option-box-result.distribution {
	width: max(40%, 10rem);
}

.distribution-container {
    display: flex;
    align-items: flex-end;
    height: 9rem;
    gap: 2px;
    margin-top: 0.5rem;
    border-bottom: 2px solid white;
}

.distribution-bar {
    flex: 1;
    background: linear-gradient(to bottom, #4a90e2, #357abd);
    min-width: 20px;
    position: relative;
	height: auto;
    transition: height 0.3s ease;
}

.distribution-bar::after {
    content: attr(data-value);
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
}

.distribution-bar::before {
    content: attr(data-count);
	font-size: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
}

@media screen and (max-width: 600px) {
	.options {
		flex-direction: column;
		align-items: center;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.options > div {
		width: 99%;
	}

	.options .distribution {
		width: 100%;
		max-width: none;
		min-width: none;
		margin: 0;
	}
}