html{
    height:100%;
}

body{
    background-color: #DEDEDE;
    font-family: Sans-Serif;	
    margin:0;
    padding:0;
    height:100%;
    overflow-y:hidden;
    overflow-x:hidden;
}

#main-container{
    background-color: #FFF;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

.user_avatar{width:3vw;height:3vw;position:relative;margin:auto;float:left;padding:0 1vw 0 1vw;}
.user_avatar img{width:100%;height:100%;position:absolute;top:0;left:0;}
.oponent-avatar{float:right;}

.game {
    height:100%;
    width:70%;
    position:relative;
    float:left;
}


.game-info {
    width:100%;
    background-color: rgb(3,143,191);
    height:7%;
    padding-top:1%;
}
.active-player{
    color:white;
}

.playerinfo{
    padding-bottom:20px;
    width:30%;
}

.myblock{float:left;}
.oponentblock{float:right;}

.name {
    font-weight: bold;
    font-size: 2rem;
    margin-bottom: 1rem;
    float:left;
}

.oponent-name {
    font-weight: bold;
    font-size: 2rem;
    margin-right: 5%;
    margin-bottom: 1rem;
    text-align: right;
    float:right;
}

.players-name{margin-left:10%!important;}

.game-board {
    position:relative;
    margin-top:1%;
    width: 95%;
    height: 88%;
    background-color:#EFE996;
    background-image: url(../img/table.jpg);
    margin-left:auto;
    margin-right:auto;
}

.deck{
    text-align:center;
}

.playing-deck{
    position:absolute;
    float:left;
    top:50%;
    left:50%;
    width:17vw;
    transform:translate(0%,-50%);
}

.playing-deck .card{
    margin:0.5%;
    width:8vw;
    height:12vw;
    float:left;
}

.my-deck{
    position:absolute;
    bottom:33%;
    left:50%;
    float:left;
    width:100%;
    display: -webkit-flex; /* Safari */    
    display: flex;
}


.oponent-deck{
    position:absolute;
    top:33%;
    left:50%;
    float:left;
    width:100%;
    display: -webkit-flex; /* Safari */    
    display: flex;
    
      -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
}



.card-value{
    width:100%;
    height:100%;
}

.modal{
    position:fixed;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    background-color:#32B700;
    padding:1em;
    border:solid #268C00 5px;
    border-radius:2em;
}

.color-modal{
    display:none;
}

.modal .modal-title{
    text-align:center;
    margin-bottom: 1em;
    font-size: 2em;
}

.modal .modal-content .modal-color-choser{
    background-color:#268C00;
    border:solid #268C00 4px;
    border-radius: 4em;
    padding:0.5em;
    cursor: pointer;
    width:4vw;
    height:4vw;
}

.color-changed-modal{
    left:17%;
    top: 40%;
    width:4vw;
    height:4vw;
    display:none;
}

.color-changed-modal img{
    width:100%;
    height:100%;
}


.stop-modal{
    display:none;
}

#chat{
    position:relative;
    width:30%;
    height:100%;
    float:left;
}

.timeleft{position:relative;display:inline-block;float:right;}
#oponenttimeleft{margin-right:2em;float:left;}











































:nth-child(1) { --nth-child: 1 }
:nth-child(2) { --nth-child: 2 }
:nth-child(3) { --nth-child: 3 }
:nth-child(4) { --nth-child: 4 }
:nth-child(5) { --nth-child: 5 }
:nth-child(6) { --nth-child: 6 }
:nth-child(7) { --nth-child: 7 }
:nth-child(8) { --nth-child: 8 }
:nth-child(9) { --nth-child: 9 }
:nth-child(10) { --nth-child: 10 }
:nth-child(11) { --nth-child: 11 }
:nth-child(12) { --nth-child: 12 }
:nth-child(13) { --nth-child: 13 }
:nth-child(14) { --nth-child: 14 }
:nth-child(15) { --nth-child: 15 }
:nth-child(16) { --nth-child: 16 }
:nth-child(17) { --nth-child: 17 }
:nth-child(18) { --nth-child: 18 }
:nth-child(19) { --nth-child: 19 }
:nth-child(20) { --nth-child: 20 }
:nth-child(21) { --nth-child: 21 }
:nth-child(22) { --nth-child: 22 }
:nth-child(23) { --nth-child: 23 }
:nth-child(24) { --nth-child: 24 }
:nth-child(25) { --nth-child: 25 }
:nth-child(26) { --nth-child: 26 }
:nth-child(27) { --nth-child: 27 }
:nth-child(28) { --nth-child: 28 }
:nth-child(29) { --nth-child: 29 }
:nth-child(30) { --nth-child: 30 }
:nth-child(31) { --nth-child: 31 }
:nth-child(32) { --nth-child: 32 }

