.share-tech-mono-regular {
    font-family: "Share Tech Mono", monospace;
    font-weight: 400;
    font-style: normal;
}
  
.orbitron {
font-family: "Orbitron", sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-style: normal;
}

.silkscreen-regular {
  font-family: "Silkscreen", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.silkscreen-bold {
  font-family: "Silkscreen", sans-serif;
  font-weight: 700;
  font-style: normal;
}

  
h1{
    font-family: 'orbitron';
    font-size: 4rem;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

h2{
  font-family: 'orbitron';
  font-size: 2rem;
  margin-bottom: 0px;
  padding-bottom: 20px;
}


#subtitle_web{
    padding: 0px;
    margin-top: 0px;
    font-size: 2rem;
    font-family: "Share Tech Mono", monospace;}

.centerDice{
    align-items: center;
}

.diceNumberTemplate{
    font-family: 'orbitron';
    font-size: 5rem;
    text-align: center;
    padding-bottom: 0%;
    margin-bottom: 0%;
    color: var(--largeNumber)
}

img{
  max-height: 80%;
  max-width: 60%;  
}

/* CSS BUTTON */
#rollDiceButton {
    align-items: center;
    background-color: var(--text);
    border: 2px solid #111;
    border-radius: 8px;
    box-sizing: border-box;
    margin-bottom: 3%;
    cursor: pointer;
    display: flex;
    font-family: 'orbitron';
    font-size: 1.7rem;
    height: 78px;
    justify-content: center;
    line-height: 24px;
    max-width: 100%;
    padding: 0 25px;
    position: relative;
    text-align: center;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }
  
  #rollDiceButton:after {
    background-color: var(--bs-background-button);
    border-radius: 8px;
    content: "";
    display: block;
    height: 78px;
    left: 0;
    width: 100%;
    position: absolute;
    top: -2px;
    transform: translate(8px, 8px);
    transition: transform .2s ease-out;
    z-index: -1;
  }
  
  #rollDiceButton:hover:after {
    transform: translate(0, 0);
  }
  
  #rollDiceButton:active {
    background-color: var(--inner-rollButton);
    outline: 0;
  }
  
  #rollDiceButton:hover {
    outline: 0;
  }

  .col1to3{
    flex: 0 0 33.33333%;
    max-width: 33.33333%
  }

#numberDices{
  background-color: rgb(235, 232, 232);
  border: 2px solid #111;
  border-radius: 8px;
  box-sizing: border-box;
  color: #111;
  margin-bottom: 3%;
  display: flex;
  font-family: 'orbitron';
  font-size: 1rem;
  height: 100%;
  justify-content: center;
  line-height: 14px;
  padding: 0 25px;
  position: relative;
  text-align: center;
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* TOGGLE FOR COLOR */

#hide-checkbox {
  opacity: 0;
  height: 0;
  width: 0;
}

.toggle {
  position: relative;
  cursor: pointer;
  width: 50px;
  height: 20px;
  background: orange;
  border-radius: 50px;
  transition: 500ms;
  overflow: hidden;
}

.toggle-button {
  position: absolute;
  display: inline-block;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  transition: all 500ms ease-out;
}

#hide-checkbox:checked + .toggle {
  background: white;
}


/* COLOR BACKGROUND BUTTON CONTROLLER */

:root {
  --background-dice-button-light: rgb(61, 61, 61); /* Light theme primary color */
  --background-dice-button-dark: rgb(204, 203, 203); /* Dark theme primary color */
  --largeNumber-dark: rgb(2, 146, 182);
  --largeNumber-light: #FF7477;
  --text-light: #FF7477;
  --text-dark:rgb(2, 146, 182);
  --inner-rollButton-light: white;
  --inner-rollButton-dark: #E9D78C;
}

[data-bs-theme="light"] {
  --bs-background-button: var(--background-dice-button-light);
  --largeNumber: var(--largeNumber-light);
  --text: var(--text-light);
  --inner-rollButton: var(--inner-rollButton-light);
}

[data-bs-theme="dark"] {
  --bs-background-button: var(--background-dice-button-dark);
  --largeNumber: var(--largeNumber-dark);
  --text: var(--text-dark);
  --inner-rollButton: var(--inner-rollButton-dark);
}