#opponents-container {
    width: 100%;
    padding: 10px;
    position: fixed;
    text-align: center;
    max-height: 204px;
    overflow: hidden;
    z-index: -1;
}
/* Game Table */
#game_table_board {
    background: #394E67;
    border-radius: 10px;
    text-align: center;
    padding: 20px;
    color: white;
    padding-top: 30px;
    font-size: 40px;
    position: fixed;
    width: 500px;
    min-height: 60px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* HOST SETTINGS */
.host_setting {
    display: block;
    font-size: 24px;
    margin: 1em;
}
.host_setting input {
    height: 1.2em;
}
.feature_warning {
    background: darkred;
    font-size: 15px;
    padding: 1em;
}

/* HOST RULES BOARD */
#host_rules_board {
    background-color: #2d3c50;
    border: none;
    padding-bottom: 40px;
    text-align: center;
    border-radius: 15px;
    padding: 10px;
    /* To fight the inline-block display of rules */
    padding-bottom: 20px;
}
#host_rules_board h4 {
    margin: 0;
}
#room_rules_container {
    padding: 0px;
    margin: 0px;
}
#room_rules_container span {
    background-color: white;
    font-size: 12px;
    color: black;
    display: inline-block;
    border-radius: 0.2em;
    padding: 0.8em;
    text-shadow: 0px 0px 1px #818181;
    margin: 0.2em;
    margin-top: -10px;
    margin-bottom: -10px;
}
#add_rule_input {
    font-size: 12px;
    display: block;
    padding: 1em;
    border: none;
    margin-left: auto;
    margin-right: auto;
}
#waiting_message {
    background: white;
    color: black;
    padding: 0.4em;
    border-radius: 0px 0px 8px 8px;

    width: 40vh;
    position: fixed;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 4vh;
}
#host_controls {
    padding: 20px;
}
.opponent_hand {
    text-align: center;
    white-space: nowrap;
    width: 100%;
    margin: 0px;
    padding: 0px;
    margin-top: 0.2vw;
    overflow: hidden;

}
.opponent_hand img {
    height: 3vw;
    margin-right: -10px;
    transition: all .4s;
}
.hovercard {
    margin-right: 5px;
}
#game_table {
    z-index: -1;
    position: fixed;
    width: 50vh;
    height: 50vh;
    top: 50%;
    left: 50%;
    margin-top: -25vh; /* Negative half of height. */
    margin-left: -25vh; /* Negative half of width. */
}
#game_table_arrow {
    z-index: -1;
    position: fixed;
    width: 72vh;
    height: 72vh;
    top: 50%;
    left: 50%;
    margin-top: -36vh; /* Negative half of height. */
    margin-left: -36vh; /* Negative half of width. */
    animation: 5s spin linear infinite;
    pointer-events: none;
}
#table_card_container {
    position: fixed;
    width: 500px;
    height: 500px;
    top: 50%;
    left: 50%;
    margin-top: -250px; /* Negative half of height. */
    margin-left: -250px; /* Negative half of width. */
    text-align: center;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes rev_spin {
    0% { transform: rotate(360deg) scaleX(-1); }
    100% { transform: rotate(0deg) scaleX(-1); }
}

.opponent_display {
    display: inline-block;
    text-align: left;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
    margin: 10px;
    background: rgba(236, 240, 241,1.0);
    width: 200px;
    padding: 10px;
    border-radius: 10px;
    height: 150px;
    overflow: hidden;
}

.avatar {
    display: inline-block;
    vertical-align: middle;
    width: 80px;
    height: 80px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
  }

  canvas {
    width: 100%;
  }

