html, body {
  margin:0px;
  overflow: hidden;
}

#gameMenu {
  height: 100vh;
  width: 100vw;
  z-index: 100;
  background-color: black;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

#gameMenu .card {
  width: 810px;
  opacity: 0.8;
}
#gameMenu #cover {
position: absolute;
  height: 100vh;
  width: 100vw;
  background-image: url(https://www.poggispa.com/wp-content/uploads/2019/12/cyber-attack-1-750x450.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.3;
}

#playerInfo {
  position: absolute;
  top: calc(20px + 60px*4.5 - 50px);
  left: calc(100% - (100% - 60px*9)/2 - 8px - 404px);
  z-index: 20;
}

#eventcard {
  position: absolute;
  top: calc(20px + 60px*4.5 - 10px );
  left: calc(100% - (100% - 60px*9)/2 - 8px - 404px);
  z-index: 20;
  opacity: 0.9;
  width: 300px;
}

#eventcard .card {
  height: 180px;
}

#event {
  position: absolute;
  top: calc(20px + 60px*4.5 - 10px );
  left: calc(100% - (100% - 60px*9)/2 - 8px - 404px);
  z-index: 20;
}
#gameboard {
  /* background:gray; */
  height:100vh;
}

#playerInfo {
  position: absolute;
  top: calc(20px + 60px*4.5 - 50px);
  left: calc(100% - (100% - 60px*9)/2 - 8px - 404px);
  z-index: 20;
}

#board {
  position: absolute;
  top: 10px;
  left: calc((100% - 60px*9 - 80px)/2 - 60px);
  width: calc( 80px*2 + 60px*9 + 20px);
  height: calc( 80px*2 + 60px*9 + 20px);
  box-shadow: 0 5px 20px rgba(0,0,0,.25);
  background-image: url(https://live.staticflickr.com/8463/8127137290_8ed24e7cbc_b.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.7;
  /* background:gra y; */
}

.grid {
  background-color: white;
  border: solid #2d3436 1px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.square-grid {
  position: absolute;
  background-color: #d2dae2;
  border: solid #2d3436 1px;
  height: 80px;
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#profile {
  position: absolute;
}

.accordion-body ul {
  margin-left: -20px;
}

#accordionFlush {
  position: absolute;
  top: 20px;
  padding-left: 10px;
  width: 20vw;
}

#profile ul li  {
  display: flex;
}

.message li {
  display: list-item !important;
}

#profile ul li div {
  padding-left: 10px;
}

#gameboard {
  display: flex;
  height:700px;
  width:700px;
}

.tbodyCrypto button {
  color: white;
  font-weight: bold;
}

#cryptomarket{
  position: absolute;
  z-index: 100;
  top: calc(20px + 60px*4.5 - 173px );
  left: calc(100% - (100% - 60px*9)/2 - 8px - 473px);
  width: 400px;
  background-color: inherit;
}

ul {
    /* height:100vh;
    width:100vw; */
}

#gameboard li {
  list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margins */
  background-color: black;
  color: white;
}

#chance-card,#community-card {
  position: absolute;
  height: 130px;
  width: 100px;
  transform: rotate(45deg);
  border: solid #2d3436 1px
}
#chance-card {
background-color: red;
  top: 180px;
left: calc((100% - 60px*9 - 80px)/2 - 48px + 180px);
    /* animation:chance 2s; */
  transition-duration: 1s;
}
#community-card {
background-color: pink;
top: calc(20px + 60px*9 - 140px );
left: calc(100% - (100% - 60px*9)/2 - 8px - 200px);
    /* animation:community 2s; */
  transition-duration: 1s;
}

/* @keyframes chance
                {
                from {
                  top: 180px;
                  left: calc((100% - 60px*9 - 80px)/2 - 48px + 180px);
                  transform: rotate(45deg);
                  height: 130px;
                  width: 100px;
                }
                to{
                  left: calc(100% - (100% - 60px*9)/2 - 8px - 360px);
                  top:calc(20px + 60px*9 - 340px);
                  transform: rotate(90deg);
                  height: 300px;
                  width: 200px;
                }
              }

@keyframes community
                {
                from {
                  left: calc(100% - (100% - 60px*9)/2 - 8px - 200px);
                  top: calc(20px + 60px*9 - 140px );
                  transform: rotate(45deg);
                  height: 130px;
                  width: 100px;
                }
                to{
                  left: calc(100% - (100% - 60px*9)/2 - 8px - 360px);
                  top:calc(20px + 60px*9 - 340px);
                  transform: rotate(90deg);
                  height: 300px;
                  width: 200px;
                }
              } */

.square-grid.top {
left: calc((100% - 60px*9 - 128px)/2)
}
.square-grid.right {
  top: 20px;
  left: calc(100% - (100% - 60px*9)/2 - 8px)
}
.square-grid.bottom {
  top: calc(20px + 60px*9 + 80px );
  left: calc(100% - (100% - 60px*9)/2 - 8px)
}
.square-grid.left {
  top: calc(20px + 60px*9 + 80px );
  left: calc((100% - 60px*9 - 80px)/2 - 48px)
}

#top, #bottom {
  position: absolute;
  display: flex;
  flex-direction: row;
}

#top .grid, #bottom .grid {
  height: 80px;
  width: 60px;
}
#top {
  top: 20px;
  left: calc((100% - 60px*9 - 80px)/2)
}
#bottom {
  top: calc(20px + 60px*9 + 80px );
  left: calc((100% - 60px*9 - 80px)/2)
}
#left {
  top: calc(20px + 80px);
  left: calc((100% - 60px*9 - 80px)/2 - 80px)
}
#right {
  top: calc(20px + 80px);
  left: calc(100% - (100% - 60px*9 - 80px)/2 - 80px)
}
#left .grid, #right .grid {
  height: 60px;
  width: 80px;
}

#left, #right {
  position: absolute;
  display: flex;
  flex-direction: column;
}

.scene {
  position: absolute;
top: calc(20px + 60px*4 + 30px );
left: calc(100% - (100% - 60px*9)/2 - 8px - 300px)
}

.dot.player0{
  background-color: #ef5777;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dot.player1{
  background-color: floralwhite;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}