@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@200&family=Space+Mono&display=swap" rel="stylesheet');
@import url('https://fonts.googleapis.com/css2?family=Tillana:wght@400;600&display=swap');
:root{
    --space-mono-font: 'Space Mono', monospace;
    --border-dark-subtle: #373838;
    --font-tillana:'Tillana', cursive;
}
*{
    box-sizing: border-box;
}
body *{
    font-family: var(--space-mono-font);
}
/**
Page Design
*/
.page-title{
    font-size: 2.5rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: 3px;
    font-family: var(--secular-font);
    text-align: center;
    text-shadow: 0px 0px 3px #2020208c;
}
.border-dark-subtle{
    border-color: var(--border-dark-subtle) !important;
}
 
/* Dice Container */
 
.dice-container {
    position: relative;
}
 
/* Dice Element */
 
.dice{
    position: relative;
    width:100px;
    height:100px;
    transform-style: preserve-3d;
    transition: transform 1s;
}

/* Dice Faces */
.dice-face{
    position: absolute;
    width:100px;
    height:100px;
    padding: 5px;
    border: 1px solid #838383;
    border-radius: 5px;
    background-color: #282A3A;
    backface-visibility: hidden;
}
/* Dice Dots */
.dot{
    /* position: absolute; */
    height: 15px;
    width: 15px;
    background-color: #fff;
    border-radius: 50% 50%;
    box-shadow: 0px 0px 5px #ffffff94;
}
 
/* Organizing Dice Faces Dots */
.dice-face[data-face="1"]{
    display: flex;
    align-items: center;
    justify-content: center;
}
.dice-face[data-face="2"]{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.dice-face[data-face="3"]{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}
.dice-face[data-face="3"] .dot:nth-child(1){
    transform: translateX(-25px);
}
.dice-face[data-face="3"] .dot:nth-child(3){
    transform: translateX(25px);
}
.dice-face[data-face="4"]{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
}
.dice-face[data-face="4"] .dot:nth-child(1){
    transform: translate(7px, -20px);
}
.dice-face[data-face="4"] .dot:nth-child(2){
    transform: translate(36px, -20px)
}
.dice-face[data-face="4"] .dot:nth-child(3){
    transform: translate(-34px, 22px)
}
.dice-face[data-face="4"] .dot:nth-child(4){
    transform: translate(-5px, 22px)
}
 
.dice-face[data-face="5"]{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
}
.dice-face[data-face="5"] .dot:nth-child(1){
    transform: translate(7px, -24px);
}
.dice-face[data-face="5"] .dot:nth-child(2){
    transform: translate(45px, -24px)
}
.dice-face[data-face="5"] .dot:nth-child(3){
    transform: translate(1px, 1px)
}
.dice-face[data-face="5"] .dot:nth-child(4){
    transform: translate(-45px, 24px)
}
 
.dice-face[data-face="5"] .dot:nth-child(5){
    transform: translate(-8px, 24px)
}
.dice-face[data-face="6"] {
    display: grid;
    grid-template-columns: auto auto;
    gap: 2px 15px;
}
.dice-face[data-face="6"] .dot {
    transform: translate(10px, 7px);
}
 
 
/* Dice Face to show if Face value is set */
 
.dice-face[data-face="1"] {
    transform: translateZ(3.1em);
}
   
.dice-face[data-face="6"] {
transform: rotateY(90deg) translateZ(3.1em);
}
 
.dice-face[data-face="3"] {
transform: rotateY(-90deg) translateZ(3.1em);
}
 
.dice-face[data-face="4"] {
transform: rotateX(90deg) translateZ(3.1em);
}
 
.dice-face[data-face="5"] {
transform: rotateX(-90deg) translateZ(3.1em);
}
 
.dice-face[data-face="2"] {
transform: rotateY(-180deg) translateZ(3.1em);
}
 
/* Dice Rolling Animation */
 
.dice.rolling{
    animation:roll 1.2s ease-in-out infinite
}
@keyframes roll{
    0%{
        transform: rotateX(0deg) rotateZ(0deg);
    }
    25%{
        transform: rotateX(90deg) rotateZ(90deg);
    }
    50%{
        transform: rotateX(180deg) rotateZ(180deg);
    }
    75%{
        transform: rotateX(360deg) rotateZ(360deg);
    }
    100%{
        transform: rotateX(180deg) rotateZ(180deg);
    }
}
.dice[data-face="1"]{
    transform: rotateX(0deg) rotateZ(0deg);
}
.dice[data-face="2"]{
    transform: rotateX(180deg) rotateZ(0deg);
}
.dice[data-face="3"]{
    transform: rotateY(90deg) rotateZ(0deg);
}
.dice[data-face="4"]{
    transform: rotateX(270deg) rotateZ(0deg);
}
.dice[data-face="5"]{
    transform: rotateX(90deg) rotateZ(0deg);
}
.dice[data-face="6"]{
    transform: rotateY(270deg) rotateZ(0deg);
}