:root {
    --scale: 1.05;
    --my_cards: Blue;
    --my_base: greenyellow;
    --enemy_base: Tomato;
    --enemy_board: red;
    --my_board: green;
    --on_me: brown;
    --none: transparent;
    --my_tent: #00DDDD;
}
p {
    margin: 0;
    padding: 0;
}
div{
    /*font-size: 0;*/
    vertical-align: top;
}


#myPlayArea {
    display: inline-block;
    width: 90%;

}
.slot {
  display: inline-block;
  position: relative;
  box-shadow: 0 0.4vw 0.4vw 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: calc(var(--scale)* 9vw);
  height: calc(var(--scale)* 9vw);
  background-color: #f1f1f1;
  padding: calc(var(--scale)* 0.22vw);
  margin:calc(var(--scale)*  0.5vw);
   -webkit-border-radius: calc(var(--scale)*0.5vw);
    -moz-border-radius: calc(var(--scale)*0.5vw);
    border-radius: calc(var(--scale)*0.5vw);
}
#myCanvas {

  position: absolute;

  z-index: 20;
  pointer-events: none;
}
.prevent-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
body {
    margin: 0px;
}

.slot:hover {
  box-shadow: 0 1vw 1vw 0 rgba(0,0,0,0.6);
}

.row-container {
  background-color: DodgerBlue;
    font-size: 0;
}
.card-container {
  display: inline-block;
  background-color: DodgerBlue;
  margin: 0.0vw;
}
.menu-container {
  background-color: DodgerBlue;
    display: inline-block;
    height:80%;
    width:9%;
}
.menu {
    vertical-align: middle;
    margin: 0.4vw;
    padding: 0.4vw;
    position:relative;
    background: white;
}

.card {
  display: inline-block;
  position:relative;
  width: 71.6%;
  height: 100%;
  background: white;
}
.cardProgress {
    display: inline-block;
    position:relative;
    width: 28.4%;
    height: 100%;
    background: lightgrey;
    border-radius: 3px;
}
.cardWhole {
    position:relative;
    width: 100%;
    height: 100%;
    background: white;
}

.progress {
  width: 100%;
  position: absolute;
    bottom: 0;
}
.effectBar {
  position: absolute;
    bottom: 10%;
    height : 10%;
    width : 100%;
    /*
     */

}
.effectAmount {
  position: absolute;
  font-size:calc(var(--scale)*1vw);
  font-weight: bold;
  margin: 0 auto;
  left: 50%;
  top: 40%;
  color: white;
font-family: "Micro 5", serif;
font-weight: 400;
font-style: normal;
    text-shadow: 0.05vw 0 0 #000, 0 -0.05vw 0 #000, 0 0.05vw 0 #000, -0.05vw 0 0 #000;

}
.sectionLabel {
    background-color: Black;
    color: White;
    text-align: center;
    margin: 0;
}
.health {
    display: inline-block;
  color: black;
  height: 0.2vw;
  position: absolute;
}
.cooldown {
    position: absolute;
    opacity: 0.8;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
}
.shield {
  color: black;
  height: 0.1vw;
  position: absolute;
}
.picture {
    position: absolute;
    width:100%;
    height:100%;
    border-radius: calc(var(--scale)*0.4vw);
}
.text {
  background: white;
    width:100%;
    height:100%;
}
.inspection {
    font-size:calc(var(--scale)*0.9vw);
    background: white;
    width: calc(var(--scale)*9vw);
    height: calc(var(--scale)*9vw);
    position: absolute;
    pointer-events: none;
    z-index: 1000;
    visibility : hidden;
}

.count {
    text-shadow: 0.04vw 0 0 #000, 0 -0.04vw 0 #000, 0 0.04vw 0 #000, -0.04vw 0 0 #000;
    font-size:calc(var(--scale)*1.5vw);
    font-weight: bold;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-block-start: 0vw;
    margin-block-end: 0vw;
}
.image {
    display: inline-block;
    height:100%;
    width: 100%;
    pointer-events: none;
}
.inner {
    position: absolute;
    top:10%;
    left: 10%;
    height:80%;
    width: 80%;
}
.effectDiv {
    display: inline-block;
    position: relative;
    width: calc(var(--scale)*1.75vw);
    height: calc(var(--scale)*1.75vw);
    pointer-events: none;
}
.smallDiv {
    position: absolute;
    width: 120%;
    height: 30%;
    pointer-events: none;
}
.smallDiv::after {
    content:" ";
    position: absolute;
    top:0;
    right:0;
    border-style: solid;
    border-width: 0 1.2vw 1.2vw 0;
}

.my_cards::after{
    border-color: transparent var(--my_cards) transparent transparent;
}
.my_base::after{
    border-color: transparent var(--my_base) transparent transparent;
}
.enemy_base::after{
    border-color: transparent var(--enemy_base) transparent transparent;
}
.enemy_board::after{
    border-color: transparent var(--enemy_board) transparent transparent;
}
.all_board::after{
    border-color: transparent var(--enemy_board) var(--my_board) transparent;
}
.on_me::after{
    border-color: transparent var(--on_me) transparent transparent;
}
.my_board::after{
    border-color: transparent var(--my_board) transparent transparent;
}
.none::after{
    border-color: transparent var(--none) transparent transparent;
}
.my_tent::after{
    border-color: transparent var(--my_tent) transparent transparent;
}

#cards_container{
    background-color: var(--my_cards);
}
#ally_base_container{
    background-color: var(--my_base);
}
#enemy_base_container{
    background-color: var(--enemy_base);
}
#situations_container{
    background-color: var(--enemy_board);
}
#plans_container{
    background-color: var(--my_board);
}
#tent_container{
    background-color: var(--my_tent);
}
/*Going to need classes for each of the target areas then simply add that class and have the color set*/

.bigDiv {
    position: absolute;
    width: calc(var(--scale)*4vw);
    height: calc(var(--scale)*4vw);
    pointer-events: none;
}
.mediumDiv {
    position: absolute;
    width: calc(var(--scale)*2.5vw);
    height: calc(var(--scale)*2.5vw);
    pointer-events: none;
}
.topRight{
    top: -12%;
    right: -15%;
}
.topLeft{
    top: -12%;
    left: -15%;
}
.bottom{
    bottom: -5%;
    right: 33.3%;
}
.bottomRight{
    bottom: -5%;
    right: -10%;
}
.leftProgress{
    bottom: 35%;
    left: -10%;
}
.topLeftProgress{
    top: 0%;
    left: -10%;
}
.bottomLeftProgress{
    bottom: 0%;
    left: -10%;
}
.left{
    left: -15%;
    top: 17%;
}
.right{
    right: -15%;
    top: 17%;
}
.storage1{
    right: -10%;
    top: 30%;
}
.storage2{
    bottom: 15%;
    right: -10%;
}
.title {
  position: absolute;
}