*{
padding:0;
margin:0;
user-select:none;
}

.phone {
  position: relative;
  overflow: hidden;
  border: 3px solid #eee;
  border-radius: 15px;
  height: 600px;
  width: 340px;
}

.phone .content {
  opacity: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  height: calc(100% - 60px);
  width: 100%;
  transition: opacity 0.4s ease;
}

.phone .content.show {
  opacity: 1;
}
.menu {
      position: fixed;
    bottom: 2px;
    width: 100%;
  background-color: #fff;
  box-shadow: 0px -2px 10px -3px #ffa8ba;
  /*border-radius: 0px 0px 25px 25px;*/
}

.menu ul {
  list-style: none;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  padding: 0;
  margin: 0;
}

.menu ul li {
  text-align: center;
  box-sizing: border-box;
}

.menu ul li a {
  display: block;
  width: 100%;
  padding: 10px 0;
  border-top: 2px solid;
  border-color: transparent;
  color: #888;
}

.menu ul li a:hover:not(.home) {
  border-top: 2px solid #fc466b;
  color: #999;
}

.menu ul li a:focus:not(.home) {
  border-top: 2px solid #fc466b;
  color: #fc466b;
}

.menu ul li a:focus:not(.home) i {
  animation-name: pop;
  animation-duration: .5s;
}

@keyframes pop {
  0%   {transform: scale(.8);}
  50%  {transform: scale(1.2);}
  100% {transform: scale(1);}
}

.menu ul li a.home {
  color: #fff;
  background: #fc466b;
  border-radius: 20px;
}