:first-child:nth-last-child(1) { --children: 1 }
:first-child:nth-last-child(2), :first-child:nth-last-child(2) ~ * { --children: 2 }
:first-child:nth-last-child(3), :first-child:nth-last-child(3) ~ * { --children: 3 }
:first-child:nth-last-child(4), :first-child:nth-last-child(4) ~ * { --children: 4 }
:first-child:nth-last-child(5), :first-child:nth-last-child(5) ~ * { --children: 5 }
:first-child:nth-last-child(6), :first-child:nth-last-child(6) ~ * { --children: 6 }
:first-child:nth-last-child(7), :first-child:nth-last-child(7) ~ * { --children: 7 }
:first-child:nth-last-child(8), :first-child:nth-last-child(8) ~ * { --children: 8 }
:first-child:nth-last-child(9), :first-child:nth-last-child(9) ~ * { --children: 9 }
:first-child:nth-last-child(10), :first-child:nth-last-child(10) ~ * { --children: 10 }
:first-child:nth-last-child(11), :first-child:nth-last-child(11) ~ * { --children: 11 }
:first-child:nth-last-child(12), :first-child:nth-last-child(12) ~ * { --children: 12 }
:first-child:nth-last-child(13), :first-child:nth-last-child(13) ~ * { --children: 13 }
:first-child:nth-last-child(14), :first-child:nth-last-child(14) ~ * { --children: 14 }
:first-child:nth-last-child(15), :first-child:nth-last-child(15) ~ * { --children: 15 }
:first-child:nth-last-child(16), :first-child:nth-last-child(16) ~ * { --children: 16 }
:first-child:nth-last-child(17), :first-child:nth-last-child(17) ~ * { --children: 17 }
:first-child:nth-last-child(18), :first-child:nth-last-child(18) ~ * { --children: 18 }
:first-child:nth-last-child(19), :first-child:nth-last-child(19) ~ * { --children: 19 }
:first-child:nth-last-child(20), :first-child:nth-last-child(20) ~ * { --children: 20 }
:first-child:nth-last-child(21), :first-child:nth-last-child(21) ~ * { --children: 21 }
:first-child:nth-last-child(22), :first-child:nth-last-child(22) ~ * { --children: 22 }
:first-child:nth-last-child(23), :first-child:nth-last-child(23) ~ * { --children: 23 }
:first-child:nth-last-child(24), :first-child:nth-last-child(24) ~ * { --children: 24 }
:first-child:nth-last-child(25), :first-child:nth-last-child(25) ~ * { --children: 25 }
:first-child:nth-last-child(26), :first-child:nth-last-child(26) ~ * { --children: 26 }
:first-child:nth-last-child(27), :first-child:nth-last-child(27) ~ * { --children: 27 }
:first-child:nth-last-child(28), :first-child:nth-last-child(28) ~ * { --children: 28 }
:first-child:nth-last-child(29), :first-child:nth-last-child(29) ~ * { --children: 29 }
:first-child:nth-last-child(30), :first-child:nth-last-child(30) ~ * { --children: 30 }
:first-child:nth-last-child(31), :first-child:nth-last-child(31) ~ * { --children: 31 }
:first-child:nth-last-child(32), :first-child:nth-last-child(32) ~ * { --children: 32 }

.base {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fan {
    display: flex;
    justify-content: center;
    align-items: center;
}

.deck .card {
    --delta: 0px;
    --dist: 600px;
    --offset: 0deg;
    --offset-amount: 2deg;
    --angle: calc(5deg * var(--children));
    --original-size: 8vw;
    --size: var(--original-size);
    position: absolute;
    width: var(--size);
    height: calc(var(--size) * 1.6);
    transform-origin: bottom;
    overflow: hidden;
    transition: border 200ms ease, transform 200ms ease, width 200ms ease, height 200ms ease;
    background-clip: content-box;
    filter: drop-shadow(4px 4px 5px #0009);
    cursor: pointer;
    
    transform:
        translateY(var(--dist))
        rotate(calc(var(--angle) / -2 + (var(--angle) / (var(--children) - 1) * (var(--nth-child) - 1)) + var(--offset)))
        translateY(calc(var(--dist) * -1 + var(--delta)));
}

.deck .card::after {
    content: '';
    position: absolute;
    top: 0.5em;
    bottom: 0.5em;
    left: 0.5em;
    right: 0.5em;
}

.deck .card:hover {
    --delta: -150px;
    --size: calc(var(--original-size) * 1.2);
    /* z-index: 10; */
}

.deck .card:only-child:hover {
    --delta: 0px;
    --size: calc(var(--original-size) * 1.2);
}

/* extra hover effects */
.deck .card:hover ~ .card {
    --offset: var(--offset-amount);
}





/* CSS talk bubble */
.talk-bubble {
    margin: auto;
    top:7%;
    display: inline-block;
    position: relative;
    width: 400px;
    font-size:3em;
    font-family:sans-serif;
    font-weight:bold;
    height: auto;
    background-color: lightyellow;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border: 8px solid #666;
    display:none
}

.talktext{
    padding: 1em;
    text-align: left;
    line-height: 1.5em;
}
.talktext p{
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
}

.talk-bubble:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: -40px;
    top: -8px;
    bottom: auto;
    border: 32px solid;
    border-color: #666 transparent transparent transparent;
}
.talk-bubble:after{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: auto;
    right: -20px;
    top: 0px;
    bottom: auto;
    border: 20px solid;
    border-color: lightyellow transparent transparent transparent;
}