style.css

:root {
    /* 750 x 1000 */
    --size: 75;
    /* --size: 300; */
    --unit: calc((var(--size) / 1000) * 1vmin);
    --aang-skin: #FFEEC6;
    --aang-skin-shadow: #EFD7AD;
    --aang-red: #C5674B;
    --aang-red-shadow: #A25B48;
    --aang-yellow: #EFE466;
    --aang-yellow-shadow: #B5A66C;
    --aang-arrow: #B7D2CB;
    --aang-boot: #957964;
    --aang-boot-shadow: #806655;
    --aang-boot-band: #382A21;
    --aang-boot-top: #766C53;
    --aang-boot-bottom: #5B5652;
    --aang-eye: transparent;
    --aang-eyebrow: #473A31;
    --avatar-arrow: #FFF;
    --avatar-arrow-gradient-middle: #C3CEF0;
    --avatar-skin: #C89C81;
}

* {
    box-sizing: border-box;
}

body {
    align-items: center;
    background-color: #52b7e6;
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

.aang {
    height: calc(1000 * var(--unit));
    position: relative;
    width: calc(750 * var(--unit));
    z-index: 1;
}

.aang:hover{
    --aang-arrow: var(--avatar-arrow);
    --aang-eye: var(--avatar-arrow);
}

.head {
    position: absolute;
    background: var(--aang-skin-shadow);
    width: 30%;
    height: 32.7%;
    top: 0%;
    left: 35%;
    z-index: 2;
    overflow: hidden;
    border-radius: 45% 45% 50% 55% / 33% 33% 65% 70%;
}

.head-shadow {
    position: absolute;
    background: var(--aang-skin);
    width: 100%;
    height: 100%;
    left: -4%;
    top: -1%;
    z-index: 1;
    border-radius: 45% 45% 50% 55% / 33% 33% 65% 70%;
}

.arrow {
    position: absolute;
    background: var(--aang-arrow);
    width: 22%;
    height: 30%;
    top: 0%;
    left: 40%;
    z-index: 1;
    border-radius: 0%;
    clip-path: polygon(16% 0, 83% 0, 100% 100%, 5% 100%);
}

.arrow-point {
    position: absolute;
    background: var(--aang-arrow);
    width: 57%;
    height: 20%;
    top: 29%;
    left: 23%;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    z-index: 1;
}

.eye-left{
    position: absolute;
    background: var(--aang-eye);
    box-shadow: 2px 2px 5px var(--aang-eye), -2px -2px 5px var(--aang-eye);;
    width: 20%;
    height: 15%;
    top: 50%;
    left: 15%;
    z-index: 1;
    transform: rotate(65deg);
    border-radius: 75% 0%;
}

.eye-right{
    position: absolute;
    background: var(--aang-eye);
    box-shadow: 2px 2px 5px var(--aang-eye), -2px -2px 5px var(--aang-eye);
    width: 20%;
    height: 15%;
    top: 50%;
    right: 13%;
    z-index: 1;
    transform: rotate(34.5deg);
    border-radius: 75% 0%;
}


.ear-left-1 {
    position: absolute;
    background: var(--aang-skin);
    width: 6%;
    height: 7%;
    top: 16%;
    left: 31.5%;
    transform: rotate(-11deg);
    border-radius: 50% 70% 50% 60%;
    z-index: 1;
}
.ear-left-2 {
    position: absolute;
    background: var(--aang-skin);
    width: 5%;
    height: 4%;
    top: 20.1%;
    left: 33.7%;
    transform: rotate(0deg);
    border-radius: 50% 50% 30% 50%;
    z-index: 1;
}
.ear-right-1 {
    position: absolute;
    background: var(--aang-skin);
    width: 6%;
    height: 7%;
    top: 16%;
    right: 31.5%;
    transform: rotate(25deg);
    border-radius: 50% 70% 50% 60%;
    z-index: 1;
}
.ear-right-2 {
    position: absolute;
    background: var(--aang-skin);
    width: 5%;
    height: 4%;
    top: 20.1%;
    right: 33.7%;
    transform: rotate(0deg);
    border-radius: 50% 50% 50% 30%;
    z-index: 1;
}

.eyebrow-left {
    position: absolute;
    background: var(--aang-eyebrow);
    top: 47%;
    left: 10%;
    width: 29%;
    height: 4%;
    transform: rotate(-3deg);
    border-radius: 50% 50% 0% 0% / 100% 100% 0% 0%;
    z-index: 1;
}

.eyebrow-bottom-curve {
    position: absolute;
    background: var(--aang-skin);
    width: 100%;
    height: 95%;
    top: 71.5%;
    left: 0%;
    z-index: 1;
    border-radius: 50%;
}

.eyebrow-right {
    border-radius: 50% 50% 0% 0% / 100% 100% 0% 0%;
    position: absolute;
    background: var(--aang-eyebrow);
    top: 47%;
    right: 7%;
    width: 29%;
    height: 4%;
    transform: rotate(3deg);
    z-index: 1;
}

.eyebrow-bottom-curve {
    position: absolute;
    background: var(--aang-skin);
    width: 100%;
    height: 95%;
    top: 71.5%;
    left: 0%;
    z-index: 1;
    border-radius: 50%;
}

.neck {
    position: absolute;
    background: var(--aang-skin);
    width: 11%;
    height: 10%;
    top: 30.5%;
    left: 45%;
    z-index: 1;
    border-radius: 0% 0% 100% 100%;
    clip-path: polygon(4% 0, 96% 0, 100% 100%, 0% 100%);
}

.neck-shadow {
    position: relative;
    background: var(--aang-skin-shadow);
    width: 100%;
    height: 40%;
    top: -13%;
    left: 0%;
    border-radius: 50%;
}

.collar-back{
    position: absolute;
    background: var(--aang-yellow-shadow);
    width: 24%;
    height: 7%;
    top: 28%;
    left: 38.5%;
    z-index: 1;
    border-radius: 100%;
}

.collar-front-left{
    position: absolute;
    background: var(--aang-yellow);
    top: 31%;
    left: 38%;
    width: 13%;
    height: 11%;
    z-index: 1;
    border-radius: 5% 0% 10% 0%;
    clip-path: polygon(0 0, 75% 26%, 100% 92%, 15% 58%);
}

.collar-front-right{
    position: absolute;
    background: var(--aang-yellow);
    top: 31%;
    right: 37%;
    width: 14%;
    height: 11%;
    z-index: 1;
    border-radius: 0% 5% 10% 40%;
    clip-path: polygon(35% 19%, 100% 0%, 90% 52%, 11% 93%);
}

.cape-1{
    position: absolute;
    background: var(--aang-red);
    width: 58%;
    height: 35%;
    top: 36.3%;
    left: 22%;
    z-index: 1;
    border-radius: 38% 45% 40% 50% / 32% 31% 10% 11%;
}

.cape-triangle{
    position: relative;
    background: var(--aang-yellow);
    top: 25%;
    left: 38%;
    width: 24%;
    height: 70%;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    z-index: 1;
    border-radius: 0%;
}

.cape-rectangle{
    position: relative;
    background: var(--aang-yellow);
    width: 59%;
    height: 24%;
    top: 10%;
    left: 20%;
    z-index: 1;
    border-radius: 0%;
}

.cape-2{
    position: absolute;
    background: var(--aang-red);
    width: 35%;
    height: 12%;
    top: 52%;
    left: 5%;
    z-index: 1;
    border-radius: 20% 10% 10% 30% / 50% 10% 10% 50%;
    transform: rotate(-51deg);
}

.cape-3{
    position: absolute;
    background: var(--aang-red);
    width: 20%;
    height: 5%;
    top: 47.5%;
    left: 12.5%;
    z-index: 1;
    border-radius: 40%;
    transform: rotate(-62deg);
}

.cape-4{
    position: absolute;
    background: var(--aang-red);
    width: 35%;
    height: 12%;
    top: 52%;
    right: 3%;
    z-index: 1;
    border-radius: 20% 10% 10% 50% / 50% 10% 10% 50%;
    transform: rotate(231deg);
}

.cape-5{
    position: absolute;
    background: var(--aang-red);
    width: 20%;
    height: 5%;
    top: 48.7%;
    right: 11%;
    z-index: 1;
    border-radius: 40%;
    transform: rotate(68deg);
}

.torso-1{
    position: absolute;
    background: var(--aang-yellow);
    width: 36%;
    height: 4%;
    top: 70.5%;
    left: 33%;
    z-index: 1;
    border-radius: 10% 10% 20% 20% / 30% 30% 50% 50%;
}
.torso-2{
    position: absolute;
    background: var(--aang-yellow);
    width: 17%;
    height: 3%;
    top: 73%;
    left: 45%;
    z-index: 1;
    border-radius: 50% 50% 50% 50%;
}

.belt{
    position: absolute;
    background: var(--aang-red);
    width: 32%;
    height: 9%;
    top: 73.5%;
    left: 35%;
    z-index: 1;
    overflow: hidden;
    border-radius: 0% 0% 50% 50% / 0% 0% 20% 20%;
}

.fist-left{
    position: absolute;
    background: var(--aang-skin);
    width: 11%;
    height: 8.5%;
    top: 58.8%;
    left: 39.9%;
    z-index: 1;
    border-radius: 24% 40% 20% 70% / 50% 20% 30% 10%;
}

.fist-thumb-left{
    position: relative;
    background: var(--aang-skin);
    width: 65%;
    height: 15%;
    top: -10.5%;
    left: 15%;
    z-index: 1;
    border-radius: 30% 70% 0% 0% / 100% 100% 0% 0%;
}

.thumb-shadow-left{
    position: relative;
    background: var(--aang-skin-shadow);
    width: 80%;
    height: 25%;
    top: 60%;
    left: 30%;
    z-index: 1;
    transform: rotate(6deg);
    border-radius: 20% 80% 10% 10% / 20% 10% 10% 10%;
}

.fist-left-arrow-line{
    position: absolute;
    background: var(--aang-arrow);
    width: 30%;
    height: 12%;
    top: 63%;
    left: 23%;
    z-index: 1;
    border-radius: 0%;
}

.fist-left-arrow-point{
    position: absolute;
    background: var(--aang-arrow);
    width: 25%;
    height: 35%;
    top: 50%;
    left: 52%;
    z-index: 1;
    clip-path: polygon(100% 50%, 0 0, 0 100%);
}

.fist-right{
    position: absolute;
    background: var(--aang-skin);
    width: 11%;
    height: 8.5%;
    top: 58.8%;
    right: 37.9%;
    z-index: 1;
    border-radius: 40% 24% 70% 20% / 20% 50% 10% 30%;
}

.fist-thumb-right{
    position: relative;
    background: var(--aang-skin);
    width: 65%;
    height: 15%;
    top: -10.5%;
    left: 20%;
    z-index: 1;
    border-radius: 70% 30% 0% 0% / 100% 100% 0% 0%;
}

.thumb-shadow-right{
    position: relative;
    background: var(--aang-skin-shadow);
    width: 80%;
    height: 25%;
    top: 60%;
    left: -10%;
    z-index: 1;
    transform: rotate(-5deg);
    border-radius: 80% 20% 10% 10% / 10% 20% 10% 10%;
}

.fist-right-arrow-line{
    position: absolute;
    background: var(--aang-arrow);
    width: 30%;
    height: 12%;
    top: 63%;
    right: 26%;
    z-index: 1;
    border-radius: 0%;
}

.fist-right-arrow-point{
    position: absolute;
    background: var(--aang-arrow);
    width: 25%;
    height: 37%;
    top: 50%;
    right: 54%;
    z-index: 1;
    clip-path: polygon(0% 50%, 100% 0, 100% 100%);
}

.arm-left-1{
    position: absolute;
    background: var(--aang-yellow);
    width: 19%;
    height: 7%;
    top: 61%;
    left: 24%;
    z-index: 1;
    overflow: hidden;
    border-radius: 90% 10% 10% 90% / 20% 50% 10% 10%;
}

.arm-left-2{
    position: absolute;
    background: var(--aang-yellow);
    width: 22%;
    height: 8%;
    top: 60%;
    left: 14%;
    z-index: 1;
    overflow: hidden;
    border-radius: 10% 90% 40% 30% / 40% 60% 20% 60%;
}

.arm-left-shadow{
    position: absolute;
    background: var(--aang-yellow-shadow);
    width: 9%;
    height: 2%;
    top: 66.5%;
    left: 33.6%;
    z-index: 1;
    border-radius: 0% 0% 10% 0% / 0% 0% 90% 0%;
}

.arm-left-band{
    position: absolute;
    background: var(--aang-red);
    width: 20%;
    height: 130%;
    top: -10%;
    left: 60%;
    z-index: 1;
    transform: rotate(-5deg);
    border-radius: 50%;
}

.arm-left-band-transparent {
    position: relative;
    background: var(--aang-yellow);
    width: 30%;
    height: 100%;
    top: 0%;
    left: 0%;
    border-radius: 50%;
}

.arm-left-band-2{
    position: absolute;
    background: var(--aang-red);
    width: 30%;
    height: 104%;
    top: -3%;
    left: 2%;
    z-index: 1;
    transform: rotate(10deg);
    border-radius: 50%;
}

.arm-left-band-2-transparent {
    position: relative;
    background: var(--aang-yellow);
    width: 70%;
    height: 100%;
    top: 0%;
    left: 40%;
    border-radius: 50%;
}

.arm-left-3{
    position: absolute;
    background: var(--aang-yellow);
    width: 10%;
    height: 5%;
    top: 58%;
    left: 14%;
    z-index: 1;
    border-radius: 40% 60% 0% 10% / 100% 100% 0% 0%;
}

.arm-left-3-shadow{
    position: relative;
    background: var(--aang-red);
    width: 56%;
    height: 25%;
    top: 32%;
    left: 40%;
    z-index: 1;
    transform: rotate(6deg);
    border-radius: 90% 0% 0% 0% / 40% 0% 0% 0%;
}

.arm-right-1{
    position: absolute;
    background: var(--aang-yellow);
    width: 19%;
    height: 7%;
    top: 61%;
    right: 22%;
    z-index: 1;
    overflow: hidden;
    border-radius: 10% 90% 90% 10% / 50% 20% 10% 10%
}

.arm-right-2{
    position: absolute;
    background: var(--aang-yellow);
    width: 22%;
    height: 8%;
    top: 60%;
    right: 12%;
    z-index: 1;
    overflow: hidden;
    border-radius: 90% 10% 30% 40% / 60% 40% 60% 20%
}

.arm-right-shadow{
    position: absolute;
    background: var(--aang-yellow-shadow);
    width: 8.3%;
    height: 2%;
    top: 66.5%;
    left: 59.5%;
    z-index: 1;
    border-radius: 0% 0% 0% 10% / 0% 0% 0% 90%;
}

.arm-right-band{
    position: absolute;
    background: var(--aang-red);
    width: 20%;
    height: 130%;
    top: -10%;
    right: 58%;
    z-index: 1;
    transform: rotate(5deg);
    border-radius: 50%;
}

.arm-right-band-transparent {
    position: relative;
    background: var(--aang-yellow);
    width: 30%;
    height: 100%;
    top: 0%;
    right: -72%;
    border-radius: 50%;
}

.arm-right-band-2{
    position: absolute;
    background: var(--aang-red);
    width: 30%;
    height: 104%;
    top: -4%;
    right: 0%;
    z-index: 1;
    transform: rotate(-10deg);
    border-radius: 50%;
}

.arm-right-band-2-transparent {
    position: relative;
    background: var(--aang-yellow);
    width: 70%;
    height: 100%;
    top: 0%;
    right: 8%;
    border-radius: 50%;
}

.arm-right-3{
    position: absolute;
    background: var(--aang-yellow);
    width: 10%;
    height: 5%;
    top: 58%;
    right: 12%;
    z-index: 1;
    overflow: hidden;
    border-radius: 60% 40% 10% 0% / 100% 100% 0% 0%;
}

.arm-right-3-shadow{
    position: relative;
    background: var(--aang-red);
    width: 66%;
    height: 25%;
    top: 32%;
    right: -2%;
    z-index: 1;
    transform: rotate(-6deg);
    border-radius: 0% 90% 0% 0% / 0% 40% 0% 0%;
}

.pants-1{
    position: absolute;
    background: var(--aang-yellow);
    width: 38%;
    height: 11%;
    top: 80.5%;
    left: 31%;
    z-index: 1;
    border-radius: 20% 20% 10% 10% / 15% 20% 10% 10%;
}

.pants-2{
    position: absolute;
    background: var(--aang-yellow);
    width: 22%;
    height: 18.4%;
    top: 79%;
    left: 6.5%;
    z-index: 1;
    transform: rotate(25deg);
    border-radius: 30% 60% 20% 70% / 70% 2% 50% 30%;
}

.pants-3{
    position: absolute;
    background: var(--aang-yellow);
    width: 23%;
    height: 18.8%;
    top: 79.1%;
    right: 4.6%;
    z-index: 1;
    transform: rotate(-25deg);
    border-radius: 40% 40% 90% 10% / 2% 70% 30% 20%;
}

.pants-4{
    position: absolute;
    background: var(--aang-yellow);
    width: 24%;
    height: 10%;
    top: 81.5%;
    left: 15%;
    z-index: 1;
    transform: rotate(15deg);
    border-radius: 0%;
}

.pants-5{
    position: absolute;
    background: var(--aang-yellow);
    width: 24%;
    height: 10%;
    top: 81%;
    right: 14%;
    z-index: 1;
    transform: rotate(-15deg);
    border-radius: 45%;
}

.pants-shadow{
    position: absolute;
    width: 2%;
    height: 8.6%;
    top: 87%;
    left: 16.9%;
    z-index: 1;
    transform: rotate(4deg);
    border-radius: 50%;
}

.shin-left-1{
    position: absolute;
    background: var(--aang-boot);
    width: 42%;
    height: 5.6%;
    top: 91.8%;
    left: 22%;
    z-index: 1;
    clip-path: polygon(0 0, 100% 25%, 100% 95%, 0% 100%);
    border-radius: 0%;
}

.shin-left-2{
    position: absolute;
    background: var(--aang-boot-shadow);
    width: 30%;
    height: 5%;
    top: 93%;
    left: 17.5%;
    z-index: 1;
    border-radius: 0% 0% 70% 30% / 0% 0% 30% 70%;
}

.shin-left-3{
    position: absolute;
    background: var(--aang-boot);
    width: 16%;
    height: 6%;
    top: 87%;
    left: 17.5%;
    z-index: 1;
    border-radius: 10% 60% 0% 0% / 100% 80% 0% 0%;
}

.shin-left-4{
    position: absolute;
    background: var(--aang-boot);
    width: 20%;
    height: 5%;
    top: 90.3%;
    left: 27%;
    z-index: 1;
    transform: rotate(22deg);
    border-radius: 10% 10% 50% 10% / 10% 10% 50% 10%;
}

.shin-left-1-shadow{
    position: absolute;
    background: var(--aang-boot-shadow);
    width: 14%;
    height: 25%;
    top: 82%;
    left: 54%;
    z-index: 1;
    border-radius: 0% 50% 0% 0% / 0% 60% 0% 0%;
}

.shin-left-1-band{
    position: absolute;
    background: var(--aang-boot-band);
    width: 12%;
    height: 120%;
    top: -10%;
    left: 63%;
    z-index: 1;
    overflow: hidden;
    border-radius: 50%;
}

.shin-left-1-band-transparent{
    position: absolute;
    background: var(--aang-boot);
    width: 5%;
    height: 120%;
    top: -10%;
    left: 71%;
    z-index: 1;
    overflow: hidden;
    border-radius: 50%;
}

.shin-left-2-shadow{
    position: absolute;
    background: var(--aang-boot);
    width: 103%;
    height: 85%;
    top: 0%;
    left: 0%;
    z-index: 1;
    transform: rotate(0deg);
    border-radius: 0% 0% 70% 30% / 0% 0% 30% 70%;
}

.shin-left-foot-bottom{
    position: absolute;
    background: var(--aang-boot);
    width: 10%;
    height: 3%;
    top: 95%;
    left: 53%;
    z-index: 1;
    transform: rotate(15deg);
    border-radius: 0%;
}

.shin-left-foot-top{
    position: absolute;
    background: var(--aang-boot);
    width: 9.5%;
    height: 3%;
    top: 91%;
    left: 54%;
    z-index: 1;
    clip-path: polygon(60% 0% , 0% 100%, 100% 100%, 100% 0%);
    border-radius: 70% 30% 10% 10% / 100% 100% 10% 10%;
}

.shin-right-1{
    position: absolute;
    background: var(--aang-boot-shadow);
    width: 35.6%;
    height:  8%;
    top: 89%;
    left: 46%;
    z-index: 1;
    clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 100%);
    border-radius: 10% 5% 10% 10% / 10% 15% 60% 10%;
}

