#page {
  width: 800px;
  margin: 2em auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#active {
  margin: 0 10px 50px 0;
  height: 245px;
  color: #999;
}
#active .size4 {
  font-size: 172px;
  width: 192px;
}
#active .size3 {
  font-size: 112px;
  width: 132px;
}
#active .size2 {
  font-size: 72px;
  width: 92px;
}
#active .size1 {
  font-size: 22px;
  width: 64px;
}
#active div {
  display: inline-block;
  height: 64px;
}
#active .unicode {
  display: block;
  background-color: #333;
  font-family: Consolas;
  font-size: 32px;
  color: #CCC;
  padding: 10px 35px;
}
#sel {
  font-family: Montserrat;
  font-size: 24px;
  color: #333;
  padding: 10px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
  background: linear-gradient(#FFF, #DDD);
  margin: 1em 0 1em 0;
}
#list {
  font-family: Arial;
  font-size: 16px;
  text-align: center;
  width: 1290px;
  margin: 2em auto;
  display: block;
}
#list .sect {
  min-width: 825px;
  display: flex;
  margin: 5px auto;
  padding-left: 28px;
  align-items: center;
  background: green;
  color: white;
}
#list .item {
  display: inline-flex;
  margin: 5px;
  cursor: pointer;
}
#list .item:hover .n,
#list .item:hover .p {
  border: 1px solid red;
}
#list .item:hover .n {
  background: red;
}
#list .item:hover .p {
  color: red;
}
#list .item .n,
#list .item .p {
  width: 85px;
  height: 50px;
  border: 1px solid navy;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
#list .item .n {
  background: navy;
  color: white;
}
#list .item .p {
  background: white;
  color: navy;
  font-size: 42px;
}
#options {
  margin-left: auto;
  position: relative;
  top: -12px;
  left: -50px;
}