@font-face {
	font-family: LeagueGothic;
	src: url(/fonts/LeagueGothic-Regular.ttf);
}

#demo{
  display: grid;
  place-items: center;
  user-select:none;
  background-color: rgb(0, 129, 61);
  font-family: LeagueGothic, Meiryo;
}

form{
  margin-top:2vh;
  display: grid;
  flex-wrap: wrap;
  font-size:18vw;
}
#demo ul{
  display:flex;
}
#enemy{
  width:10vw;
  margin:0 auto;
  margin-bottom:25vh;
}
#player{
  width:100%;
  display:flex;
  text-align:center;
  margin-bottom:40px;
}
#result{
  width:100%;
  font-size:9vw;
  text-align:center;
}


#demo a{
  display:inline-block;
  cursor:pointer;
  position:relative;
  top:0;
  left:0;
  text-align:center;
}

#demo ul{
  height:20vh;
}
#demo li{
  position:relative;
  top:0;
  left:0;
  text-align:center;
  width:10vw;
}
.card{
  position:relative;
  top:0;
  left:0;
  width:80px;
  height:120px;
  background-color:rgba(255,255,255,1);
  border:1px solid #000;
  border-radius:8px;
  font-size:24px;
}

.card.back{
  background-color:rgba(222,222,222,1);
}
.card.back .suit,
.card.back .num,
.card.back .suit2,
.card.back .num2{
  opacity:0;
}

.card .suit{
  position:absolute;
  top:4px;
  left:4px;
}
.card .num{
  position:absolute;
  top:28px;
  left:4px;
  min-width:24px;
}

.card .suit2{
  position:absolute;
  bottom:4px;
  right:4px;
  transform: scale(-1, -1);
}
.card .num2{
  position:absolute;
  bottom:28px;
  right:4px;
  min-width:24px;
  transform: scale(-1, -1);
}


#demo li.you{
  margin:0 8vw;
}
#demo li i.you{
  display:block;
  position:absolute;
  width:100%;
  left:0;
  bottom:-20px;
  font-size:20px;
  z-index:1;
  text-align:center;
}
#demo li a{
  position:absolute;
  top:0;
  left:0;
}
#demo li a:nth-of-type(2){
  top:-44px;
  left:25px;
}
#demo li a:nth-of-type(3){
  top:-88px;
  left:50px;
}
#demo li a:nth-of-type(4){
  top:-132px;
  left:75px;
}
#demo li a:nth-of-type(5){
  top:-176px;
  left:100px;
}

#enemy li a:nth-of-type(2){
  top:44px;
  left:-25px;
}
#enemy li a:nth-of-type(3){
  top:88px;
  left:-50px;
}
#enemy li a:nth-of-type(4){
  top:132px;
  left:-75px;
}
#enemy li a:nth-of-type(5){
  top:176px;
  left:-100px;
}





#demo a.select{
  transform: translate(0px, -10px);
}

#demo:not(.select) a:hover{
  background-color:rgba(0,0,0,0.5);
}