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

body {
  background: #f8f8ff;
  color: #696969;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  text-align: center;
}

h1 {
  font-size: 200%;
  margin-bottom: 50px;
}

#wrapper {
  margin: 5% auto;
  border-radius: 5px;
  text-align: center;
}

.box {
  display: inline-block;
  border: 2px solid #808080;
  width: 100px;
  height: 100px;
  margin: 2px 0px;
  text-align: center;
  cursor: pointer;
  /* border-radius: 10px; */
}

span {
  position: relative;
  font-size: 57px;
  width: 100px;
  height: 100px;
  padding: 0px 34px 20px;
  margin: 0px 0px;
}

.top {border-top: none;}
.bottom {border-bottom: none;}
.left {border-left: none;}
.right {border-right: none;}

.top-left {border-radius: 0 0 10px 0;}
.top-middle {border-radius: 0 0 10px 10px;}
.top-right {border-radius: 0 0 0 10px;}

.middle-left {border-radius: 0 10px 10px 0;}
.middle-middle {border-radius: 10px;}
.middle-right {border-radius: 10px 0 0 10px;}

.bottom-left {border-radius: 0 10px 0 0;}
.bottom-middle {border-radius: 10px 10px 0 0;}
.bottom-right {border-radius: 10px 0 0 0;}

.activeBox {
  background: #d1d1d1;
}

.alert {
  width: 125px;
  display: inline-block;
  background: #f8f8ff;
  position: relative;
  z-index: 7;
  margin-top: -50%;
  border-radius: 20px;
  box-shadow: 1px 6px 15px 0px #696969;
  animation: larger 0.5s;
  animation-fill-mode: forwards;
  box-sizing: content-box;
  padding: 30px;
  bottom: 50px;
  top: 0px;
}

@keyframes larger {
  from {width: 125px;}
  to {width: 250px;}
}

button {
  background: #696969;
  border-radius: 5px;
  color: #f8f8ff;
  border: none;
  outline: none;
  padding: 0 5px;
  cursor: pointer;
}

button svg {
  margin-top: 2px;
}

button:focus {
  background: #c0c0c0;
}

@media only screen and (max-width: 600px) {
  span {
    top: 10px;
  }
}