* {
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  justify-content: stretch;
  width: 100vw;
  height: 100vh;
}

.nav {
  position: relative;
  width: 250px;
  height: 100%;
  box-sizing: border-box;
  padding: 10px 15px;
  color: orange;
  background: #121212;
}
ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: azure;
}
.nav a {
  display: block;
  height: 1.6rem;
}
.menulist {
  display: block;
  margin: 10px 0;
}
.menulist h3 {
  padding: 5px 0;
}
.menulist .listbox {
  padding: 0 10px;
}

.content {
  height: 100%;
  width: 100%;
  background: #343434;
  color: aliceblue;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content .gametitle {
  margin: 15px 0;
}

.content .tip {
  font-size: 12px;
  margin: 5px;
}

.content .mine-map {
  background: #909090;
  margin: 10px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.mine-seat {
  background-color: cadetblue;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  border: cornsilk solid 1px;
  line-height: 50px;
  font-size: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.easy-map {
  width: 450px;
}
.hard-map {
  width: 800px;
}
.expert-map {
  width: 1500px;
}
.mine-hide {
  visibility: hidden;
}

.mine-boom {
  visibility: visible;
  height: 30px;
  width: 30px;
  transition: 1s;
}

.swiped {
  color: orange;
  font-size: 16px;
  background-color: #efefef;
}

.marked {
  font-size: 25px;
  color: red;
}
.unsure {
  content: "?";
  font-size: 25px;
  color: orange;
}