* {
    box-sizing: border-box;
    --wingColor: #69433D;
    --mainColor:#A76D52;
    --innerColor: #E6C393;
    --beakYellow: #f4a735;
}

body {
    width: 100vw;
    height: 100vh;
    display:flex;
    justify-content: center;
    align-items: center;
    background: #a5c0d6;
    
    overflow: hidden;
    max-height: 100vh;
}

.container{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.headContainer{
    z-index: 300;
    display:flex;
    justify-content:center;

}

.headSides {
    display: grid; 
    grid-template-columns: auto auto;
}

.head, .innerHead {
    height:280px;
    width: 280px;
    border-radius: 50%;
    position: relative;
    background: var(--mainColor);
    display:flex;
    justify-content:center;
    align-items: center;
}

.innerHead {
    background: var(--innerColor);
    height:220px;
    width: 220px;
    z-index:350;
    filter: blur(8px);
}

.head.left {
    right: -75px;
}
.head.right {
    left: -75px;
}

.headCenter {
    position: absolute;
    display: flex;
    justify-content: center;

}

.eyebrow {
position: relative; 
width: 0;
height: 0;
border-style: solid;    
top: -15px;
border-width: 200px 175px 0 175px;
border-color:  var(--wingColor) transparent transparent transparent;
z-index: 500;
display: flex;
justify-content: center;
align-items: flex-end;
border-radius:50px;
}

.innerEyebrow {
    position: relative; 
    width: 0;
    height: 0;
    border-style: solid;    
    top: -25px;
    border-width: 150px 125px 0 125px;
    border-color: var(--mainColor) transparent transparent transparent;
    z-index: 500;
    filter: blur(8px);
}
    
.beak {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 70px 50px 0 50px;
    border-color: var(--beakYellow) transparent transparent transparent;
    z-index: 500;
    top: 150px;
    border-radius: 50%;
}

.eye {
    width: 100px;
    height: 100px;
    background: linear-gradient(149deg, rgba(253,187,45,1) 0%, rgba(223,120,45,1) 33%, rgba(240,197,75,1) 64%);
    border-radius: 50%;
    z-index: 450;
    position: absolute;
    border: 1px solid black;
    display:flex;
    justify-content: center;
    align-items:center;
}

.eye::after {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    z-index: 450;
    background:#000;   
}

.eyeShine {
    width: 30px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    z-index: 500    ;
    transform: rotate(40deg);   
    position: absolute;
    border: 1px solid black;

}

.eyeShine.left {
    top: 5px;
    left: 10px;
}

.eyeShine.right {
    top: 7px;
    left: 40px;
}

.eyeShine::after {
    content: "";
    width: 20px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    z-index: 500;   
    position: absolute;
    border: 1px solid black;
}

.eyeShine.left::after {
    top: 20px;
    left: 65px;
}

.eyeShine.right::after {
    top: 20px;
    left: 45px;
}

.body {
    position: relative;
    top:-100px;
    display:flex;
}

.belly {
    height:400px;
    width: 410px;
    background: var(--mainColor);
    border-bottom-left-radius: 60%;
    border-bottom-right-radius: 60%;
    border-top-left-radius: 80%;
    border-top-right-radius: 80%;
    z-index: 200;
    display: flex;
    justify-content:center;
    align-items:center;

}

.belly::after {
    content: "";
    height:330px;
    width: 330px;
    background: var(--innerColor);
    border-bottom-left-radius: 60%;
    border-bottom-right-radius: 60%;
    border-top-left-radius: 80%;
    border-top-right-radius: 80%;
    z-index: 200;
    filter: blur(8px);

}

.wing {
    background: var(--wingColor);
    width: 145px;
    height: 320px;
    position: relative;
    top: 40px;
    border-radius: 50%;
    border: 1px solid black;

}

.wing.left{    
    left: 110px;
    transform: rotate(10deg)
}

.wing.right {
    right: 110px;
    transform: rotate(-10deg)
}

.feet {
    display: flex;
    justify-content: space-around;
    width: 350px;
    position: relative;
    bottom: 12px;
}


.foot, .foot::after, .foot::before {
    width: 20px;
    height: 75px;
    background: var(--beakYellow);
    z-index: 200;
    bottom:125px;
    border-radius: 50%;
}

.foot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-content: space-around;
    flex-wrap: wrap;
    
}

.foot::after, .foot::before {
    content: "";
    margin: 0 5px
}


main{
  padding: 0;
}

footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: white;
    font-size: 20px;
    background-color: #134e4e;
    padding: 1rem 6rem;
    display: flex;
    justify-content: space-around;
}

a:active, a:visited, a:link {
    color: white;
    text-decoration: none;
}