*{font-family:monospace;cursor:pointer;margin:0;padding:0;}
body{margin:0;padding:0;height:100vh; overflow-y:auto;overflow-x:hidden; background-color:black;}
  *{
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  input[type=text], input[type=password]{
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
  }
  a{color:white;}
  a:hover{color:lightgreen;}
  footer{position:fixed;bottom:0;left:0; width:98%;padding:5px 1%; color:white;font-size:8px;text-align:right; background-color:#222222;}
  footer a{font-size:8px;}
.info_holder{position:absolute;top:415px;right:0; height:35px; padding:5px;font-size:10px;line-height:9px;color:white;background-color:rgba(255,0,0,0.2);}
  .input_btn{transition:0.3s all ease-in;background-color:black;color:white;}
  .input_btn:hover{background-color:white;color:black;}
.game_info{position:relative;margin-top:10px;margin-right:5px;text-align:right;}
.player_info{text-align:right;margin-right:5px;}
.enemy_info{text-align:right;margin-right:5px;}
.log_holder{position:absolute;left:0;bottom:0;z-index:10; max-height:210px;overflow-y:scroll; padding:5px 50px 20px 5px;font-size:10px;color:white;background-color:darkred;}
.content_holder{width:800px;margin:0 auto;height:auto;max-height:100vh;}
/* .card_holder{display:flex;align-items:center; background-color:lightgrey;} */
.collection{display:flex;align-items:center; background-color:lightgrey;}

/* CARD */
.card{position:relative;z-index:2; pointer-events:auto; margin:3px 1px; border:2px solid black;border-radius:5px; overflow:hidden; background-size:cover;background-position:top; transition:0.2s all ease-in;transition-delay:0.05s; -webkit-transition:0.2s all ease-in;-webkit-transition-delay:0.05s;}
  .c_clickable:hover{z-index:3; }
  .no_events{pointer-events:none;}
  /* .card:hover{transform:scale(120%);z-index:3;} */
  .card_inlay{position:absolute;top:13px;left:0; width:60px;height:77px; pointer-events:none; font-size:8px; background-position:top;background-repeat:no-repeat;background-size:cover;}
    .c_inlay_name{position:absolute;top:0;left:-1px;width:60px;height:9px;padding:1px 2px 0 0; text-align:right;font-size:8px;line-height:9px;letter-spacing:-0.2px;font-weight:bold;text-transform:uppercase; border-radius:5px 5px 0 0; background-color:white;}
    .c_inlay_element{position:absolute;top:10px;left:0;width:60px;height:3px; background-color:grey;}
    .c_inlay_hitpoints{position:absolute;bottom:5px;right:0;width:24px;height:15px;padding:0 2px 0 3px; color:white;font-size:11px;line-height:15px;font-weight:bold;text-align:left;letter-spacing:-1px; border-radius:3px 0 0 3px; background-color:rgba(0,0,0,0.4);background-image:url(../img/shield1.png);background-size:14px;background-position:right;background-repeat:no-repeat;}
    .c_inlay_val1Name{position:absolute;top:9px;left:15px;width:auto;padding:0px 2px; font-size:6px;letter-spacing:-0.5px; background-color:white;}
    .c_inlay_val1Amt{position:absolute;top:0px;left:-1px;width:18px;height:18px;line-height:18px;border-radius:100%; text-align:center;font-size:14px;font-weight:bold;letter-spacing:-1px; background-color:white;background-size:125%;background-position:center;}
    .c_inlay_val2Name{position:absolute;bottom:0px;right:13px;width:auto;padding:0px 2px; text-align:right;font-size:6px;letter-spacing:-0.5px; background-color:white;}
    .c_inlay_val2Amt{position:absolute;bottom:-2px;right:-1px;width:16px;height:16px;line-height:15px;border-radius:100%; text-align:center;font-size:13px;font-weight:bold;letter-spacing:-1px; background-color:white;}
    .c_inlay_cost{position:absolute;top:15px;left:0;width:14px;height:14px;border-radius:100%; text-align:center;font-size:12px;line-height:15px;font-weight:bold;letter-spacing:-0.5px; background-color:white; background-image:url(../img/element.png);background-size:125%;background-position:center;}
    .c_inlay_gain1{position:absolute;top:28px;left:0;width:12px;height:12px;border-radius:100%; text-align:center;font-size:10px;line-height:13px;letter-spacing:-1px; background-color:white; background-image:url(../img/element.png);background-size:150%;background-position:center;}
    .c_inlay_gain2{position:absolute;bottom:15px;right:0;width:11px;height:11px;rotate:-90deg;border-radius:100%; text-align:center;font-size:9px;line-height:11px;letter-spacing:-1px; background-color:white; background-image:url(../img/element.png);background-size:150%;background-position:center;}
    .c_inlay_ability{position:absolute;top:40px;left:0;width:54px;height:25px;padding:5px 3px; font-size:5px;line-height:5px;letter-spacing:-0.3px;text-align:center; border-radius:0 0 5px 0; background-color:rgba(0,0,0,0.3);color:white; }
    .c_inlay_type{position:absolute;top:81px;left:1px;width:auto; font-size:4px;letter-spacing:-0.5px; color:white;}
    .c_inlay_version{position:absolute;top:85px;left:2px;width:60px; font-size:4px;letter-spacing:-0.5px; color:white;}

/* INGAME */
.row{position:relative; width:800px;min-height:100px;height:auto;}
  .row1{background-color:rgba(255,0,0,0.0);}
  .row2{background-color:rgba(255,0,0,0.0);}
  .row3{background-color:rgba(255,0,0,0.0);}
  .row4{background-color:rgba(255,0,0,0.0);}
.enemy{}
.player{}
  .hand{position:relative; width:800px;height:auto;min-height:100px; display:flex;align-items:center;justify-content:center;flex-wrap:wrap; background-color:rgba(255,255,255,0.2);}
  .field{position:relative;float:left;width:500px;height:auto;min-height:100px; display:flex;align-items:center;justify-content:center;flex-wrap:wrap; width:500px;min-height:100px; background-color:rgba(0,0,255,0.4);} /* lightblue */
  .leader{position:relative;float:left;width:100px;height:auto;min-height:100px; display:flex;align-items:center;justify-content:center;flex-wrap:wrap; width:100px;min-height:100px;  background-color:rgba(255,255,255,0.4);} /* grey */
  .deck{position:relative;float:left;width:100px;height:auto;min-height:100px; display:flex;align-items:center;justify-content:center;flex-wrap:wrap; width:100px;min-height:100px;  background-color:rgba(255,0,0,0.5);} /* darkgrey */
  .grave{position:relative;float:left;width:100px;height:auto;min-height:100px; display:flex;align-items:center;justify-content:center;flex-wrap:wrap; width:100px;min-height:100px;  background-color:rgba(255,255,0,0.3);} /* lightgrey */
  .clearance{float:none;clear:both;}
  .hand .card:nth-child(odd), .hand .card:nth-child(even){position:relative;}
  .field .card:nth-child(odd), .field .card:nth-child(even){position:relative;}
  .leader .card:nth-child(odd), .leader .card:nth-child(even){position:absolute;}
  .deck .card:nth-child(odd), .deck .card:nth-child(even){position:absolute;}
  .grave .card:nth-child(odd), .grave .card:nth-child(even){position:absolute;}

/* LOBBY */
.overview_games{position:relative; width:800px;height:400px;padding-top:5px; font-size:10px; background-color:rgba(0,255,0,0.2);}
.overview_table{color:white;font-size:10px;}
table{width:100%;border-collapse:collapse;text-align:left;color:white; }
th, td{border:1px solid white;padding:2px 5px;}
.link_form{}
.link_btn{padding:; font-size:10px;font-weight:bold;text-transform:uppercase; background:none;color:lightgreen;border:none; transition:0.3s all ease-out;}
.link_btn:hover{color:lightgreen;text-decoration:underline;}