body{
    background-color: rgb(137, 228, 145);
    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;
}

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

#orange:hover {
    color: rgb(228, 179, 79);
}


#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: #278b30;
    z-index: 2;
    animation-name: example;
    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 example {
    0%   {background-color:#278b30; left:88px; top:16,5px;}
    25%  {background-color:yellow; left:400px; top:0px;}
    50%  {background-color:blue; left:100px; top:300px;}
    75%  {background-color:rgb(111, 0, 128); left:-400px; top:300px;}
    100% {background-color:#278b30; left:88px; top:16,5px;}
}