.shin-right-2{
    position: absolute;
    background: var(--aang-boot-shadow);
    width: 8%;
    height: 4%;
    top: 90%;
    left: 39%;
    z-index: 1;
    transform: rotate(16deg);
    border-radius: 0%;
}

.shin-right-2-band{
    position: absolute;
    background: var(--aang-boot-band);
    width: 40%;
    height: 100%;
    top: 0%;
    left: 25%;
    z-index: 1;
    border-radius: 0%;
}

.shin-right-3{
    position: absolute;
    background: var(--aang-boot-shadow);
    width: 24.5%;
    height: 4.7%;
    top: 85.6%;
    left: 57%;
    z-index: 1;
    clip-path: polygon(64% 0%, 100% 0%, 100% 100%, 0% 100%);
    border-radius: 70% 30% 10% 10% / 100% 100% 10% 10%;
}

.shin-right-4{
    position: absolute;
    background: var(--aang-boot-shadow);
    width: 11%;
    height: 4%;
    top: 88%;
    left: 32%;
    z-index: 1;
    border-radius: 30% 70% 0% 0% / 70% 100% 0% 0%;
}

.shoe-sole{
    position: absolute;
    background: var(--aang-boot-bottom);
    width: 7%;
    height: 12%;
    top: 91%;
    left: 63%;
    z-index: 1;
    transform: rotate(-15deg);
    border-radius: 50% 30% 50% 40% / 30% 50% 50% 30%;
}

