styles.css

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  text-align: center;
  min-height: 100vh;
  padding-top: 50px;
  font-family: 'Montserrat', sans-serif;
}

body .helper {
  color: #242F40;
  font-size: 3rem;
  -webkit-transition: opacity 500ms ease, font-size 500ms ease 500ms;
  transition: opacity 500ms ease, font-size 500ms ease 500ms;
}

body .helper.hidden {
  opacity: 0;
  font-size: 0;
}

body .container {
  width: 80vh;
  margin: 0 auto;
  height: 80vh;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
  -webkit-transition: -webkit-transform 500ms ease 500ms;
  transition: -webkit-transform 500ms ease 500ms;
  transition: transform 500ms ease 500ms;
  transition: transform 500ms ease 500ms, -webkit-transform 500ms ease 500ms;
}

body .container .grid {
  height: 100%;
  width: 100%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
  -ms-grid-rows: (1fr)[3];
      grid-template-rows: repeat(3, 1fr);
}

body .container .grid .square {
  width: 100%;
  height: 100%;
  border: 5px solid #AB87FF;
  padding: 10px;
}

body .container .grid .one {
  border-top: none;
  border-left: none;
}

body .container .grid .two {
  border-top: none;
}

body .container .grid .three {
  border-top: none;
  border-right: none;
}

body .container .grid .four {
  border-left: none;
}

body .container .grid .six {
  border-right: none;
}

body .container .grid .seven {
  border-left: none;
  border-bottom: none;
}

body .container .grid .eight {
  border-bottom: none;
}

body .container .grid .nine {
  border-right: none;
  border-bottom: none;
}

svg {
  height: 100%;
  width: 100%;
}

.dialog {
  position: absolute;
  width: 100%;
  height: 20%;
  background-color: white;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  line-height: calc(0.2 * 80vh - 10px);
  font-size: 3rem;
  opacity: 0;
  -webkit-transition: opacity 500ms ease-in-out 1250ms;
  transition: opacity 500ms ease-in-out 1250ms;
  z-index: -100;
}

.dialog.X {
  border: 5px solid #D72638;
  color: #D72638;
}

.dialog.O {
  border: 5px solid #242F40;
  color: #242F40;
}

.dialog.Cat {
  border: 5px solid #AB87FF;
  color: #AB87FF;
}
/*# sourceMappingURL=styles.css.map */