@font-face {
	font-family: LeagueGothic;
	src: url(/fonts/LeagueGothic-Regular.ttf);
}
#demo{
  position:relative;
  left:0;
  top:0;
  background-color:rgb(0, 129, 61);
  font-family: LeagueGothic, Meiryo;
  user-select:none;
}
ul{
  display:flex;
  width:100%;
  min-height:9vh;
}
ul li{
  flex-grow: 1;
  width:100%;
  text-align:center;
  vertical-align:bottom;
  background-color:#fff;
  border-radius:8px;
  margin:2px;
  font-size:24px;
  position:relative;
  left:0;
  top:0;
}
ul li b{
  font-size:32px;
}

li.hit{
  background-color:#faa;
}

/*chip*/
c{
  display:inline-block;
  width:16px;
  height:12px;
  background-image:url(chip.png);
  background-size:cover;
  position:absolute;
  left:2px;
  bottom:8px;
  border-radius:50%;
}
c:nth-of-type(1){
  bottom:8px;
}
c:nth-of-type(2){
  bottom:12px;
}
c:nth-of-type(3){
  bottom:16px;
}
c:nth-of-type(4){
  bottom:20px;
}
c:nth-of-type(5){
  bottom:24px;
}

li o{
  position:absolute;
  right:2px;
  bottom:9px;
  font-size:16px;
  color:#999;
}
.dice{
  display:inline-block;
  width:8vmin;
  height:8vmin;
  max-width:100%;
}
.d1{
  background-image:url(/demo/-js/js-number-random-dice/dice-1.svg);
}
.d2{
  background-image:url(/demo/-js/js-number-random-dice/dice-2.svg);
}
.d3{
  background-image:url(/demo/-js/js-number-random-dice/dice-3.svg);
}
.d4{
  background-image:url(/demo/-js/js-number-random-dice/dice-4.svg);
}
.d5{
  background-image:url(/demo/-js/js-number-random-dice/dice-5.svg);
}
.d6{
  background-image:url(/demo/-js/js-number-random-dice/dice-6.svg);
}
.d0{
  background-image:url(/demo/-js/js-number-random-dice/dice-0.svg);
}

@media (max-width: 900px) {
  .dice{
  width:4vmin;
  height:4vmin;
  }
}

#result{
  position:relative;
  left:0;
  top:0;
  min-height:16vh;
  background-color:#fff;
  text-align:center;
  border-radius:8px;
  margin:2px;
  font-size:48px;
  cursor:pointer;
}

#result .dice{
  min-width:16vmin;
  min-height:16vmin;
}
#result .dice-total{
  position:absolute;
  left:12px;
  top:12px;
}

#score{
  color:#fff;
  font-size:32px;
  text-align:center;
}





.anim-dice {
  display:inline-block;
  position:relative;
  margin:1vmin auto;
  width:8vmin;
  height:8vmin;
  transform-style:preserve-3d;
  transform:rotateX(360deg) rotateY(360deg) rotateZ(720deg);
  animation:rotate-animation 1s linear infinite;
}

.anim-dice .item {
  position:absolute;
  left:0;
  right:0;
  box-sizing:border-box;
  width:100%;
  height:100%;
  background-color:rgba(255,255,255,0.99);
  background-size:cover;
}

.anim-dice .item:nth-child(1) {
  transform:translate3d(0, -4vmin, 0) rotateX(-90deg);
  background-image: url(../js-number-random-dice/dice-1.svg);
}

.anim-dice .item:nth-child(2) {
  transform:translate3d(0, 0, 4vmin);
  background-image: url(../js-number-random-dice/dice-2.svg);
}

.anim-dice .item:nth-child(3) {
  transform:translate3d(4vmin, 0, 0) rotateY(90deg);
  background-image: url(../js-number-random-dice/dice-3.svg);
}

.anim-dice .item:nth-child(4) {
  transform:translate3d(-4vmin, 0, 0) rotateY(-90deg);
  background-image: url(../js-number-random-dice/dice-4.svg);
}

.anim-dice .item:nth-child(5) {
  transform:translate3d(0, 0, -4vmin) rotateY(180deg);
  background-image: url(../js-number-random-dice/dice-5.svg);
}

.anim-dice .item:nth-child(6) {
  transform:translate3d(0, 4vmin, 0) rotateX(-90deg);
  background-image: url(../js-number-random-dice/dice-6.svg);
}

@keyframes rotate-animation {
  from {
    transform:rotate3d(0);
  }

  to {
    transform:rotate3d(1, 1, 1, -360deg);
  }
}

h2{
  font-size:24px;
  background-color:#fff;
  margin:2px;
  padding:8px;
  border-radius:8px;
}

#other{
  padding:8px;
  background-color:rgb(0, 129, 61);
}