.card {
    min-width: 85px;
    width: 12vh;
    transition: .2s;
    margin: 0px;
    display: inline-block;
    margin-right: -8vh;
    transform: rotate(0deg) translate(0px, 2vh);
    animation: .4s cardAdd cubic-bezier(.32,.89,.37,.96);
    animation-fill-mode: both;
    filter: drop-shadow(0px 0px 5px rgba(0,0,0,0.25))
}
.card:hover {
    margin-right: 0vh;
    transform: rotate(-4deg) translate(0vh, -0.5vh);
}
.card:last-child:hover {
    margin-right: -8vh;
    transform: rotate(-4deg) translate(0vh, -0.5vh);
}
@keyframes cardGlow {
    0% {filter: drop-shadow(0px 0px 0px #FFC72D)}
    50% {filter: drop-shadow(0px 0px 16px #FFC72D)}
    100% {filter: drop-shadow(0px 0px 0px #FFC72D)}
}
@keyframes exit {
    0% {opacity: 1; width: 12vh;}
    100% {opacity: 0; width: 0vh;}
}
@keyframes cardAdd {
    0% {opacity: 0; width: 0vh;}
    100% {opacity: 1; width: 12vh;}
}
#uno_deck {
    position: fixed;
    width: 14vh;
    bottom: 25vh;
    left: 20vh;
    transition: .1s;
    z-index: 2;
}
#uno_deck:hover {
    filter: drop-shadow(0px 0px 10px yellow)
}
.uno_draw_animation {
    position: fixed;
    width: 14vh;
    bottom: 25vh;
    left: 20vh;
    transition: .1s;
    z-index: 2;

    animation: drawanimation .25s ease-in;
}
@keyframes drawanimation {
    0% { transform: translate(0px,0px)}
    100% { transform: translate(40vw,10vh) }
}
#main_menu_error {
    color: red;
}
.table_card {
    position: fixed;
    width: 14vh;
    display: none;
    margin-top: -10vh; /* Negative half of height. */
    margin-left: -7vh; /* Negative half of width. */
    filter: drop-shadow(0px 0px 5px #5a5a5a);
    animation-fill-mode: both;
    transition: all .2s;
    transform: rotateX(70deg);
}
@keyframes placeCard1 {
    0% {opacity: 0.75; transform: rotate(0deg) translate(50vh) rotate(0deg) scale(2);}
    60% {opacity: 1; transform: rotate(5deg) translate(5vh) rotate(180deg) scale(1);}
    100% {opacity: 1; transform: rotate(15deg) translate(0vh) rotate(200deg) scale(1);}
}
@keyframes placeCard2 {
    0% {opacity: 0.75; transform: rotate(38deg) translate(50vh) rotate(0deg) scale(2);}
    60% {opacity: 1; transform: rotate(43deg) translate(5vh) rotate(180deg) scale(1);}
    100% {opacity: 1; transform: rotate(53deg) translate(0vh) rotate(200deg) scale(1);}
}
@keyframes placeCard3 {
    0% {opacity: 0.75; transform: rotate(82deg) translate(50vh) rotate(0deg) scale(2);}
    60% {opacity: 1; transform: rotate(87deg) translate(5vh) rotate(180deg) scale(1);}
    100% {opacity: 1; transform: rotate(97deg) translate(0vh) rotate(200deg) scale(1);}
}
@keyframes placeCard4 {
    0% {opacity: 0.75; transform: rotate(123deg) translate(50vh) rotate(0deg) scale(2);}
    60% {opacity: 1; transform: rotate(128deg) translate(5vh) rotate(180deg)  scale(1);}
    100% {opacity: 1; transform: rotate(138deg) translate(0vh) rotate(200deg) scale(1);}
}
@keyframes placeCard5 {
    0% {opacity: 0.75; transform: rotate(156deg) translate(50vh) rotate(0deg) scale(2);}
    60% {opacity: 1; transform: rotate(156deg) translate(5vh) rotate(180deg)  scale(1);}
    100% {opacity: 1; transform: rotate(166deg) translate(0vh) rotate(200deg) scale(1);}
}
@keyframes placeCard6 {
    0% {opacity: 0.75; transform: rotate(194deg) translate(50vh) rotate(0deg) scale(2);}
    60% {opacity: 1; transform: rotate(199deg) translate(5vh) rotate(180deg)  scale(1);}
    100% {opacity: 1; transform: rotate(209deg) translate(0vh) rotate(200deg) scale(1);}
}
@keyframes placeCard7 {
    0% {opacity: 0.75; transform: rotate(242deg) translate(50vh) rotate(0deg) scale(2);}
    60% {opacity: 1; transform: rotate(247deg) translate(5vh) rotate(180deg)  scale(1);}
    100% {opacity: 1; transform: rotate(257deg) translate(0vh) rotate(200deg) scale(1);}
}
@keyframes placeCard8 {
    0% {opacity: 0.75; transform: rotate(276deg) translate(50vh) rotate(0deg) scale(2);}
    60% {opacity: 1; transform: rotate(281deg) translate(5vh) rotate(180deg)  scale(1);}
    100% {opacity: 1; transform: rotate(291deg) translate(0vh) rotate(200deg) scale(1);}
}
@keyframes placeCard9 {
    0% {opacity: 0.75; transform: rotate(303deg) translate(50vh) rotate(0deg) scale(2);}
    60% {opacity: 1; transform: rotate(308deg) translate(5vh) rotate(180deg)  scale(1);}
    100% {opacity: 1; transform: rotate(318deg) translate(0vh) rotate(200deg) scale(1);}
}
@keyframes placeCard10 {
    0% {opacity: 0.75; transform: rotate(348deg) translate(50vh) rotate(0deg) scale(2);}
    60% {opacity: 1; transform: rotate(353deg) translate(5vh) rotate(190deg)  scale(1);}
    100% {opacity: 1; transform: rotate(363deg) translate(0vh) rotate(200deg) scale(1);}
}
.card_opponent {
    display: absolute;
    height: 100px;
    transition: 1s;
    
}
#playerhand {
    height: 16vh;
    position: absolute;
    text-align: center;
    bottom: 0px;
    padding: 10px;
    margin-left:auto;
    margin-right:auto;
    left: 0;
    right: 0;
    width: 58vw;
    overflow: hidden;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 10px;
    transition: .25s ease-out all;
}
/* width */
#playerhand::-webkit-scrollbar {
  width: 2px;
}

/* Track */
#playerhand::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.2);
}

/* Handle */
#playerhand::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
#playerhand::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.small_card {
    width: 10px;
}
#LeaveRoomButton {
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 5px 20px 5px 20px;
    background: rgb(0, 71, 163);
    font-size: 25px;
    border-radius: 0px 0px 15px 0px;
    z-index: 1;
}
#LeaveRoomButton img {
    width: 40px;
}
/* Uno Mechanic */
#uno_speed_prompt {
    display: none;
    margin: 0;
    position: fixed;
    color: white;
    bottom: 12vh;
    padding-top: 10px;
    text-align: center;
    z-index: 10;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    height: 100px;
    font-size: 50px;
    animation: anim_spprompt .25s ease-out;
}
#uno_speed_prompt img {
    width: 100%;
    margin-top: 15%;
}
@keyframes anim_spprompt {
    0% {height: 0px; opacity: 0}
    100% {height: 100px; opacity: 1}
}
#key_outer {
    background: var(--theme);
    border-radius: 5px;
    padding: 8px 8px 8px 8px;
    width: 100px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    animation: spamkey .15s infinite;
    filter: drop-shadow(2px 4px 12px white);
}
#key_inner {
    background: black;
    border-radius: 5px;
    height: 100%;
    font-size: 180%;
}
@keyframes spamkey {
    0% {transform: scale(1.2)}
    40% {transform: scale(0.8)}
    100% {transform: scale(1)}
}
.opponent_container_id {
    border-radius: 1vw 1vw 10px 10px;
    width: 14vw;
    height: 10vw;
    display: inline-block;
    /* animation: .75s joinanimation ease-out; */

    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -7vw;
    margin-top: -5vw;
    /* overflow: hidden; */
}

