html {
    height: 100%;
  }

body {
    font-family: 'Josefin Slab', serif;
    width: 100%;
    min-height: 100%;
    margin: 0;
    zoom: 250%;
    background-image: radial-gradient(farthest-side at 75%, #3998bc, rgb(14, 11, 19));
}

.sections{
    padding: 20px;
}

.title{
    text-align: center;
    color: #fbd50e;
}

#homer {
    width: 94px;
    height: 133px;
    position: relative;
    padding: 15px;
    background-color: #3b8aab;
    z-index: -1;
}

#homer * {
    position: absolute;
    background-color: #fbd800;
    border: 1px solid #110b00;
}

#homer .border-none {
    border: none;
}

#homer .mask {
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    background: transparent;
    border: none;
    box-shadow: inset 0 -40px 25px -10px #110b00;
}

#homer .head-top {
    width: 65px;
    height: 62px;
    border-radius: 43% 44% 0 0;
    top: 20px;
    transform: rotate(-20deg);
    border-color: #110b00 #110b00 transparent #110b00;
    box-shadow: inset 8px 12px 0 -12px rgb(247 254 140),
        inset 13px 3px 0 -11px rgb(247 254 140),
        inset -2px 0 0 0 rgb(229 158 4);
}

#homer .hair-top {
    width: 25px;
    height: 15px;
    background: 0, 0;
    top: 28px;
    left: 6px;
    z-index: -1;
}

#homer .hair-top .strand-1,
#homer .hair-top .strand-2
{
    border-radius: 22px 22px 0 0;
    position: absolute;
    background: 0, 0;
}

#homer .hair-top .strand-1 {
    width: 25px;
    height: 13px;
    top: -17px;
    left: 16px;
    transform: rotate(-16deg);
}

#homer .hair-top .strand-2 {
    width: 22px;
    height: 11px;
    top: -9px;
    left: 7px;
    transform: rotate(-31deg);
}

#homer .head-center {
    width: 50px;
    height: 35px;
    top: 60px;
    right: 36px;
    display: flex;
    margin: auto;
}

#homer .hair {
    content: "";
    width: 10px;
    height: 10px;
    top: 22.5px;
    left: -10px;
    border: none;
    border-radius: 2px 0 0px 0px;
    background-color: transparent;
    z-index: 2;
}

#homer .hair .strand {
    width: 14px;
    height: 0.8px;
    top: 0;
    margin: auto;
    background-color: #110b00;
}

#homer .hair .strand.strand-1 {
    transform: rotate(79deg);
    top: 12px;
    left: -13px;
}

#homer .hair .strand.strand-2 {
    transform: rotate(44deg);
    top: 9px;
    left: -9.2px;
    width: 12px;
}

#homer .hair .strand.strand-3 {
    width: 15px;
    transform: rotate(95deg);
    top: 6.2px;
    left: -5.6px;
}

#homer .hair .strand.strand-4 {
    transform: rotate(229deg);
    top: 4.2px;
}

#homer .head-center .eyes {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    border-color: #000;
    background-color: #fff;
    top: 3px;
    box-shadow: -1px -1.5px 0 0 rgb(247 254 140);
    z-index: 4;
    overflow: hidden;
}

#homer .head-center .eyes.eye.left {}

#homer .head-center .eyes.eye.right {
    top: -2px;
    right: -8px;
    box-shadow: -2px -1px 0 0 rgb(247 254 140);
    z-index: 2;
}

#homer .head-center .eyes.eye.left::before,
#homer .head-center .eyes.eye.right::before {
    content: "";
    display: block;
    position: absolute;
    margin: auto;
    border-radius: 50%;
    background-color: #110b00;
}

#homer .head-center .eyes.eye.left::before {
    width: 4px;
    height: 4px;
    top: 40%;
    left: 35%;
    overflow: hidden;
}


#homer .head-center .eyes.eye.right::before {
    width: 4px;
    height: 4px;
    top: 35%;
    left: 59%;
}

#homer .head-center .eyes .eyelid-top, .eyelid-bottom {
    width: 35px;
    height: 35px;
    width: 100%;
    height: 50%;
    margin: auto;
    left: 0;
    right: 0;
}

#homer .head-center .eyes .eyelid-top {
    top: -20px;
    border-top: none;
    animation: homereyelidtop 10s linear 1s infinite running;
}

#homer .head-center .eyes .eyelid-bottom {
    bottom: -20px;
    border-bottom: none;
    animation: homereyelidbottom 10s linear 1s infinite running;
}

@keyframes homereyelidtop {
    0% { top: -20px }
    2% { top: 0px }
    5% { top: -20px }
    100% { top: -20px }
}

@keyframes homereyelidbottom {
    0% { bottom: -20px }
    2% { bottom: 0px }
    5% { bottom: -20px }
    100% { bottom: -20px }
}

#home .head-center .hair {
    width: 1px;
    height: 76px;
    background-color: #110b00;
}

