:root {
  --boardResize: 50vw;
  --BG-color: darkgray;
}

.top {
  height: 40vh;
  border-bottom: 0.5vh solid darkgray;
  display: flex;
}

.bottom {
  height: 60vh;
  border-top: 0.5vh solid darkgray;
  display: flex;
}

.bottom-left,
.top-left {
  width: var(--boardResize);
  border-right: 0.5vh solid darkgray;
  transition: width 2s ease;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.bottom-right,
.top-right {
  width: calc(100vw - var(--boardResize));
  border-left: 0.5vh solid darkgray;
  transition: width 2s ease;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.top-right-box,
.top-left-box {
  height: 30vh;
  width: 30vh;
  margin: auto;
  margin-bottom: 0;
  display: flex;
  flex-direction: row-reverse;
}
.top-right-box div,
.top-left-box div {
  display: flex;
  flex-direction: column-reverse;
}
.top-right-box div img,
.top-left-box div img {
  margin: 1.6016666667vh 15%;
}
.top-right-box div:nth-child(2),
.top-left-box div:nth-child(2) {
  border: 0 solid black;
  border-width: 0 0.45vh;
}

.bottom-left-box,
.bottom-right-box {
  height: 50vh;
  width: 50vh;
  margin: auto;
  margin-top: 0;
}
.bottom-left-box div img,
.bottom-right-box div img {
  margin: 2.675vh 15%;
}
.bottom-left-box div:nth-child(2),
.bottom-right-box div:nth-child(2) {
  border: 0 solid black;
  border-width: 0 0.75vh;
}

.text-bottom,
.text-top {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0;
  color: white;
}

.span-top {
  width: 10vh;
  text-align: center;
  margin: 1vh 0;
  font-size: 3vh;
}

.span-bottom {
  width: 16.6666666667vh;
  text-align: center;
  margin: 1vh 0;
  font-size: 3vh;
}

.ruit {
  left: var(--boardResize);
  top: 40vh;
  transform: translate(-50%, -50%) rotate(45deg);
  position: absolute;
  display: flex;
  background-color: gray;
  width: 15vh;
  height: 15vh;
  border: 0.9vh solid darkgray;
  transition: left 2s ease;
}
.ruit img {
  transform: rotate(-45deg);
  margin: auto;
  width: 70%;
  border-radius: 10%;
}

.bottom-left-box,
.bottom-right-box,
.top-left-box,
.top-right-box {
  display: flex;
}
.bottom-left-box div,
.bottom-right-box div,
.top-left-box div,
.top-right-box div {
  background-color: gray;
  width: 32.3333333333%;
}
.bottom-left-box div img,
.bottom-right-box div img,
.top-left-box div img,
.top-right-box div img {
  width: 70%;
  border-radius: 10%;
}
.bottom-left-box div:nth-child(2),
.bottom-right-box div:nth-child(2),
.top-left-box div:nth-child(2),
.top-right-box div:nth-child(2) {
  background-color: lightgray;
  width: 35.3333333333%;
}

#scoreLeft,
#scoreRight {
  position: absolute;
  top: 0;
  height: 100vh;
  pointer-events: none;
  background-color: gray;
  transition: width 2s ease;
  transition: opacity 2s ease;
  display: flex;
  justify-content: center;
  opacity: 0;
}
#scoreLeft p,
#scoreRight p {
  font-size: 10vh;
  margin: auto;
}

#scoreLeft {
  left: 0;
  width: var(--boardResize);
  border-right: 0.5vh solid black;
}

#scoreRight {
  right: 0;
  width: calc(100vw - var(--boardResize));
  border-left: 0.5vh solid black;
}

#again {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-decoration: none;
  background: lightgray;
  border: 0.5vh solid black;
  font-size: 5vh;
  padding: 2.5vh;
  transition: opacity 2s ease;
  border-radius: 2vh;
  opacity: 0;
  pointer-events: none;
}/*# sourceMappingURL=local.css.map */