/*COLOR PALETTE:*/
:root {
  --color1: #1F2421;
  --color2: #20683D;
  --color3: #49A06C;
  --color4: #9BC4AB;
  --color5: #DBE0DD;
}

body {
	background-color: var(--color5);
	margin: 0;
	color: black;
	font-family: Arial;
}

p, li, label {
	font-size: 2.125vh;
}



/*TOP NAVIGATION*/

#topnav {
	z-index: 999;
	background-color: var(--color3);
    overflow: hidden;
	padding-right: 5%;
	padding-top: 0.5vh;
}

#topnav #nav3{
	
}

.tablink {	
	float: right;
	margin: 0 2%;
	padding: 0 2%;
	border: none;
	background: none;
	color: var(--color2);
}

.active-button {
	color: var(--color2);
	background-color: var(--color4);
}



/*TAB BASIC*/

.tab-content {
	z-index: 3;
	position: fixed;
	top: 6.7vh;
	padding: 0 5%;
	width: 90%;
	display: none;
	background-color: var(--color4);
}

#tab-shadow {
	z-index: 2;
	position: fixed;
	top: 6.7%;
	width: 100%;
	height: 100%;
	background-color: black;
	opacity: 0.3;
	display: none;
}



/*ODDS*/

ul {
	column-count: 1;
	list-style: none;
	padding: initial;
}



/*STATS*/

#chart-canvas-container {
	margin-bottom: 4%;
}


/*OPTIONS*/

#settings {
    margin: 1%;
}

#dice-sides {
	width: 50%;
	margin-bottom: 2vh;
	float: left;
}

#dice-sides p {
	margin: 2.5% auto 0;
}

.setting select {
	width: 100%;
    padding: 3.5% 2.5%;
    margin: 1% 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
	font-size: 3.2vh;
}

#reset-dice {
    float: left;
    font-size: 3.0vh;
    padding: 2% 0;
    margin: 6% 5% 0;
    width: 40%;
    background-color: var(--color3);
    border-color: var(--color4);
    border-radius: 25px;
    color: var(--color1);
}

#adjust-factor {
	clear: left;
}

#adjust-factor input {
	margin-top: 2vh;
    -webkit-appearance: none;
    width: 100%;
    height: 1vh;
    border-radius: 5px;
    background: white;
    outline: none;
    transition: opacity .2s;
}

#factor::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%; 
    background: var(--color3);
    cursor: pointer;
}



/*MAIN VIEW*/

#main-view {
	margin: 0 5%;
}

#main-view h2 {
	float: left;
	font-size: 3.2vh;
}

#dice-amount {
	float: right;
}

#dice-amount p {
	margin: 30% auto 10%;
}

#dice-amount select {
    padding: 7% 2.5%;
}

.dice-box {
	padding: 1%;
	break-inside: avoid-column;
}

.dice {
	margin: 15% auto;
	background-color: #FFFFF0;
	color: black;
	border-radius: 5px;
	border: 2px solid black;
	font-size: 5.6vh;
	height: 9.3vh;
	width: 9.3vh;
	line-height: 9.3vh;
	text-align: center;
	box-shadow: 3px 3px 5px #333333;
}

#roller {
	position: fixed;
	bottom: 0;
	width: 90%;
}

#result {
	column-count: 3;
}

#roller button {
    font-size: 5.5vh;
    letter-spacing: 2px;
    margin: 3vh 0;
    width: 100%;
    background-color: var(--color3);
    border-color: var(--color4);
    border-radius: 25px;
    color: var(--color1);
}