@keyframes joinanimation {
    0% { transform: scale(0.8) }
    10% { transform: scale(1.4) }
    30% { transform: scale(0.9) }
    50% { transform: scale(1.2) }
    80% { transform: scale(0.95) }
    100% { transform: scale(1) }
}
.player-fx {
    height: 10vw;
    display: none;
    position: fixed;
    bottom: 0px;
    margin-left:auto;
    margin-right:auto;
    text-align: center;
    left: 0;
    right: 0;
    z-index: 5;
    animation: 1s pop;
    font-size: 6vw;
    font-family: ArialBold, sans-serif;
    color: #968ecf;
    -webkit-text-stroke: 6px black;
    font-weight: 500;
    animation-fill-mode: forwards;
}
.fx-container {
    background: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
}
.fx-container img, .fx-container div {
    height: 10vw;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    margin-left: auto;
    margin-right: auto;
    animation: 1s pop;
    animation-fill-mode: forwards;
    font-size: 6vw;
    font-family: ArialBold, sans-serif;
    color: #968ecf;
    -webkit-text-stroke: 6px black;
    font-weight: 500;
}
@keyframes pop {
    0% {transform: scale(2)}
    20% { transform: scale(1) translate(1px, 1px) rotate(0deg); }
    30% { transform: translate(-1px, -2px) rotate(-1deg); }
    40% { transform: translate(-3px, 0px) rotate(1deg); }
    50% { transform: translate(3px, 2px) rotate(0deg); }
    60% { transform: translate(1px, -1px) rotate(1deg); }
    70% { transform: translate(-1px, 2px) rotate(-1deg); }
    80% { transform: translate(-3px, 1px) rotate(0deg); }
    90% { transform: scale(1) translate(3px, 1px) rotate(-1deg); }
    100% { transform: scale(0) translate(-1px, -1px) rotate(1deg); }
}
.setting-panel {
    width: 14vh;
    height: 14vh;
    margin: 1vh;
    border-radius: 14px;
    border: 8px solid white;
    background: rgba(255,255,255,0.5);
    text-align: center;
    display: inline-block;
    opacity: 0.4;
    padding: 1vh;
    vertical-align: bottom;
}
.setting-panel img {
    height: 7vh;
}
.setting-panel input {
    font-size: 4vh;
    width: 60%;
    outline: none;
    border: none;
}
.setting-panel p {
    font-size: 2.4vh;
    margin: 0;
}
.enabled-settings {
    transition: .2s;
}
.enabled-settings:active {
    transform: scale(1.1)
}