html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  background-color: lightgrey;
  font-family: sans-serif;
  overflow: hidden;
}

#title-bar{
  font-size: 3.5vh;
  font-weight: bold;
  display: flex;
  background-color: lightblue;
  justify-content: center;
  padding: 0.2em;
  margin: 0.25em 0.25em 0 0.25em;
  border-radius: 0.5em;
  border-width: 0.35em;
  border-color: #002244;
  border-style: solid;
  text-shadow: 1px 1px 2px gray;
  margin: 0.25em auto 0 auto;
  max-width: 100vh;
}

#window{
  display: flex;
  height: 90%;
  max-width: 105vh;
  margin: auto;
  background-color: lightgrey;
  perspective: 60em;
  perspective-origin: 40% 50%;
}

#frame-right{
  display: flex;
  flex-direction: column;
  flex:2;
  background-color: #002244;
  margin: 0.3em;
  margin-left: 0;
  padding: 0.45em;
  border-radius: 0.8em;
}

#frame-left{
  display: flex;
  flex-direction: column;
  flex:1;
  margin: 0.3em;
  /*background-color: #0000ff;*/
}

.innerframe-dice-column{
  display: flex;
  flex-direction: column;
  flex: 5;
  background-color: #002244;
  border-radius: 0.8em;
  padding: 0.5em;
}

.innerframe-top-fields{
  display: flex;
  flex-direction: row;
  flex: 6;
  background-color: white;
  /*border: solid 1px black;*/
  border-radius: 0.5em 0.5em 0 0;
}

.innerframe-bottom-fields{
  display: flex;
  flex-direction: row;
  flex: 7;
  background-color: white;
  /*border: solid 1px black;*/
  border-radius: 0 0 0.5em 0.5em;
}

.assign-buttons{
  display: flex;
  flex-direction: column;
  flex: 2;
  background-color: gray;
  border-radius: 0.3em 0 0 0.3em;
  /*border: solid 1px black;*/
  margin: 0.3em 0 0.3em 0.3em;
  padding: 0.1em;
}

.assign-button{
  cursor: pointer;  
  flex:1;
  overflow: hidden;
  font-weight: bold;
  font-size: 1.8vh;
  margin: 0.1em;
  padding: 0.7em 0.2em 0.2em 0.3em;
  padding-bottom: 0;
  background-color: lightgray;
  border-radius: 0.2em;
  text-shadow: 1px 1px 1px gray;
}

.assign-button:hover{
  background-color: #c0c0c0;
  transform: scale(0.98);
}

.assign-button-used{
  cursor: not-allowed;
  background-color: darkgray !important;
}

.assigned-points{
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: gray;
  /*border-top: solid 1px black;*/
  /*border-bottom: solid 1px black;*/
  margin: 0.3em 0 0.3em 0;
  padding: 0.1em;
}

.points-field{
  cursor: pointer;
  flex:1;
  font-weight: bold;
  font-size: 1.8vh;
  text-align: center;
  margin: 0.1em;
  padding: 0.6em;
  padding-bottom: 0;
  background-color: lightgray;
  border-radius: 0.2em;
  text-shadow: 1px 1px 1px gray;
}

.points-field:hover{
  background-color: #c0c0c0;
  transform: scale(0.95);
}


.points-field-used{
  cursor: not-allowed;
  background-color: darkgray !important;
}

.sum-points{
  display: flex;
  flex-direction: column;
  flex: 2;
  background-color: gray;
  border-radius: 0 0.3em 0.3em 0;
  /*border: solid 1px black;*/
  margin: 0.3em 0.3em 0.3em 0;
  padding: 0.1em;
}

.sum-points-field{
  flex:1;
  font-weight: bold;
  font-size: 1.8vh;
  text-align: center;
  margin: 0.1em;
  /*padding: 0.7em;*/
  background-color: lightgray;
  border-radius: 0.2em;
}

.sum-points-field-head{
  text-shadow: 1px 2px 2px gray;
  background-color: darkgray;
  padding: 0.2em;
  font-weight: bold;
  font-size: 2.2vh;
  text-align: center;
  border-radius: 0.2em 0.2em 0 0;
}

.sum-points-field-value{
  text-shadow: 1px 2px 2px gray;
  font-weight: bold;
  font-size: 4vh;
  text-align: center;
  padding-top: 0.4em;
  border-radius: 0.2em 0.2em 0 0;
}

#roll-button-frame{
  align-self: center;
  width: 100%;
  border-radius: 0.5em;
  display: flex;
  flex-flow: row;
  flex:1;
  background-color: #70AE49;
}

.roll-button-container{
  flex:1;
  display: block;
  position: relative;
}

