body, html { background-color: #252524; margin: 0px; padding: 0px; } .zombie { width: 100px; height: 100px; background-color: #CFD665; border-radius: 100%; position: absolute; margin-left: -44px; margin-top: -128px; box-shadow: inset 9px 0px 0px #B7B849; } .zombie:hover .Zblood:after { height: 22px; } .zombie:hover .Zblood:before { height: 16px; } .headThing { width: 25px; height: 28px; position: absolute; background-color: #252524; border-radius: 100%; margin-left: 55px; margin-top: -10px; overflow: hidden; } .brain { content: ' '; width: 90px; height: 90px; margin-left: 0px; margin-top: 0px; position: absolute; background-color: #FE98A6; border-radius: 100%; margin-top: 13px; margin-left: -50px; } .Zline { width: 29px; height: 4px; background-color: #B7B849; position: absolute; margin-left: 37px; margin-top: 20px; } .Zline:before { content: ' '; width: 42px; height: 4px; background-color: #B7B849; position: absolute; margin-left: -7px; margin-top: 10px; } .Zeye { width: 12px; height: 12px; background-color: #FEFEFE; border-radius: 100%; position: absolute; margin-top: 40px; margin-left: 20px; border: 4px solid #B7B849; } .Zeye:after { content: ' '; width: 12px; height: 12px; background-color: #FEFEFE; border-radius: 100%; position: absolute; margin-top: -4px; margin-left: 40px; border: 4px solid #B7B849; } .Znose { width: 7px; height: 7px; background-color: #252524; border-radius: 100%; position: absolute; margin-top: 63px; margin-left: 42px; } .Znose:after { content: ' '; width: 7px; height: 7px; background-color: #252524; border-radius: 100%; position: absolute; margin-top: 0px; margin-left: 13px; } .Zear { width: 17px; height: 22px; background-color: #B7B849; border-radius: 20px 0px 0px 20px; position: absolute; margin-left: -10px; margin-top: 47px; } .Zear:before { content: ' '; width: 17px; height: 22px; background-color: #CFD665; border-radius: 0px 20px 20px 0px; position: absolute; margin-left: 104px; margin-top: 0px; } .Zmouth { width: 40px; height: 12px; background-color: #252524; border-radius: 4px; position: absolute; margin-left: 32px; margin-top: 75px; } .Zteeth { width: 5px; height: 3px; background-color: #FEFEFE; position: absolute; margin-left: 10px; margin-top: 0px; } .Zteeth:after { content: ' '; width: 5px; height: 3px; background-color: #FEFEFE; position: absolute; margin-left: 14px; margin-top: 0px; } .Zteeth:before { content: ' '; width: 5px; height: 3px; background-color: #FEFEFE; position: absolute; margin-left: 5px; margin-top: 9px; } .Zblood { width: 25px; height: 4px; background-color: #993D47; border-bottom-left-radius: 7px; position: absolute; margin-left: 8px; margin-top: 12px; } .Zblood:after { content: ' '; width: 7px; height: 10px; background-color: #993D47; border-radius: 7px; position: absolute; margin-left: 18px; margin-top: 0px; transition: all 0.5s linear; } .Zblood:before { content: ' '; width: 7px; height: 4px; background-color: #993D47; border-radius: 7px; position: absolute; margin-left: 4px; margin-top: 0px; transition: all 0.5s linear; } .wrap { width: 10px; height: 10px; display: block; margin: auto; top: 0; left: 0; right: 0; bottom: 0; position: absolute; } h1 { color: white; font-family: creepster; text-indent: 10px; line-height: 10px; font-size: 25px; } .wolf { width: 87px; height: 87px; background-color: #FEB672; border-radius: 100%; position: absolute; margin-left: -122px; margin-top: -20px; border: 9px solid #8D3B44; } .wolf:after { content: ' '; width: 0px; height: 0px; position: absolute; margin-left: 35px; margin-top: 0px; border: 9px solid transparent; border-top: 9px solid #8D3B44; } .wolf:hover .Wmouth { height: 9px; border-radius: 0px 0px 3px 3px; margin-top: 73px; } .wolf:hover .Weye { background-color: #F64E5D; } .wolf:hover .Weye:after { background-color: #F64E5D; } .Wline { width: 29px; height: 4px; background-color: #E19C65; position: absolute; margin-left: 30px; margin-top: 20px; } .Wline:before { content: ' '; width: 42px; height: 4px; background-color: #E19C65; position: absolute; margin-left: -7px; margin-top: 10px; } .Weye { width: 12px; height: 12px; background-color: #FEFEFE; border-radius: 100%; position: absolute; margin-top: 43px; margin-left: 15px; transition: all 0.2s linear; } .Weye:after { content: ' '; width: 12px; height: 12px; background-color: #FEFEFE; border-radius: 100%; position: absolute; margin-top: 0px; margin-left: 46px; } .Wnose { width: 21px; height: 8px; background-color: #252524; position: absolute; margin-top: 53px; margin-left: 34px; border-radius: 5px 5px 0px 0px; } .Wnose:after { content: ' '; width: 7px; height: 4px; background-color: #252524; position: absolute; margin-top: 8px; margin-left: 0px; border-radius: 0px 0px 5px 5px; box-shadow: 14px 0px 0px #252524; } .Wnose:before { content: ' '; width: 7px; height: 7px; background-color: #252524; position: absolute; margin-top: 8px; margin-left: 7px; border-radius: 0px 0px 5px 5px; } .Wmouth { width: 35px; height: 4px; background-color: #E19C65; position: absolute; margin-top: 74px; margin-left: 27px; transition: all 0.2s linear; } .Wmouth:before { content: ' '; width: 0px; height: 0px; border: 5px solid transparent; border-bottom: 7px solid #FEFEFE; position: absolute; margin-top: -12px; margin-left: 0px; } .Wmouth:after { content: ' '; width: 0px; height: 0px; border: 5px solid transparent; border-bottom: 7px solid #FEFEFE; position: absolute; margin-top: -12px; margin-left: 25px; } .Wear { height: 25px; width: 18px; background-color: #FEB672; position: absolute; margin-left: -22px; margin-top: 33px; z-index: -1; border-bottom-left-radius: 20px; } .Wear:after { content: ' '; height: 0px; width: 0px; position: absolute; margin-left: 0px; margin-top: -18px; border: 12px solid transparent; border-bottom: 12px solid #FEB672; border-left: 12px solid #FEB672; } .WearTwo { height: 25px; width: 18px; background-color: #FEB672; position: absolute; margin-left: 92px; margin-top: 33px; z-index: -1; border-bottom-right-radius: 20px; } .WearTwo:after { content: ' '; height: 0px; width: 0px; position: absolute; margin-left: -6px; margin-top: -18px; border: 12px solid transparent; border-bottom: 12px solid #FEB672; border-right: 12px solid #FEB672; } .vam { width: 100px; height: 100px; background-color: #FEFEFE; border-radius: 100%; position: absolute; margin-left: 40px; margin-top: -11px; box-shadow: inset 9px 0px 0px rgba(0, 0, 0, 0.2); } .vam:hover .Vblood { animation: blood 0.3s infinite linear; } .Veye { width: 11px; height: 11px; background-color: ; } .Vear { height: 25px; width: 18px; background-color: #cbcbcb; position: absolute; margin-left: -13px; margin-top: 33px; z-index: -1; border-bottom-left-radius: 20px; } .Vear:after { content: ' '; height: 0px; width: 0px; position: absolute; margin-left: 0px; margin-top: -18px; border: 12px solid transparent; border-bottom: 12px solid #cbcbcb; border-left: 12px solid #cbcbcb; } .VearTwo { height: 25px; width: 18px; background-color: #FEFEFE; position: absolute; margin-left: 94px; margin-top: 33px; z-index: -1; border-bottom-right-radius: 20px; } .VearTwo:after { content: ' '; height: 0px; width: 0px; position: absolute; margin-left: -6px; margin-top: -18px; border: 12px solid transparent; border-bottom: 12px solid #FEFEFE; border-right: 12px solid #FEFEFE; } .Veye { width: 12px; height: 12px; background-color: #F64E5D; border-radius: 100%; position: absolute; margin-top: 43px; margin-left: 23px; transition: all 0.2s linear; } .Veye:after { content: ' '; width: 12px; height: 12px; background-color: #F64E5D; border-radius: 100%; position: absolute; margin-top: 0px; margin-left: 46px; } .Vnose { width: 0px; height: 0px; border: 10px solid transparent; border-bottom: 8px solid #cbcbcb; position: absolute; margin-top: 48px; margin-left: 42px; } .Vmouth { width: 38px; height: 12px; background-color: #252524; position: absolute; margin-top: 75px; margin-left: 34px; border-radius: 0px 0px 10px 10px; } .Vmouth:before { content: ' '; height: 0px; width: 0px; position: absolute; margin-left: 5px; margin-top: 0px; border: 5px solid transparent; border-top: 5px solid #E09F31; } .Vmouth:after { content: ' '; height: 0px; width: 0px; position: absolute; margin-left: 22px; margin-top: 0px; border: 5px solid transparent; border-top: 5px solid #E09F31; } .Vblood { width: 10px; height: 10px; background-color: #F64E5D; border-radius: 0px 10px 10px 10px; transform: rotate(45deg); margin-left: 56px; margin-top: 93px; position: absolute; } @keyframes blood { to { margin-top: 120px; } } .particles { width: 135px; height: 45px; background-color: lightgray; top: 0px; right: 0px; position: fixed; line-height: 22px; font-size: 20px; padding: 10px; border-bottom-left-radius: 10px; font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', Roboto, Arial, Sans-serif; color: #151B1F; text-align: center; } a { color: #1abc9c; }