:root { 
  --peach: #ffad69;
  --grey : #D3D3D3;
  --chess: #e4405f;
  --dino: #55acee;
  --tic-tac-toe: #3b5999;
  --cinnabar-piggy: #EA4335;
  --seagreen-rock-paper-scissors: #34A853;
  --blueberry-separated: #4285F4;
  --slotmachine: #FBBC05;
}


body {
  margin: 0;
  padding: 0;
  background: var(--peach);
}

ul {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%);
  margin: 0;
  padding: 0;
  display: flex;
}

ul li {
  list-style: none;
  margin: 0 40px;
}

 ul li a .fas{
  font-size: 40px;
   color: black;
   line-height: 80px;
   transition: .5s;
}

.res {
  width: 80px;
  height: auto;
}

 ul li a  {
  position: relative;
   display: block;
   width: 80px;
   height: 80px;
   background: #808080;
   text-align: center;
   transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(0,0);
   transition: .5s;
   box-shadow: -30px 30px 10px rgba(0,0,0,.5);
}

ul li a:before {
  content: '';
  position: absolute;
  top: 10px ;
  left: -20px;
  height: 100%;
  width: 20px;
  background: #93a092;
  transition: .5s;
  transform: rotate(0deg) skewY(-45deg);
}

ul li a:after {
  content: '';
  position: absolute;
  bottom: -20px ;
  left: -10px;
  height: 20px;
  width: 100%;
  background: var(--grey);
  transition: .5s;
  transform: rotate(0deg) skewX(-45deg);
}

ul li a:hover{
  transform: perspective(1000px) rotate(-30deg) skew(25deg) translate(20px,-20px);
  box-shadow: -50px 50px 50px rgba(0,0,0,.5);
}
ul li:hover .fas{
  color:white;
}

ul li:hover:nth-child(2) a {
  background: var(--chess);
}

ul li:hover:nth-child(2) a:before {
  background: #E4506B;
}

ul li:hover:nth-child(2) a:after{
  background: #E7617A;
}
ul li:hover:nth-child(3) a {
  background: var(--dino);
}

ul li:hover:nth-child(3) a:before {
  background: #64B2EE;
}

ul li:hover:nth-child(3) a:after{
  background: #73BAF0;
}

ul li:hover:nth-child(4) a {
  background: var(--slotmachine);
}

ul li:hover:nth-child(4) a:before {
  background: rgb(207, 207, 19);
}

ul li:hover:nth-child(4) a:after{
  background: rgb(207, 207, 19);
}

ul li:hover:nth-child(5) a {
  background: var(--tic-tac-toe);
}

ul li:hover:nth-child(5) a:before {
  background: #5E77AB;
}

ul li:hover:nth-child(5) a:after{
  background: #4C68A2;
}

ul li:hover:nth-child(6) a {
  background: var(--cinnabar-piggy);
}

ul li:hover:nth-child(6) a:before {
  background: rgb(190, 52, 10);
}

ul li:hover:nth-child(6) a:after{
  background: rgb(190, 52, 10);
}

ul li:hover:nth-child(7) a {
  background: var(--seagreen-rock-paper-scissors);
}

ul li:hover:nth-child(7) a:before {
  background: rgb(0, 255, 106);
}

ul li:hover:nth-child(7) a:after{
  background: rgb(0, 255, 106);
}

ul li:hover:nth-child(8) a {
  background: var(--blueberry-separated);
}

ul li:hover:nth-child(8) a:before {
  background: rgb(0, 153, 255);
}

ul li:hover:nth-child(8) a:after{
  background: rgb(0, 153, 255);
}