body{
  background-color: rgb(228, 179, 79);
  font-family: Arial, Helvetica, sans-serif;
}
h1{
  text-align: center;
}

p{
  text-align: center;
}

nav ul{
  display: flex;
  justify-content: space-around;
  list-style: none;
}

li {
  background-color: black;
  border-radius: 10px;
  padding: 10px;
}

a{
  color: white;
  text-decoration: none;
  transition: 0.3s ease;
}

a:hover {
  color: rgb(246, 255, 0);
  font-size: 20px;
}

#green:hover {
  color: rgb(137, 228, 145);
}

#red:hover {
  color: rgb(244, 126, 126);
}

#container{
  height: 450px;
  width: 350px;
  margin: auto;
  margin-top: 5%;
  background-color: rgb(246, 242, 242);
  border-radius: 10px;
}
#corps{
  position: relative;
  border-radius: 45% ;
  top:16.5%;
  left: 25%;
  width: 50%;
  height: 67%;
  background: #B47618;
  z-index: 2;
  animation-name: potato;
  animation-duration: 5s;
}
.elements{
  z-index: 3;
}

#hat{
  position: absolute;
  top: -12%;
  left: -1%;
}

#eyes{
  position: absolute;
  top: 18%;
  left: 20%;
}

#feet{
  position: absolute;
  top: 84%;
  left: -12%;
}

#brows{
  position: absolute;
  top: 10%;
  left: 15%;
}

#leftear{
  position: absolute;
  top: 20%;
  left: 95%;
}

#lefthand{
  position: absolute;
  top: -12%;
  left: 65%;
}

#nose{
  position: absolute;
  top: 28%;
  left: 10%;
}

#rightear{
  position: absolute;
  top: 20%;
  left: -25%;
}

#righthand{
  position: absolute;
  top: 45%;
  left: -30%;
}

@keyframes potato {
  0%   {background-color:#B47618; left:88px; top:16,5px;}
  25%  {background-color:yellow; left:500px; top:0px;}
  50%  {background-color:blue; left:0px; top:30px;}
  75%  {background-color:green; left:-200px; top:300px;}
  100% {background-color:#B47618; left:88px; top:16,5px;}
}