.shoe-top-1{
    position: absolute;
    background: var(--aang-boot-top);
    width: 6%;
    height: 6.1%;
    top: 90.8%;
    left: 60.7%;
    z-index: 1;
    transform: rotate(45deg);
    border-radius: 30% 70% 0% 100% / 30% 50% 0% 30%;
}

.shoe-top-1-transparent{
    position: absolute;
    background: var(--aang-boot);
    width: 50%;
    height: 80%;
    top: 29%;
    left: -21%;
    z-index: 1;
    border-radius: 50% 50% 100% 0% / 50% 50% 10% 0%;
}

.shoe-top-2{
    position: absolute;
    background: var(--aang-boot-top);
    width: 5.1%;
    height: 4%;
    top: 95%;
    left: 58.8%;
    z-index: 1;
    transform: rotate(25deg);
    border-radius: 20% 0% 0% 0% / 60% 0% 0% 0%;
}

.shoe-top-3{
    position: absolute;
    background: var(--aang-boot-top);
    width: 6%;
    height: 6.5%;
    top: 97%;
    left: 61%;
    z-index: 1;
    transform: rotate(-15deg);
    border-radius: 0% 0% 0% 90%;
}
.footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    background-color: #fff;
    text-align: center;
  }
  .footer a {
    text-decoration: none;
    color: red;
  }
  .footer a:hover {
    text-decoration: underline;
    color: #000
  }