@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* {
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    background: #7EB9DA;
}

.canvas{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.sun{
    width: 20vmin;
    height: 20vmin;
    border-radius: 50%;
    background: orange;
    box-shadow: 0 0 10px orange, 0 0 60px orange, 0 0 200px yellow;
    position: absolute;
    left: 10%;
    top: 10%;
}

.grass{
    width: 100%;
    height: 30%;
    background: rgb(3, 143, 3);
    position: absolute;
    bottom: 0;
    z-index: 3;
}
.elephant{
    position: relative;
    top:-3vmin
}
.elephant-body{
    width: 46vmin;
    height: 36vmin;
    background-color: grey;
    border-radius: 50% 50% 0 0;
    position: relative;
    bottom: 0;
    display: flex;
    justify-content: center;
}
.elephant-body::after{
    content: '';
    width: 10vmin;
    height: 30%;
    position: absolute;
    background-color: #7EB9DA;
    border-radius: 50% 50% 0 0;
    bottom: 0;
}

.elephant-ears{
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: relative;
    top: 8vmin;
}

.ear, .ear.e1::before, .ear.e1::after, .ear.e2::before, .ear.e2::after{
    background-color: #292727;
    border-radius: 50%;
}

.ear{
    width: 15vmin;
    height: 10vmin;
    
}

.ear.e1::before{
    content: '';
    position: absolute;
    width: 10vmin;
    height: 10vmin;
    top: -1.7vmin;
    left: 5vmin;
}
.ear.e1::after{
    content: '';
    position: absolute;
    width: 19vmin;
    height: 10vmin;
    top: 6vmin;
    left: -6vmin;
}
.ear.e2::before{
    content: '';
    position: absolute;
    width: 10vmin;
    height: 10vmin;
    top: -1.7vmin;
    left: 30vmin;
}
.ear.e2::after{
    content: '';
    position: absolute;
    width: 19vmin;
    height: 10vmin;
    top: 6vmin;
    right: -5vmin;
}

.tail {
    z-index: 6;
    position: relative;
    top: 9vmin;
    left: -2vmin;
    
   }
.tail-length{
    width: 10vmin;
    height: 22vmin;
    background: transparent;
    border-radius: 50%;
    border: solid 1.3vmin;
    border-color: transparent transparent transparent #292727;
    position: absolute;
   
}

.tail-end{
    width: 4vmin;
    height: 4vmin;
    background: #292727;
    clip-path: polygon(51% 14%, 61% 35%, 74% 90%, 58% 65%, 47% 89%, 38% 64%, 20% 88%, 39% 35%);
    position: absolute;
    top: 17vmin;
    left: 0.5vmin;
    transform: rotate(-45deg);
}