* {
  padding: 0;
  margin: 0;
  border: 0;
  font-size: 1.7rem;
}
/* *是通配符，给所有的元素去掉默认样式，因为有的浏览器会默认加上一些样式，这可能会给布局带来问题 */
body {
  width: 100%;
  height: 100%;
}
/* 给body设置100%的高度和宽度，这样就会根据浏览器屏幕大小自动适配 */

.container {
  display: grid;
  grid-template-columns: 550px 300px;
  justify-content: center;
  justify-items: center;
  grid-gap: 10px;
  /* align-items: center; */
}
.playground {
  display: grid;
  width: 550px;
  height: 550px;
  grid-template-areas:
    "b1 b2 b3"
    "b4 b5 b6"
    "b7 b8 b9";
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  align-items: center;
}

.item {
  /* text-align: center; */
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid lightgrey;
  width: 96%;
  height: 96%;
  background-color: lightgrey;
  font-size: 100px;
  color: white;
}
.control {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /*  font-size: 100px; */
}

.control-button {
  /* flex-grow:0; */
  display: block;
  margin: 10px;
  padding: 5px 10px;
  color: white;
  background-color: grey;
  width: 9rem;
}

.control-button.middle{
  font-size: 1.1rem;
}

.success {
  color: red;
  display: block;
  text-align: center;
}
.comment {
  color: darkgrey;
  font-size: xx-large;
}

.give-up {
  display:block;
  color:red;
  font-size:1rem;
}
.hidden {
  display: none;
}