*,
body {
    padding: 0;
    margin: 0;
}

#root {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 100vh;
    width: 100vw;
}

.square {
    width: 100vmin;
    height: 100vmin;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}

.di-xuan {
    background: url("img/0center.png") no-repeat center/90%;
    transform: rotate(22.5deg);
}

.di-gen {
    background: url("img/7艮.jpg") no-repeat center/90%;
}

.di-zhen {
    background: url("img/4震.jpg") no-repeat center/90%;
}

.di-xun {
    background: url("img/5巽.jpg") no-repeat center/90%;
}

.di-kan {
    background: url("img/6坎.jpg") no-repeat center/90%;
}

.di-li {
    background: url("img/3离.jpg") no-repeat center/90%;
}

.di-qian {
    background: url("img/1乾.jpg") no-repeat center/90%;
}

.di-dui {
    background: url("img/2兑.jpg") no-repeat center/90%;
}

.di-kun {
    background: url("img/8坤.jpg") no-repeat center/90%;
}

.tianPan {
    right: 10vmin;
    top: 10vmin;
    width: 30vmin;
    height: 80vmin;
    border-radius: 5%;
    margin-right: 10px;
    overflow-y: scroll;
}

.tian-item {
    margin: 0 auto;
}

.tian-qian {
    width: 26vmin;
    height: 26vmin;
    background: url('./img/1乾_天盘.jpg') no-repeat center/cover;
}

.tian-dui {
    width: 26vmin;
    height: 26vmin;
    background: url('./img/2兑_天盘.jpg') no-repeat center/cover;
}

.tian-li {
    width: 26vmin;
    height: 26vmin;
    background: url('./img/3离_天盘.jpg') no-repeat center/cover;
}

.tian-zhen {
    width: 26vmin;
    height: 26vmin;
    background: url('./img/4震_天盘.jpg') no-repeat center/cover;
}

.tian-xun {
    width: 26vmin;
    height: 26vmin;
    background: url('./img/5巽_天盘.jpg') no-repeat center/cover;
}

.tian-kan {
    width: 26vmin;
    height: 26vmin;
    background: url('./img/6坎_天盘.jpg') no-repeat center/cover;
}

.tian-gen {
    width: 26vmin;
    height: 26vmin;
    background: url('./img/7艮_天盘.jpg') no-repeat center/cover;
}

.tian-kun {
    width: 26vmin;
    height: 26vmin;
    background: url('./img/8坤_天盘.jpg') no-repeat center/cover;
}

.movable {
    background-color: #d2a9a9;
    opacity: 0.5;
    display: flex;
    justify-content: center;
    align-items: center;
}

.notice {
    flex-grow: 1;
    max-height: 100vmin;
    margin-right: 10px;
}

#char-input {
    max-width: 16rem;
    padding: 10px;
    margin: 10px 5px;
    border: 2px solid #007BFF;
    border-radius: 5px;
    outline: none;
}

#startBtn {
    position: absolute;
    top: 5px;
    right: 0;
    padding: 1rem;
    background: transparent;
    text-decoration: underline;
    text-align: center;
    border: none;
    cursor: pointer;
    font-size: medium;
}