@charset "UTF-8";
/* CSS Document */

/* Background, Base */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
}

#container {
	display: flex;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background-color: rgb(39, 12, 97);
	background-image: url(https://64.media.tumblr.com/010c46067b29b710ce9a508fb4171dfb/tumblr_inline_n1ubnjJXdz1qmvw6b.gif);
}

/* Header */
#header {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 10px;
	margin: 10px;
}

h1 {
	color: aliceblue;
	font-family: "Jacquard 24", system-ui;
	font-weight: 400;
	font-style: normal;
	font-size: 100px;
}

h4 {
	color: aliceblue;
	font-family: "Jacquard 24", system-ui;
	font-weight: 400;
	font-style: italic;
	font-size: 30px;
}

/* Dice */
#diceHolder {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0px 400px 0px 400px;
}

#diceParent {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	position: relative;
	padding: 10px;
	cursor: pointer;
}

#diceChild {
	position: absolute;
	align-self: center;
}

/* D4 */
#D4 {
	height: 200px;
	width: 200px;
}
/* chat gpt did this one as well, and for all the upcoming "DxNumber" ids. */
#D4Number {
    position: absolute;
    top: 65%;
    left: 49%;
    transform: translate(-50%, -50%);
	font-family: "Jersey 15", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-optical-sizing: auto;
    font-size: 100px;
	color: aliceblue;
    display: none;
}

/* D6 */
#D6 {
	height: 200px;
	width: 200px;
}
#D6Number {
    position: absolute;
    top: 54%;
    left: 46%;
    transform: translate(-50%, -50%);
	font-family: "Jersey 15", sans-serif;
	font-weight: 400;
	font-style: normal;
    font-size: 100px; 
	color: aliceblue;
    display: none; 
}

/* D8 */
#D8 {
	height: 200px;
	width: 200px;
}
#D8Number {
    position: absolute;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
	font-family: "Jersey 15", sans-serif;
	font-weight: 400;
	font-style: normal;
    font-size: 100px; 
	color: aliceblue;
    display: none; 
}

/* D10 */
#D10 {
	height: 200px;
	width: 200px;
}
#D10Number {
    position: absolute;
    top: 43%;
    left: 50%;
    transform: translate(-50%, -50%);
	font-family: "Jersey 15", sans-serif;
	font-weight: 400;
	font-style: normal;
    font-size: 90px; 
	color: aliceblue;
    display: none; 
}

/* D12 */
#D12 {
	height: 200px;
	width: 200px;
}
#D12Number {
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
	font-family: "Jersey 15", sans-serif;
	font-weight: 400;
	font-style: normal;
    font-size: 100px; 
	color: aliceblue;
    display: none; 
}

/* D20 */
#D20 {
	height: 200px;
	width: 200px;
}
#D20Number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	font-family: "Jersey 15", sans-serif;
	font-weight: 400;
	font-style: normal;
    font-size: 80px; 
	color: aliceblue;
    display: none; 
}

/* D100 */
#D100 {
	height: 200px;
	width: 200px;
}
#D100Number {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
	font-family: "Jersey 15", sans-serif;
	font-weight: 400;
	font-style: normal;
    font-size: 70px; 
	color: aliceblue;
    display: none; 
}