#roll-button-counter-container{
  display: flex;
  position: absolute;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

#roll-button-counter{
  font-family: sans-serif;
  text-align: center;
  font-size: 7vh;
  margin: auto;
  text-shadow: 1px 2px 2px darkgreen;
}

#roll-button:hover{
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.4), 0 0px 0px 0 rgba(0, 0, 0, 0.19);
  transform: scale(0.95);
}

a:hover{
  transform: scale(0.95);
}

#roll-button{
  cursor: pointer;
  background-color: darkgray;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.4), 0 3px 3px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0.3em;
  max-height: 90%;
  max-width: 90%;
  width: auto;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}


#dice-frame{
  display: flex;
  flex-direction: column;
  flex:3;
  background-color: #609E39;
  margin-bottom: 0.5em;
  border-radius: 0.5em;
  padding: 0.1em;
  /*
  perspective: 30em;
  perspective-origin: 50% 50%;
  */
  
}

.dice-frame-row{
  display: flex;
  flex:1;
  justify-content: center;
  /*background-color: #FF00FF;*/
}

.dice-container{
  margin: auto;
  width: 9vh;
  height: 9vh;
}

.dice-img:hover {
  /*-webkit-filter: hue-rotate(30deg);
  filter: hue-rotate(30deg);*/
  transform: scale(0.95);
}

.dice-img{
  cursor: pointer;
  position: relative;
  display: block;
  margin: auto;
  width: 90%;
  height: 90%;
  padding: 0.0em;
  bottom: 0;
}

/*
:root {
    --dice-width: 7.5vh;
    --half-width: calc(var(--dice-width)/2);
    --half-width-inner: calc(var(--half-width)*0.95);
    
    
    var(--dice-width)
    var(--half-width)
    var(--half-width-inner)
    
}
*/