#homer .nose {
    width: 24px;
    height: 11.5px;
    border-radius: 0 25px 25px 0;
    transform: rotate(-16deg);
    right: -3px;
    top: 22px;
    border-color: #110b00 #110b00 #110b00 transparent;
    z-index: 3;
}

#homer .head-bottom {
    width: 58px;
    height: 50px;
    margin: auto;
    bottom: 30px;
    right: 0;
    left: -8px;
    border: none;
    border-radius: 0% 00% 50% 0%;
    background-color: transparent;
}

#homer .head-bottom .mouth {
    width: 48px;
    height: 44px;
    background-color: #cfae67;
    border-radius: 46% 52% 44% 50%;
    bottom: -12.3px;
    left: 10px;
    box-shadow: inset -1px -1px 0 0 rgb(152 110 36);
    z-index: 2;
}

#homer .head-bottom .mouth::before {
    content: "";
    width: 32px;
    height: 25px;
    background-color: #cfae67;
    left: 22px;
    top: -0.5px;
    position: absolute;
    transform: rotate(66deg);
}

#homer .head-bottom .mouth .top {
    content: "";
    width: 17px;
    height: 27px;
    background-color: #cfae67;
    right: -11.3px;
    top: -7.3px;
    transform: rotate(-32deg);
    border-radius: 0 42% 36% 40%;
    z-index: 4;
}

#homer .head-bottom .mouth .center {
    content: "";
    top: 14px;
    left: 7px;
    width: 48px;
    height: 12px;
    background: #cfae67;
    border-radius: 46% 52% 44% 50%;
    border-bottom: 1px solid #110b00;
    transform: rotate(-4deg);
    z-index: 2;
}

#homer .head-bottom .mouth .center::before {
    content: "";
    width: 7px;
    height: 5px;
    position: absolute;
    left: 3px;
    bottom: -1px;
    border-top: 1px solid #110b00;
    border-radius: 50%;
    transform: rotate(-81deg);
}

#homer .head-bottom .mouth .right-top {
    content: "";
    width: 15px;
    height: 30px;
    right: -12px;
    bottom: 24px;
    background-color: #cfae67;
    border-left: none;
    border-top: none;
    border-radius: 50% 52% 44% 50%;
    transform: rotate(325deg);
    z-index: 1;
    box-shadow: inset -2px -1px 0 0 rgb(152 110 36);
}

#homer .head-bottom .mouth .right-bottom {
    content: "";
    width: 48px;
    height: 12px;
    right: -18px;
    bottom: 18.5px;
    background-color: #cfae67;
    border-top: 0;
    border-left: 0;
    border-radius: 50% 52% 44% 50%;
    transform: rotate(-10deg);
    z-index: 1;
    box-shadow: inset -1px 0px 0 0 rgb(152 110 36);
}

#homer .head-bottom .mouth .bottom {
    content: "";
    width: 17px;
    height: 12px;
    left: 33.5px;
    bottom: 15.5px;
    border: 1px solid #110b00;
    border-bottom: none;
    border-left: none;
    background-color: #cfae67;
    border-radius: 50% 52% 44% 50%;
    transform: rotate(17deg);
    z-index: 1;
}

#homer .head-bottom .ear-external {
    width: 11px;
    height: 13px;
    border-radius: 50%;
    top: 17px;
    left: -3px;
}

#homer .head-bottom .ear {
    width: 10px;
    height: 10.5px;
    margin: auto;
    top: 19px;
    left: 4px;
}

#homer .head-bottom .ear::before,
#homer .head-bottom .ear::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 4px;
    margin: auto;
    border-top: 1px solid;
}

#homer .head-bottom .ear::before {
    top: 2px;
    left: -4px;
    border-radius: 50%;
    transform: rotate(-25deg);
}

#homer .head-bottom .ear::after {
    top: 2px;
    left: -2.2px;
    border-radius: 45%;
    transform: rotate(-111deg);
}

#homer .head-bottom .neck-back-1 {
    width: 16px;
    height: 8px;
    background-color: #fbd800;
    top: 6px;
    left: -0.8px;
    border-right: 1px solid;
    z-index: 1;
    transform: rotate(163deg);
    box-shadow: inset -2px 0 0 0 rgb(247 254 140);
}

#homer .head-bottom .neck-back-2 {
    width: 6px;
    height: 36px;
    background-color: transparent;
    top: 14px;
    left: -2px;
    border-right: 1px solid;
    z-index: -1;
    border-radius: 50% 50% 25%;
    transform: rotate(-6deg);
    box-shadow: 2px 0 0 0 rgb(247 254 140), 5px 0 0 0 rgb(251 216 0);
}

#homer .head-bottom .neck-bottom {
    width: 47px;
    height: 22px;
    top: 40px;
    left: 5px;
    border-top: none;
    border-bottom: none;
    box-shadow: inset 2px 0 0 0 rgb(247 254 140);
    z-index: 1;
}

#homer .head-bottom .fill-face {
    width: 48px;
    height: 48px;
    margin: auto;
    top: 0px;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fbd800;
    z-index: -2;
}
@media (max-width: 479px) {
   body{
       zoom: normal;
   }
   
}