@keyframes spinX {
    0%   { transform: scale(1.1) translateY(-2em) translateZ(-3em) rotateX(0deg)   rotateY(0deg)   rotateZ(0deg);   }
    16%  { transform: scale(1.1) translateY(-2em) translateZ(-3em) rotateX(180deg) rotateY(180deg) rotateZ(0deg);   }
    33%  { transform: scale(1.1) translateY(-2em) translateZ(-3em) rotateX(360deg) rotateY(90deg)  rotateZ(180deg); }
    50%  { transform: scale(1.1) translateY(-2em) translateZ(-3em) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
    66%  { transform: scale(1.1) translateY(-2em) translateZ(-3em) rotateX(180deg) rotateY(360deg) rotateZ(270deg); }
    83%  { transform: scale(1.1) translateY(-2em) translateZ(-3em) rotateX(270deg) rotateY(180deg) rotateZ(180deg); }
    100% { transform: scale(1.1) translateY(-2em) translateZ(-3em) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}


@keyframes spin {
    0%   { transform: translateZ(8vw) rotateX(0deg)   rotateY(0deg)   rotateZ(0deg);   }
    16%  { transform: translateZ(8vw) rotateX(180deg) rotateY(180deg) rotateZ(0deg);   }
    33%  { transform: translateZ(8vw) rotateX(360deg) rotateY(90deg)  rotateZ(180deg); }
    50%  { transform: translateZ(8vw) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
    66%  { transform: translateZ(8vw) rotateX(180deg) rotateY(360deg) rotateZ(270deg); }
    83%  { transform: translateZ(8vw) rotateX(270deg) rotateY(180deg) rotateZ(180deg); }
    100% { transform: translateZ(8vw) rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

@keyframes spin-duplicate {
    0%   { transform: rotateX(0deg)   rotateY(0deg)   rotateZ(0deg);   }
    16%  { transform: rotateX(180deg) rotateY(180deg) rotateZ(0deg);   }
    33%  { transform: rotateX(360deg) rotateY(90deg)  rotateZ(180deg); }
    50%  { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
    66%  { transform: rotateX(180deg) rotateY(360deg) rotateZ(270deg); }
    83%  { transform: rotateX(270deg) rotateY(180deg) rotateZ(180deg); }
    100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

#wrapper {
    position: relative;
    display: flex;
    justify-content: space-around;
    width: 100vw;
    height: 50vh;
    perspective: 90em;
    perspective-origin: 50% -30%;
}

.dice-platform {
    display: block;
    width: 8vh;
    height: 8vh;
    margin: auto;
}

.dice {
    position: fixed;
    width: 7.5vh;
    height: 7.5vh;
    transform-style: preserve-3d;
    margin: auto;
    animation: none;  
}

.dice-0 > .side{
    background: #ff8;
    box-shadow: inset 0 0 1em #aa2;   
    /*transform: rotateX(45deg) rotateY(45deg); */
}


.dice .cover, .dice .inner {
    background: #bbb;
    box-shadow: none;
}

.dice-0 .cover, .dice-0 .inner {
    background: #ff8;
}

.dice-1{
    transform: none;  
}

.dice-2{
    transform: rotateX(-90deg);
}

.dice-3{
    transform: rotateY(-90deg);
}

.dice-4{
    transform: rotateY(90deg);
}

.dice-5{
    transform: rotateX(90deg);
}

.dice-6{
    transform: rotateX(180deg);
}

.dice-locked > .side {
    background: #f88;
    box-shadow: inset 0 0 1em #a22;    
}

.dice-animated {
    animation: spin 1s infinite linear; 
}

.dice-platform:hover >.dice > .side {
    filter: brightness(80%);
}

.side {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #eee;
    box-shadow: inset 0 0 1em #bbb;
    border-radius: 15%;
}

/*
.dice:hover > .side {
    background: #8f8;
    box-shadow: inset 0 0 1em #2a2;
}

.dice:active > .side {
    background: #f88;
    box-shadow: inset 0 0 1em #a22;
}
*/

.dice .cover {
    border-radius: 0;
}

.dice .cover.x {
    transform: rotateY(90deg) scale(0.95);
}

.dice .cover.y {
    transform: scale(0.95);
}

.dice .cover.z {
    transform: rotateX(90deg) scale(0.95);
}

.dice .front  {
    transform: translateZ(3.75vh);
}

.dice .front.inner  {
    transform: translateZ(calc(3.75vh * 0.95));
}
.dice .back {
    transform: rotateX(-180deg) translateZ(3.75vh);
}

.dice .back.inner {
    transform: rotateX(-180deg) translateZ(calc(3.75vh * 0.95));
}

.dice .right {
    transform: rotateY(90deg) translateZ(3.75vh);
}
.dice .right.inner {
    transform: rotateY(90deg) translateZ(calc(3.75vh * 0.95));
}

.dice .left {
    transform: rotateY(-90deg) translateZ(3.75vh);
}

.dice .left.inner {
    transform: rotateY(-90deg) translateZ(calc(3.75vh * 0.95));
}
.dice .top {
    transform: rotateX(90deg) translateZ(3.75vh);
}

.dice .top.inner {
    transform: rotateX(90deg) translateZ(calc(3.75vh * 0.95));
}

.dice .bottom {
    transform: rotateX(-90deg) translateZ(3.75vh);
}

.dice .bottom.inner {
    transform: rotateX(-90deg) translateZ(calc(3.75vh * 0.95));
}

.dot {
    position:absolute;
    display:block;
    width:20%;
    height:20%;
    border-radius:50%;
    background:#444;
    box-shadow:inset 5px 0 10px #000;
}


.dot.center {
    margin:40% 0 0 40%;
}

.dot.dtop {
    margin-top:10%;
}
.dot.dleft {
    margin-left:70%;
}

.dot.dright {
    margin-left:10%;
}

.dot.dbottom {
    margin-top:70%;
}

.dot.center.dleft {
    margin:40% 0 0 10%;
}

.dot.center.dright {
    margin:40% 0 0 70%;
}


#dice1, #dice4{
  align-self: flex-start;
}

#dice2, #dice5{
  align-self: flex-end;
}

#dice3{
  align-self: center;
}

.innerframe-extramenu-column{
  display: flex;
  flex-direction: column;
  flex: 2.5;
  background-color: #002244;
  border-radius: 0.8em;
  margin-top: 0.3em;
  padding: 0.25em;
}

.innerframe-menu-column{
  display: flex;
  flex-direction: column;
  flex: 2.5;
  background-color: #002244;
  border-radius: 0.8em;
  margin-top: 0.3em;
  padding: 0.25em;
}

.menubutton-container:hover{
  transform: scale(0.99);
}

.menubutton-container{
  cursor: pointer;
  display:flex;
  flex-direction: column;
  height: 100%;
  border-radius: 0.5em;
  background-color: lightgray;
  flex:1;
  align-content: center;
  justify-content: center;
  margin: 0.25em;
}

#rules-btn div{
  color : black;
  transform: none;
  text-decoration: none;
  margin: auto;
  font-weight: bold;
  font-size: 3vh;
  text-shadow: 1px 2px 1px gray;
}

#rules-btn{
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  color : black;
  transform: none;
  text-decoration: none;
}

.menubutton-container div{
  margin: auto;
  font-weight: bold;
  font-size: 3vh;
  text-shadow: 1px 2px 1px gray;
}