@use postcss-nested; body { display: flex; justify-content: center; align-items: center; min-height: 100vh; width: 100%; margin: 0; padding: 0; } .wrap { position: relative; width: 800px; height: 600px; overflow: hidden; } .scene-1 { position: absolute; top: 0px; left: 0px; width: 800px; height: 600px; animation: sceneOne 10s linear infinite; .bg-1 { position: absolute; top: 0px; left: 0px; width: 900px; height: 122px; background: #654143; border-radius: 0 61px 61px 0; &:before { content: ''; position: absolute; top: 122px; left: 0px; width: 822px; height: 250px; background: #704744; } &:after { content: ''; position: absolute; top: 340px; left: 0px; width: 543px; height: 228px; background: #654143; border-radius: 0 56px 35px 0; } } .bg-2 { position: absolute; top: 0px; right: 0px; width: 900px; height: 77px; background: #593640; border-radius: 30px 0 0 30px; &:before { content: ''; position: absolute; top: 360px; right: 0px; width: 870px; height: 222px; background: #654143; border-radius: 68px 0 0 0; } &:after { content: ''; position: absolute; top: 582px; right: 0px; width: 1244px; height: 20px; background: #3F252E; } } .table { position: absolute; top: 326px; left: 397px; width: 208px; height: 14px; background: #377CA6; &:before { content: ''; position: absolute; top: 14px; left: 49px; width: 133px; height: 24px; box-sizing: border-box; border-top: 13px solid #1C101C; border-right: 13px solid #1C101C; border-left: 13px solid #1C101C; } &:after { content: ''; position: absolute; top: 38px; left: 49px; width: 133px; height: 186px; box-sizing: border-box; border-left: 13px solid #271F28; border-bottom: 13px solid #271F28; border-right: 13px solid #271F28; border-radius: 0 0 53px 0; } & > div:nth-child(1) { position: absolute; top: 14px; left: 21px; width: 28px; height: 13px; background: #1C101C; &:before { content: ''; position: absolute; top: 196px; left: 17px; width: 13px; height: 14px; background: #271F28; box-shadow: 0 14px 0 #1C101C, 0 27px 0 #271F28, 0 31px 0 #271F28; } &:after { content: ''; position: absolute; top: 204px; left: 99px; width: 13px; height: 18px; background: #1C101C; box-shadow: 0 18px 0 #271F28; } } & > div:nth-child(2) { position: absolute; top: -96px; left: 89px; width: 86px; height: 96px; background: #271F28; border-radius: 27px 27px 40px 0; box-shadow: inset -8px -59px 0 9px #1C101C; &:before { content: ''; position: absolute; top: 28px; left: -50px; width: 67px; height: 10px; background: #D37241; box-shadow: 28px 0 0 0 #AA375F, 27px 0 0 0 #740748, -9px 10px 0 0 #1C101C, 28px 10px 0 0 white, -23px 28px 0 0 #377CA6, 28px 28px 0 0 #D37241, -28px 38px 0 0 white, 27px 38px 0 0 white; } &:after { content: ''; position: absolute; top: 62px; left: 67px; width: 27px; height: 27px; background-image: linear-gradient(to right, #377CA6 36%, #1C101C 37%, #1C101C 63%, #377CA6 64%); box-shadow: 0 0 0 6px #1C101C, 0 -5px 0 12px #234259; } } & > div:nth-child(3) { position: absolute; top: -71px; left: 40px; width: 97px; height: 5px; background: #404040; box-shadow: -3px 25px 0px 3px #404040, -14px 25px 0px 3px #404040, -8px 58px 0px 8px #404040, -32px 58px 0px 8px #404040; &:before { content: ''; position: absolute; top: 0px; left: -8px; width: 5px; height: 50px; background: #404040; box-shadow: 14px 0 0 0 #404040, 28px 0 0 0 #404040, 42px 0 0 0 #404040, 56px 0 0 0 #404040, 71px 0 0 0 #404040, 85px 0 0 0 #404040, 100px 0 0 0 #404040; } &:after { content: ''; position: absolute; top: 47px; left: 92px; width: 76px; height: 6px; background: white; box-shadow: 0 6px 0 0 #A7AEAF, -7px 12px 0 0 white, 0 18px 0 0 #A7AEAF, -76px 18px 0 0 #1C101C; } } } .tablet { position: absolute; top: 0; left: 0; width: 17px; height: 185px; background: #BEAE9D; transform-origin: top left; transform: rotate(-143deg); box-shadow: inset 0 -13px 0 0 #9C857C, inset 0 45px 0 0 #9C857C; &:after { content: ''; position: absolute; top: 79px; left: -14px; width: 14px; height: 38px; background: #234259; } &:before { content: ''; position: absolute; top: 62px; left: -83px; width: 80px; height: 10px; background: #1C101C; transform: rotate(23deg); transform-origin: 0 0; } } .lamp { position: absolute; top: -304px; left: 46px; width: 21px; height: 21px; border-radius: 20px 20px 0 0; background: #1C101C; &:before { content: ''; position: absolute; top: 13px; left: -9px; width: 43px; height: 10px; background: #271F28; } &:after { content: ''; position: absolute; top: 10px; left: 52px; width: 80px; height: 5px; background: #271F28; box-shadow: 0 10px 0 0 #271F28; } & > div:nth-child(1) { position: absolute; top: 8px; left: 33px; width: 19px; height: 20px; background: #1C101C; border-radius: 20px 0 0 20px; &:after { content: ''; position: absolute; top: -2px; left: 99px; width: 22px; height: 32px; background: #1C101C; border-radius: 2px 100% 14px 14px; } &:before { content: ''; position: absolute; top: 16px; left: 103px; width: 6px; height: 102px; background: #271F28; transform: rotate(35deg); transform-origin: 0 0; box-shadow: 10px 0 0 0 #271F28; } } & > div:nth-child(2) { position: absolute; top: 19px; left: -25px; width: 70px; height: 33px; background: #1C101C; border-radius: 100px 100px 0 0; &:before { content: ''; position: absolute; top: 33px; left: 0px; width: 70px; height: 4px; background: #D37241; } &:after { content: ''; position: absolute; top: 37px; left: -133px; width: 330px; height: 0px; border-left: 132px solid transparent; border-right: 127px solid transparent; border-bottom: 194px solid #D37241; box-sizing: border-box; opacity: .2; } } } .chair { position: absolute; top: 433px; left: 214px; height: 39px; width: 109px; background: #1C101C; border-radius: 28px 28px 2px 2px; box-shadow: 0 123px 0 -15px #271F28; &:before { content: ''; position: absolute; top: 39px; left: 36px; width: 13px; height: 99px; background: #271F28; box-shadow: 12px 0 0 0 #404040; } &:after { content: ''; position: absolute; top: 71px; left: 56px; width: 32px; height: 12px; border-radius: 6px; box-shadow: -21px -48px 0 13px #1C101C; background: #1C101C; } } .armchair { position: absolute; top: 244px; left: 604px; width: 114px; height: 165px; background: #1C101C; border-radius: 20px 62px 0 0; &:before { content: ''; position: absolute; top: 167px; left: 0px; width: 210px; height: 171px; background: #3F252E; } &:after { content: ''; position: absolute; top: 128px; left: 114px; width: 100px; height: 34px; background: #1C101C; box-shadow: inset 0 12px 0 0 #3F252E; } & > div:nth-child(1) { position: absolute; top: 162px; left: 0px; width: 200px; height: 66px; background: #593640; border-radius: 0 0 0 66px; box-shadow: 0 21px 0 0 #1C101C; &:before { content: ''; position: absolute; top: 0px; left: 72px; width: 140px; height: 20px; background: #654036; border-radius: 0 0 0 20px; } &:after { content: ''; position: absolute; top: -80px; left: 0px; width: 71px; height: 80px; background: #593640; border-radius: 0 100px 0 0; } } .plaid { position: absolute; top: 152px; left: 114px; width: 90px; height: 10px; background: #AF7C50; box-shadow: 0 10px 0 0 #956B48, 0 20px 0 0 #AF7C50, 0 30px 0 0 #956B48, 0 40px 0 0 #AF7C50; z-index: 1; &:before { content: ''; position: absolute; top: 50px; left: 0px; width: 10px; height: 14px; background: #956B48; box-shadow: 18px 0 0 0 #956B48, 36px 0 0 0 #956B48, 54px 0 0 0 #956B48, 72px 0 0 0 #956B48; } &:after { content: ''; position: absolute; top: -44px; left: 0px; width: 41px; height: 44px; background: linear-gradient(to right, #AF7C50 50%, #D69C51 51%); border-radius: 24px 24px 0 0; } } } .picture { position: absolute; top: -34px; right: -22px; height: 150px; width: 120px; background: #9C857C; overflow: hidden; box-shadow: 0 0 0 22px #956B48, 0 0 0 43px #3F252E; &:before { content: ''; position: absolute; top: 47px; left: 27px; width: 50px; height: 50px; border-radius: 100%; background: #BEAE9D; } &:after { content: ''; position: absolute; top: 109px; left: 56px; width: 14px; border-left: 29px solid transparent; border-bottom: 35px solid #3F252E; } & > div:nth-child(1) { position: absolute; top: 75px; left: 9px; width: 15px; border-right: 50px solid transparent; border-left: 39px solid transparent; border-bottom: 40px solid #88594E; &:before { content: ''; position: absolute; top: -46px; left: -23px; height: 10px; border-left: 74px solid transparent; border-bottom: 76px solid #88594E; } &:after { content: ''; position: absolute; top: 17px; left: -48px; width: 14px; border-right: 78px solid transparent; border-bottom: 100px solid #654036; } } & > div:nth-child(2) { position: absolute; top: 100px; left: 19px; width: 24px; border-right: 35px solid transparent; border-bottom: 40px solid #654036; &:before { content: ''; position: absolute; top: 9px; left: 32px; width: 50px; height: 40px; background: #654036; } &:after { content: ''; position: absolute; top: 24px; left: -4px; width: 13px; border-right: 20px solid transparent; border-left: 20px solid transparent; border-bottom: 20px solid #3F252E; box-shadow: 8px 44px 0 24px #3F252E; } } } .red-dog { position: absolute; top: 152px; left: 568px; width: 70px; height: 43px; background: #D37241; border-radius: 0 34px 0 0; &:before { content: ''; position: absolute; top: -20px; left: -78px; width: 104px; height: 68px; background: white; border-radius: 0 100px 0 100px; } &__body { position: absolute; top: -44px; left: -65px; width: 81px; height: 74px; background: #D37241; border-radius: 0 100px 0 100px; box-shadow: 35px 24px 0 -24px #D37241, -7px -15px 0 -5px #D37241; &:before { content: ''; position: absolute; top: 30px; left: 15px; width: 35px; height: 40px; background: #D37241; border-radius: 0 0 20px 20px; transform-origin: 0 0; transform: rotate(40deg); } &:after { content: ''; position: absolute; top: 50px; left: 111px; width: 16px; height: 16px; background: #D37241; transform: skewX(-22deg) rotate(-34deg); animation: sceneOneDogTail .8s ease infinite; transform-origin: bottom left; } } &__leg { position: absolute; top: 28px; left: 21px; width: 49px; height: 43px; background: #D37241; border-radius: 0 9px 0 35px; &:before { content: ''; position: absolute; top: 30px; left: 49px; width: 12px; height: 34px; background: linear-gradient(#D37241 38%, white 39%); border-radius: 0 5px 2px 0 / 0 15px 2px 0; } &:after { content: ''; position: absolute; top: 52px; left: 34px; width: 16px; height: 12px; background: white; border-radius: 14px 0 0 0; } } &__hand { position: absolute; top: 15px; left: -96px; width: 43px; height: 22px; background: white; transform-origin: bottom right; transform: rotate(40deg); border-radius: 21px 10px 10px 0; &:before { content: ''; position: absolute; top: 21px; left: 0px; width: 15px; height: 20px; background: white; border-radius: 0 0 0 17px; } } &__head { position: absolute; top: -68px; left: -99px; width: 42px; height: 56px; background: #D37241; border-radius: 36% 0 90% 4px / 70% 0 46% 4px; border-right: 8px solid white; transform-origin: bottom right; animation: sceneOneDogHead 10s ease infinite; transform: rotate(0deg); &:before { content: ''; position: absolute; top: 25px; left: -20px; width: 22px; height: 21px; background: #D37241; border-radius: 27% 0 0 100%; box-shadow: inset 21px 2px 0 -6px white; } &:after { content: ''; position: absolute; top: 20px; left: 9px; width: 6px; height: 6px; background: black; border-radius: 100%; animation: sceneOneDogEye 2s ease infinite; } & > div:nth-child(1) { position: absolute; top: -22px; left: 18px; width: 11px; border-left: 23px solid transparent; border-bottom: 39px solid #D37241; transform-origin: right bottom; transform: rotate(10deg); &:before { content: ''; position: absolute; top: 0px; left: -18px; width: 6px; border-left: 23px solid transparent; border-bottom: 39px solid white; } &:after { content: ''; position: absolute; top: 37px; left: -18px; width: 30px; height: 9px; background: white; transform: rotate(-9deg); border-radius: 0 0 10px 6px; } } & > div:nth-child(2) { position: absolute; top: 25px; left: -20px; width: 10px; height: 9px; background: black; border-radius: 6px 0 15px 3px; } } } .back-table { position: absolute; top: 350px; left: 0px; width: 277px; height: 30px; background: linear-gradient(to right, #956B48 20%, #7A5548 21%, #7A5548 79%, #956B48 80%); box-shadow: 0 25px 0 0 #1C101C, 0 -10px 0 0 #AF7C50; &:before { content: ''; position: absolute; top: 55px; left: 0px; width: 26px; height: 175px; background: #1C101C; box-shadow: 251px 0 0 0 #1C101C; } &:after { content: ''; position: absolute; top: 10px; left: 124px; width: 30px; height: 10px; background: #1C101C; } .books { position: absolute; top: -26px; left: 46px; width: 102px; height: 16px; box-sizing: border-box; background: white; box-shadow: inset -8px 0 0 0 #716C6B; border-radius: 8px 0 0 8px; border: 4px solid #271F28; border-right: 0; &:before { content: ''; position: absolute; top: -28px; left: 10px; width: 88px; height: 24px; box-sizing: border-box; background: white; border-radius: 0 12px 12px 0; border: 6px solid #593640; border-left: 0; box-shadow: inset 6px 0 0 0 #716C6B, inset -23px 0 0 -13px #271F28, inset 0 6px 0 0 rgba(0, 0, 0, .1); } } .frame { position: absolute; top: -92px; left: 148px; width: 46px; height: 62px; background: #D69C51; border: 10px solid #485973; &:before { content: ''; position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; border: 3px solid #553333; transform: rotate(45deg); z-index: 1; } &:after { content: ''; position: absolute; top: 26px; left: 10px; width: 20px; height: 20px; border: 3px solid #553333; transform: rotate(45deg); z-index: 1; } } } .photos { position: absolute; top: 252px; left: 66px; width: 21px; height: 22px; background: #3F252E; border: 4px solid white; border-bottom-width: 10px; transform: rotate(22deg); &:before { content: ''; position: absolute; top: -10px; left: 13px; width: 21px; height: 22px; background: #234259; border: 4px solid white; border-bottom-width: 10px; transform: rotate(-44deg); } &:after { content: ''; position: absolute; top: -5px; left: 8px; width: 8px; height: 8px; background: black; border-radius: 50%; } } .shelf-1 { position: absolute; top: 224px; left: 0px; width: 210px; height: 8px; background: #AF7C50; &:before { content: ''; position: absolute; top: 8px; left: 40px; width: 111px; height: 6px; background: #1C101C; } &:after { content: ''; position: absolute; top: 14px; left: 40px; width: 8px; height: 6px; background: #1C101C; border-radius: 0 0 5px 5px; box-shadow: 103px 0 0 0 #1C101C; } .book { position: absolute; top: -28px; left: 77px; width: 71px; height: 16px; background: white; border: 6px solid #234259; border-right: 0; border-radius: 15px 0 0 15px; box-shadow: inset 24px 0 0 -15px #1C101C, inset 0 6px 0 0 rgba(0, 0, 0, .1); &:before { content: ''; position: absolute; top: -43px; left: 35px; width: 36px; height: 37px; background: linear-gradient(#D5C8B8 12%, #BEAE9D 13%, #BEAE9D 90%, #3F252E 91%); border-radius: 0 0 12px 12px; } &:after { content: ''; position: absolute; top: -38px; left: 71px; width: 14px; height: 22px; box-sizing: border-box; border-radius: 0 12px 12px 0; border: 7px solid #3F252E; border-left: 0; } } .camera { position: absolute; top: -38px; left: 0px; width: 60px; height: 38px; background: linear-gradient(#404040 68%, #271F28 69%); border-radius: 0 8px 0 8px; &:before { content: ''; position: absolute; top: -4px; left: 0px; width: 16px; height: 4px; background: #1C101C; box-shadow: 5px 26px 0 0 #716C6B; } &:after { content: ''; position: absolute; top: 3px; left: 24px; width: 30px; height: 30px; box-sizing: border-box; background: linear-gradient(#716C6B 45%, #94959B 46%); border-radius: 50%; border: 7px solid #1C101C; transform: rotate(-45deg); } &__flash { position: absolute; top: -34px; left: 22px; width: 34px; height: 24px; box-sizing: border-box; background: white; border: 4px solid #271F28; border-top-width: 7px; box-shadow: inset 0 6px 0 0 rgba(0, 0, 0, .1); &:before { content: ''; position: absolute; top: 17px; left: 1px; width: 22px; height: 10px; background: #1C101C; } } } } .shelf-2 { position: absolute; top: 118px; left: 0px; width: 198px; height: 18px; background: #3F252E; box-shadow: -18px 16px 0 0 #593640; &:before { content: ''; position: absolute; top: 18px; left: 180px; border-right: 17px solid transparent; border-top: 16px solid #271F28; } .books { position: absolute; top: -18px; left: 18px; width: 54px; height: 18px; box-sizing: border-box; border-top: 6px solid #956B48; border-bottom: 6px solid #956B48; border-left: 11px solid #956B48; border-right: 11px solid #956B48; background: #AF7C50; box-shadow: -6px 0 0 0 #AF7C50, 6px 0 0 0 #AF7C50; &:before { content: ''; position: absolute; top: -62px; left: -15px; width: 26px; height: 56px; background: #756356; box-shadow: inset 5px 0 0 0 #58433F, inset 0 4px 0 0 #58433F, inset 0 10px 0 0 #756356, inset 0 16px 0 0 #58433F; } &:after { content: ''; position: absolute; top: -47px; left: 11px; width: 26px; height: 41px; background: #58433F; box-shadow: inset 8px 0 0 0 #9C857C, inset 0 -24px 0 0 #BEAE9D, inset 0 7px 0 0 #BEAE9D, inset -8px 0 0 0 #BEAE9D, -6px 0 0 0 #58433F; } } .ship { position: absolute; top: -40px; left: 105px; width: 127px; height: 26px; background: #7A5548; border-radius: 0 0 26% 0 / 0 0 100% 0; &:before { content: ''; position: absolute; top: 0px; left: -25px; width: 25px; height: 6px; background: #7A5548; } &:after { content: ''; position: absolute; top: 12px; left: 3px; width: 8px; height: 8px; background: #7A5548; transform: rotate(45deg); box-shadow: 15px -15px 0 0 #7A5548, 30px -30px 0 0 #7A5548, 45px -45px 0 0 #7A5548, 60px -60px 0 0 #7A5548; } div:nth-child(1) { position: absolute; top: -4px; left: -13px; width: 122px; height: 4px; background: #3F252E; &:before { content: ''; position: absolute; top: -22px; left: 122px; width: 10px; height: 20px; border-radius: 17px 0 0 0; border-top: 6px solid #3F252E; border-left: 8px solid #3F252E; } &:after { content: ''; position: absolute; top: -16px; left: 130px; width: 10px; height: 10px; border-radius: 10px 8px 0 0; border-left: 10px solid #7A5548; border-top: 10px solid #7A5548; } } div:nth-child(2) { position: absolute; top: -14px; left: 0px; width: 47px; height: 6px; background: linear-gradient(to right, #271F28 14%, #7A5548 15%, #7A5548 27%, #271F28 28%, #271F28 44%, #7A5548 45%, #7A5548 57%, #271F28 58%, #271F28 74%, #7A5548 75%, #7A5548 87%, #271F28 88%); border-top: 4px solid #3F252E; &:before { content: ''; position: absolute; top: -68px; left: 15px; width: 4px; height: 64px; background: #3F252E; } &:after { content: ''; position: absolute; top: -68px; left: 65px; width: 6px; height: 74px; background: #3F252E; } } div:nth-child(3) { position: absolute; top: -74px; left: 11px; width: 21px; height: 26px; box-sizing: border-box; background: #716C6B; border: 4px solid #9C857C; border-left: 4px solid #593640; border-radius: 0 13px 13px 0; &:before { content: ''; position: absolute; top: 18px; left: -4px; width: 24px; height: 31px; box-sizing: border-box; border: 4px solid #9C857C; border-left: 4px solid #593640; background: #716C6B; border-radius: 0 16px 16px 0; } &:after { content: ''; position: absolute; top: 12px; left: 43px; width: 38px; height: 48px; box-sizing: border-box; border: 9px solid #9C857C; border-left: 7px solid #593640; background: #716C6B; border-radius: 0 26px 26px 0; } } div:nth-child(4) { position: absolute; top: 6px; left: -19px; width: 136px; height: 24px; background: #3F252E; border-radius: 0 0 30px 30px; &:before { content: ''; position: absolute; top: 24px; left: 28px; width: 80px; height: 4px; background: #271F28; } &:after { content: ''; position: absolute; top: 28px; left: 28px; width: 5px; height: 6px; background: #271F28; box-shadow: 37px 0 0 0 #271F28, 75px 0 0 0 #271F28; } } } } .man { position: absolute; top: 54px; left: 189px; width: 262px; height: 528px; z-index: 1; &__body { position: absolute; top: 241px; left: 0px; width: 118px; height: 61px; background: linear-gradient(to right, #271F28 46%, #1C101C 47%); border-radius: 0 0 100% 5% / 0 0 10% 100%; } &__chest { position: absolute; bottom: 59px; left: 0px; width: 116px; height: 157px; transform-origin: bottom left; animation: sceneOneManBody 10s ease infinite; transform: rotate(10deg) translateY(0px); &:before { content: ''; position: absolute; bottom: 0px; left: 0px; width: 116px; height: 157px; background: linear-gradient(to right, #271F28 46%, #1C101C 47%); transform-origin: bottom left; animation: sceneOneManChest 10s ease infinite; border-radius: 100% 44% 0 0 / 100% 70% 0 0; transform: scaleX(1); } } &__head { position: absolute; top: -98px; left: 44px; width: 87px; height: 74px; background: #271F28; border-radius: 46px 13px 0 0; transform-origin: 0 0; animation: sceneOneManHead 10s ease infinite; transform: rotate(-10deg) translateY(0px) translateX(0px); &:before { content: ''; position: absolute; top: 74px; left: 0px; width: 68px; height: 42px; background: linear-gradient(to right, #F6BE9C 30%, #D7957C 31%); transform-origin: 0 0; animation: sceneOneManNeck 10s ease infinite; transform: rotate(34deg); } div:nth-child(1) { position: absolute; top: 6px; left: 52px; width: 47px; height: 27px; background: #F6BE9C; border-radius: 14px 54% 0 13px / 14px 100% 0 13px; &:before { content: ''; position: absolute; top: 26px; left: -11px; width: 39px; border-left: 19px solid transparent; border-bottom: 23px solid #F6BE9C; } &:after { content: ''; position: absolute; top: 56px; left: 47px; width: 10px; height: 12px; background: #F6BE9C; border-radius: 0 3px 10px 0; } } div:nth-child(2) { position: absolute; top: 46px; left: 8px; width: 24px; height: 24px; border-radius: 50%; background: #D7957C; box-shadow: inset 1px 1px 0 4px #F6BE9C; &:before { content: ''; position: absolute; top: 12px; left: 13px; width: 8px; height: 8px; background: #F6BE9C; border-radius: 50%; } &:after { content: ''; position: absolute; top: 28px; left: -2px; border-right: 20px solid transparent; border-left: 20px solid transparent; border-bottom: 15px solid #F6BE9C; transform-origin: top center; transform: rotate(36deg); } } div:nth-child(3) { position: absolute; top: 55px; left: 24px; width: 47px; height: 59px; background: #271F28; border-radius: 18px 0 0 48px; &:before { content: ''; position: absolute; top: 0px; left: 17px; width: 58px; height: 19px; background: #F6BE9C; border-radius: 0 0 0 21px; } &:after { content: ''; position: absolute; top: 19px; left: 47px; width: 29px; height: 10px; background: #271F28; border-radius: 0 0 8px 0; } } div:nth-child(4) { position: absolute; top: 84px; left: 71px; width: 24px; height: 30px; background: #271F28; border-radius: 0 0 17px 0; &:before { content: ''; position: absolute; top: 0px; left: 5px; width: 17px; height: 8px; background: white; border-radius: 0 0 0 10px; animation: sceneOneManMouth 10s ease infinite; transform: scaleY(1); } &:after { content: ''; position: absolute; top: -34px; left: 11px; width: 5px; height: 13px; background: black; border-radius: 5px; animation: sceneOneManEye 2s ease infinite, sceneOneManEye2 10s ease infinite; transform: scaleY(1); } } div:nth-child(5) { position: absolute; top: 32px; left: 70px; width: 10px; height: 6px; border-radius: 16px 0 0 0; border-top: 7px solid #404040; border-left: 7px solid #404040; animation: sceneOneManBrow 2s ease infinite, sceneOneManBrow2 10s ease infinite; transform: rotate(0deg) translate(0, 0); &:before { content: ''; position: absolute; top: -7px; left: 6px; width: 7px; height: 7px; background: #404040; border-radius: 50%; } &:after { content: ''; position: absolute; top: 1px; left: -7px; width: 7px; height: 7px; background: #404040; border-radius: 50%; } } } &__arm { position: absolute; top: 6px; left: 12px; width: 81px; height: 123px; background: linear-gradient(#404040 49%, #D7957C 50%); border-radius: 42px 42px 39px 0; transform-origin: center top; animation: sceneOneManArm 10s ease infinite; transform: rotate(-34deg) translateY(0px) translateX(0px); &:before { content: ''; position: absolute; top: 118px; left: 0px; width: 40px; height: 50px; background: #D7957C; border-radius: 0 0 0 20px; } &:after { content: ''; position: absolute; top: 50px; left: -6px; width: 93px; height: 33px; background: #94959B; border-radius: 5px; } } &__forearm { position: absolute; top: 165px; left: -31px; width: 67px; height: 100px; background: #F6BE9C; border-radius: 36px 28px 60px 4px; z-index: 1; transform-origin: top center; animation: sceneOneManForearm 10s ease infinite; transform: rotate(-102deg); &:before { content: ''; position: absolute; top: 79px; left: 44px; width: 30px; height: 54px; background: #F6BE9C; transform: rotate(-16deg); border-radius: 5px 30px 15px 10px; box-shadow: 0 14px 0 0 #D7957C; } &:after { content: ''; position: absolute; top: 121px; left: 68px; width: 9px; height: 13px; background: #1C101C; border-radius: 100% 0; } div:nth-child(2) { position: absolute; top: 93px; left: 1px; width: 15px; height: 41px; background: #F6BE9C; transform: rotate(-17deg); border-radius: 12px 8px 8px 11px; box-shadow: 0 15px 0 0 #88594E; &:before { content: ''; position: absolute; top: 0px; left: 8px; width: 20px; height: 57px; background: #F6BE9C; border-radius: 0 0 10px 10px; box-shadow: 0 15px 0 0 #AF736B; } &:after { content: ''; position: absolute; top: 0px; left: 21px; width: 17px; height: 70px; background: #F6BE9C; border-radius: 0 0 0 13px; box-shadow: 0 15px 0 0 #D7957C; } } div:nth-child(1) { position: absolute; top: 80px; left: 45px; width: 20px; height: 95px; background: #F6BE9C; transform: rotate(-17deg); border-radius: 10px; &:before { content: ''; position: absolute; top: 40px; left: 24px; width: 30px; height: 6px; background: #1C101C; transform: rotate(-37deg); } &:after { content: ''; position: absolute; top: 82px; left: -31px; width: 17px; border-left: 11px solid transparent; border-top: 6px solid #1C101C; transform: rotate(-37deg); } } } &__leg { position: absolute; top: 298px; left: 5px; width: 222px; height: 88px; background: linear-gradient(to right, #36779D 56%, #D7957C 57%); border-radius: 0 69px 120px 131px / 0 75px 74px 140px; } &__knee { position: absolute; top: 15px; left: 189px; width: 47px; height: 194px; background: linear-gradient(#D7957C 38%, #D7D7D6 39%, #D7D7D6 55%, white 56%); border-radius: 10px 40px 20px 30px; transform-origin: 50% 0; animation: sceneOneManKnee 10s ease infinite; transform: rotate(23deg); &:before { content: ''; position: absolute; top: 75px; left: -27px; width: 28px; height: 64px; background: linear-gradient(#D7D7D6 50%, white 51%); border-radius: 64% 0 0 100% / 50% 0 0 50%; } &:after { content: ''; position: absolute; top: 75px; left: -10px; width: 13px; height: 33px; background: #A7AEAF; box-shadow: 30px 0 0 0 #A7AEAF; } } &__feet { position: absolute; top: 191px; left: 0px; width: 93px; height: 36px; background: #59BECF; border-radius: 4px 29px 0 0; transform-origin: 0 0; transform: rotate(-20deg); animation: sceneOneManFeet 10s ease infinite; &:before { content: ''; position: absolute; top: 36px; left: -5px; width: 101px; height: 7px; background: #1C101C; border-radius: 2px; } &:after { content: ''; position: absolute; top: -20px; left: 0px; width: 28px; height: 23px; background: #59BECF; border-radius: 0 17px 0 0; } div:nth-child(1) { position: absolute; top: -1px; left: -11px; width: 38px; height: 37px; background: #377CA6; z-index: 1; border-radius: 50% 50% 0 50%; &:before { content: ''; position: absolute; top: 20px; left: 38px; width: 40px; height: 17px; background: #377CA6; border-radius: 0 15px 0 0; } &:after { content: ''; position: absolute; top: -28px; left: 44px; width: 40px; height: 20px; background: #377CA6; border-radius: 30px 30px 0 0; transform: rotate(-56deg); } } div:nth-child(2) { position: absolute; top: -8px; left: 52px; width: 12px; height: 20px; background: #1C101C; z-index: 1; transform: rotate(-4deg); border-radius: 6px; } } } .animation_to_left { animation: sceneOneGoLeft 10s ease infinite; } .animation_to_right { animation: sceneOneGoRight 10s ease infinite; } } @keyframes sceneOneManEye { 0% { transform: scaleY(1); } 5% { transform: scaleY(.1); } 10% { transform: scaleY(1); } } @keyframes sceneOneManBrow { 2% { transform: translateY(0px); } 8% { transform: translateY(7px); } 14% { transform: translateY(0px); } } @keyframes sceneOneDogTail { 0% { transform: skewX(-22deg) rotate(-34deg); } 50% { transform: skewX(-22deg) rotate(16deg); } 100% { transform: skewX(-22deg) rotate(-34deg); } } @keyframes sceneOneDogEye { 60% { transform: scaleY(1); } 65% { transform: scaleY(.1); } 70% { transform: scaleY(1); } } @keyframes sceneOne { 0% { opacity: 1; z-index: 4; } 10.1% { opacity: 1; z-index: 4; } 10.2% { opacity: 0; z-index: 1; } 37.8% { opacity: 0; z-index: 2; } 61.8% { opacity: 0; z-index: 3; } 80.3% { opacity: 0; z-index: 3; } 80.4% { opacity: 1; z-index: 3; } 88.8% { opacity: 1; z-index: 4; } 100% { opacity: 1; z-index: 4; } } @keyframes sceneOneGoLeft { 0% { transform: translateX(0px); } 3% { transform: translateX(0px); } 10.2% { transform: translateX(-900px); } 10.8% { transform: translateX(0px); } } @keyframes sceneOneGoRight { 0% { transform: translateX(0px); } 3% { transform: translateX(0px); } 10.2% { transform: translateX(900px); } 10.8% { transform: translateX(0px); } } @keyframes sceneOneManFeet { 0% { transform: rotate(-20deg); } 12% { transform: rotate(-20deg); } 87% { transform: rotate(-17deg); } 91.8% { transform: rotate(-17deg); } 100% { transform: rotate(-20deg); } } @keyframes sceneOneManKnee { 0% { transform: rotate(23deg); } 12% { transform: rotate(23deg); } 87% { transform: rotate(17deg); } 91.8% { transform: rotate(13deg); } 100% { transform: rotate(23deg); } } @keyframes sceneOneManForearm { 0% { transform: rotate(-102deg); } 12% { transform: rotate(-102deg); } 87% { transform: rotate(-126deg); } 91.8% { transform: rotate(-126deg); } 100% { transform: rotate(-102deg); } } @keyframes sceneOneManArm { 0% { transform: rotate(-34deg) translateY(0px) translateX(0px); } 12% { transform: rotate(-34deg) translateY(0px) translateX(0px); } 87% { transform: rotate(-20deg) translateY(10px) translateX(52px); } 91.8% { transform: rotate(-19deg) translateY(12px) translateX(41px); } 100% { transform: rotate(-34deg) translateY(0px) translateX(0px); } } @keyframes sceneOneManBrow2 { 0% { transform: rotate(0deg) translate(0, 0); } 12% { transform: rotate(0deg) translate(0, 0); } 87% { transform: rotate(22deg) translate(5px, 9px); } 91.8% { transform: rotate(22deg) translate(4px, 6px); } 100% { transform: rotate(0deg) translate(0, 0); } } @keyframes sceneOneManEye2 { 0% { transform: scaleY(1); } 12% { transform: scaleY(1); } 87% { transform: scaleY(0.5); } 91.8% { transform: scaleY(0.5); } 100% { transform: scaleY(1); } } @keyframes sceneOneManMouth { 0% { transform: scaleY(1); } 12% { transform: scaleY(1); } 87% { transform: scaleY(0); } 91.8% { transform: scaleY(0); } 100% { transform: scaleY(1); } } @keyframes sceneOneManNeck { 0% { transform: rotate(34deg); } 12% { transform: rotate(34deg); } 87% { transform: rotate(14deg); } 91.8% { transform: rotate(34deg); } 100% { transform: rotate(34deg); } } @keyframes sceneOneManHead { 0% { transform: rotate(-10deg) translateY(0px) translateX(0px); } 12% { transform: rotate(-10deg) translateY(0px) translateX(0px); } 87% { transform: rotate(29deg) translateY(-50px) translateX(107px); } 91.8% { transform: rotate(-4deg) translateY(4px) translateX(53px); } 100% { transform: rotate(-10deg) translateY(0px) translateX(0px); } } @keyframes sceneOneManChest { 0% { border-radius: 100% 44% 0 0 / 100% 70% 0 0; transform: scaleX(1); } 12% { border-radius: 100% 44% 0 0 / 100% 70% 0 0; transform: scaleX(1); } 87% { border-radius: 100% 44% 0 30px / 100% 70% 0 30px; transform: scaleX(1.5); } 91.8% { border-radius: 100% 44% 0 30px / 100% 70% 0 30px; transform: scaleX(1.5); } 100% { border-radius: 100% 44% 0 0 / 100% 70% 0 0; transform: scaleX(1); } } @keyframes sceneOneManBody { 0% { transform: rotate(10deg) translateY(0px); } 12% { transform: rotate(10deg) translateY(0px); } 87% { transform: rotate(10deg) translateY(21px); } 91.8% { transform: rotate(10deg) translateY(21px); } 100% { transform: rotate(10deg) translateY(0px); } } @keyframes sceneOneDogHead { 0% { transform: rotate(0deg); } 12% { transform: rotate(0deg); } 87% { transform: rotate(-21deg); } 91.8% { transform: rotate(-7deg); } 100% { transform: rotate(0deg); } } .scene-2 { position: absolute; top: 0px; left: 0px; width: 800px; height: 600px; animation: sceneTwo 10s linear infinite; .rock { position: absolute; top: 378px; left: 94px; width: 32px; height: 4px; background: #B4394A; animation: sceneTwoRock 10s ease infinite; &:before { content: ''; position: absolute; top: 4px; left: 6px; width: 26px; height: 15px; background: #B4394A; } div:nth-child(1) { position: absolute; top: 10px; left: 50px; width: 40px; height: 25px; background: #CE524A; border-radius: 0 22px 0 0; &:before { content: ''; position: absolute; top: 0px; left: -102px; width: 21px; border-left: 73px solid transparent; border-bottom: 32px solid #ED7852; transform: skewX(-36deg); } &:after { content: ''; position: absolute; top: 32px; left: -116px; width: 93px; height: 12px; background: #ED7852; transform: skewX(-29deg); box-shadow: 10px 0 0 0 #B4394A; } } div:nth-child(2) { position: absolute; top: 54px; left: -56px; width: 18px; border-left: 43px solid transparent; border-bottom: 14px solid #CE524A; &:before { content: ''; position: absolute; top: 0px; left: -87px; width: 66px; height: 14px; background: #ED7852; transform: skewX(-72deg); } &:after { content: ''; position: absolute; top: 14px; left: -93px; width: 108px; height: 16px; background: #ED7852; transform: skewX(-37deg); box-shadow: 17px 0 0 0 #B4394A; } } div:nth-child(3) { position: absolute; top: 54px; left: 5px; width: 20px; border-right: 8px solid transparent; border-top: 14px solid #B4394A; &:before { content: ''; position: absolute; top: 16px; left: -110px; width: 72px; height: 18px; background: #ED7852; transform: skewX(-36deg); box-shadow: 21px 0 0 0 #B4394A; } &:after { content: ''; position: absolute; top: 34px; left: -130px; width: 55px; height: 28px; background: #CE524A; transform: skewX(-39deg); box-shadow: 40px 0 0 0 #B4394A; } } div:nth-child(4) { position: absolute; top: 112px; left: -41px; width: 49px; border-left: 13px solid transparent; border-bottom: 18px solid #B4394A; &:before { content: ''; position: absolute; top: 18px; left: -140px; width: 127px; height: 70px; background: #ED7852; transform: skewX(-35deg); box-shadow: 60px 0 0 0 #B4394A; } &:after { content: ''; position: absolute; top: 17px; left: -36px; border-left: 48px solid transparent; border-right: 40px solid transparent; border-bottom: 71px solid #CE524A; } } div:nth-child(5) { position: absolute; top: 14px; left: 30px; border-left: 20px solid transparent; border-bottom: 28px solid #B4394A; &:before { content: ''; position: absolute; top: 70px; left: -66px; width: 95px; height: 28px; background: #B4394A; transform: skewX(-37deg); box-shadow: 0 18px 0 0 #B4394A; } &:after { content: ''; position: absolute; top: 85px; left: -27px; border-right: 22px solid transparent; border-bottom: 40px solid #CE524A; } } div:nth-child(6) { position: absolute; top: 34px; left: 13px; width: 16px; border-right: 34px solid transparent; border-left: 32px solid transparent; border-bottom: 50px solid #B4394A; border-radius: 0 0 7px 0; &:before { content: ''; position: absolute; top: 49px; left: 22px; border-left: 23px solid transparent; border-right: 7px solid transparent; border-bottom: 30px solid #B4394A; } &:after { content: ''; position: absolute; top: -4px; left: 10px; border-left: 21px solid transparent; border-right: 10px solid transparent; border-bottom: 29px solid #B4394A; transform: rotate(-70deg); } } div:nth-child(7) { position: absolute; top: 59px; left: -4px; border-right: 38px solid transparent; border-left: 38px solid transparent; border-bottom: 24px solid #CE524A; transform: rotate(-90deg); &:before { content: ''; position: absolute; top: 34px; left: 2px; border-right: 11px solid transparent; border-left: 11px solid transparent; border-top: 11px solid #CE524A; } &:after { content: ''; position: absolute; top: 41px; left: 39px; width: 9px; height: 8px; background: #B4394A; transform: skewX(-30deg) rotate(24deg); } } } .lighthouse { position: absolute; top: -40px; left: 32px; width: 14px; height: 50px; background: #CE524A; animation: sceneTwoLighthouse 10s ease infinite; &:before { content: ''; position: absolute; top: 4px; left: -2px; width: 18px; height: 10px; background: #F7BD64; border-top: 4px solid #CE524A; border-bottom: 4px solid #CE524A; box-shadow: 0 4px 0 0 rgba(0, 0, 0, .1), inset 6px 0 0 0 #4A4263, inset -8px 0 0 0 #4A4263, inset 0 2px 0 0 #4A4263, inset 0 -2px 0 0 #4A4263; } &:after { content: ''; position: absolute; top: 12px; left: -56px; width: 7px; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 150px solid #F7D67B; transform-origin: top center; transform: rotate(90deg) scaleX(1); animation: sceneTwoLighhouse 2s ease infinite; } } .girl { position: absolute; top: 60px; left: 236px; width: 394px; height: 500px; animation: sceneTwoStone 10s ease infinite; & > div:nth-child(1) { position: absolute; top: 170px; left: 112px; width: 150px; height: 90px; background: #101019; border-radius: 0 110px 4px 0; transform-origin: right top; animation: sceneTwoGirlHear1 10s ease infinite; transform: rotate(-40deg) translate(0, 0); &:before { content: ''; position: absolute; top: -50px; left: -11px; width: 60px; height: 80px; background: #101019; transform: rotate(-19deg); } &:after { content: ''; position: absolute; top: -37px; left: 0px; width: 60px; height: 80px; background: #101019; transform: rotate(-50deg); } } & > div:nth-child(2) { position: absolute; top: 180px; left: 17px; width: 90px; height: 120px; background: #101019; border-radius: 24px 10px 0 80px; animation: sceneTwoGirlHear2 10s ease infinite; transform: translate(0px, 0px) rotate(0deg); &:before { content: ''; position: absolute; top: -126px; left: -18px; width: 130px; height: 153px; background: #101019; border-radius: 70px 0 0 60px; transform: translate(0px, 0px); } &:after { content: ''; position: absolute; top: -175px; left: 37px; width: 100px; height: 100px; background: #101019; border-radius: 50%; box-shadow: 45px -14px 0 -10px #101019, 80px 7px 0 -23px #101019, 20px 37px 0 -13px #101019; transform: translate(0px, 0px) rotate(0deg); } } &__back-leg { position: absolute; top: 303px; left: 170px; width: 115px; height: 40px; background: #943139; border-radius: 0 14px 0 0; transform-origin: 0 0; transform: rotate(9deg); &:before { content: ''; position: absolute; top: 36px; left: 2px; width: 100px; height: 27px; background: #943139; transform-origin: 0 0; transform: rotate(-13deg); } &:after { content: ''; position: absolute; top: 21px; left: 83px; width: 33px; height: 160px; background: #943139; transform-origin: 0 0; transform: rotate(-30deg); } } &__foot { position: absolute; top: 137px; left: 166px; width: 66px; height: 53px; background: #943139; transform-origin: 0 0; transform: rotate(-21deg); &:before { content: ''; position: absolute; top: -15px; left: 9px; width: 10px; height: 20px; background: #943139; transform: rotate(-20deg); } &:after { content: ''; position: absolute; top: -1px; left: 10px; width: 30px; height: 10px; background: #943139; transform: rotate(20deg); } } &__foot-thumbs { position: absolute; top: 94px;left: 232px; width: 12px; height: 14px; background: #943139; border-radius: 2px 10px 10px 0; transform: rotate(10deg); &:before { content: ''; position: absolute; top: 11px; left: -3px; width: 10px; height: 17px; background: #943139; transform: rotate(23deg); } &:after { content: ''; position: absolute; top: 11px; left: 2px; width: 10px; height: 25px; background: #943139; border-radius: 0 90% 100% 0; } } &__paper { position: absolute; top: -44px;left: 84px; width: 60px; height: 72px; background: #E7CEB5; box-shadow: 8px -22px 0 -8px #E7CEB5; transform-origin: bottom left; transform: rotate(57deg) translate(0px, 0px); &:before { content: ''; position: absolute; top: -14px; left: 0px; border-top: 14px solid transparent; border-right: 16px solid #DAAA8A; } &:after { content: ''; position: absolute; top: 37px; left: 12px; width: 40px; height: 5px; background: #D09B88; border-radius: 2px; } } &__back-arm { position: absolute; top: 248px; left: 130px; width: 109px; height: 22px; background: #943139; border-radius: 0 10px 20px 0; transform-origin: 0 0; animation: sceneTwoGirlBackArm 10s ease infinite; transform: rotate(-30deg) translate(0px, 0px); &:before { content: ''; position: absolute; top: -11px; left: 15px; width: 90px; height: 15px; background: #943139; transform-origin: 0 0; transform: rotate(7deg); } &:after { content: ''; position: absolute; top: 0px; left: 104px; width: 24px; height: 9px; background: #943139; border-radius: 0 2px 10px 0; transform-origin: 0 0; transform: rotate(16deg); } } &__chest { position: absolute; top: 121px; left: 93px; width: 50px; height: 83px; background: #5A8C8C; border-radius: 49px 0 0 0; transform-origin: left bottom; animation: sceneTwoGirlChest 10s ease infinite; transform: rotate(-12deg); &:after { content: ''; position: absolute; top: 9px; left: 0px; width: 83px; height: 92px; background: #5A8C8C; border-radius: 35px 59px 0 0; transform-origin: right bottom; transform: rotate(13deg); } &:before { content: ''; position: absolute; top: 79px; left: 0px; width: 65px; height: 27px; background: #9C2141; transform-origin: 0 0; animation: sceneTwoGirlStomack 10s ease infinite; transform: rotate(16deg); } } &__back-shorts { position: absolute; top: 290px; left: 110px; width: 67px; height: 75px; box-sizing: border-box; background: #27445A; border-right: 25px solid #798C8D; &:before { content: ''; position: absolute; top: -72px; left: -18px; width: 60px; height: 55px; background: #BD4242; transform-origin: 0 0; transform: rotate(26deg); } &:after { content: ''; position: absolute; top: -72px; left: -18px; width: 64px; height: 60px; background: #BD4242; transform-origin: 0 0; transform: rotate(13deg); } } &__front-leg { position: absolute; top: 270px; left: 137px; width: 110px; height: 61px; background: #BD4242; border-radius: 0 44% 23px 0; transform-origin: 0 0; transform: rotate(-28deg); &:before { content: ''; position: absolute; top: 31px; left: 0px; width: 90px; height: 40px; background: #BD4242; border-radius: 0 0 94% 0; } &:after { content: ''; position: absolute; top: 20px; left: 72px; width: 20px; height: 140px; background: #BD4242; transform-origin: 0 0; transform: rotate(12deg); } } &__knee { position: absolute; top: 41px;left: 89px; width: 20px; height: 160px; background: #BD4242; transform-origin: 0 0; transform: rotate(17deg); &:before { content: ''; position: absolute; top: 96px; left: -30px; width: 30px; height: 50px; background: #BD4242; border-radius: 20px 0 0 0; } &:after { content: ''; position: absolute; top: 14px; left: -191px; width: 70px; height: 76px; background: #354E6F; border-radius: 22px 0 0 50px; transform-origin: 0 0; transform: rotate(-15deg); } } &__shorts { position: absolute; top: 267px; left: 67px; width: 60px; height: 80px; background: #354E6F; border-radius: 0 0 0 56px; transform-origin: 0 0; transform: rotate(22deg); &:before { content: ''; position: absolute; top: -27px; left: 62px; width: 83px; height: 32px; background: #9CB5BD; transform-origin: 0 0; transform: rotate(40deg); } } &__front-arm { position: absolute; top: 103px; left: 124px; width: 135px; height: 23px; background: #BD4242; border-radius: 20px 11px 2px 0; transform-origin: 0 0; animation: sceneTwoGirlFromArm 10s ease infinite; transform: rotate(27deg) translate(0px, 0px); &:before { content: ''; position: absolute; top: 22px; left: 0px; width: 135px; height: 25px; background: #BD4242; border-radius: 0 0 18px 23px; transform-origin: 0 0; transform: rotate(-6deg); } &:after { content: ''; position: absolute; top: 30px; left: 128px; width: 20px; height: 134px; background: #BD4242; border-radius: 6px 0 0 20px; transform-origin: 0 0; animation: sceneTwoGirlTriceps 10s ease infinite; transform: rotate(198deg); } } &__forearm { position: absolute; top: 13px;left: 99px; width: 100px; height: 13px; background: #BD4242; transform-origin: 0 0; animation: sceneTwoGirlForearm 10s ease infinite; transform: rotate(-67deg); &:before { content: ''; position: absolute; top: -4px; left: 98px; width: 35px; height: 10px; background: #BD4242; border-radius: 4px; transform-origin: 0 0; transform: rotate(-29deg); } &:after { content: ''; position: absolute; top: -10px; left: 100px; width: 23px; height: 16px; background: #BD4242; } } &__palm { position: absolute; top: -18px;left: 104px; width: 10px; height: 26px; background: #BD4242; border-radius: 6px 0 0 0; transform-origin: 0 0; transform: rotate(26deg); &:before { content: ''; position: absolute; top: -9px; left: 2px; width: 10px; height: 17px; background: #BD4242; border-radius: 0 8px 0 3px; transform: rotate(20deg); } &:after { content: ''; position: absolute; top: -24px; left: 9px; width: 6px; height: 21px; background: #101019; border-radius: 0 0 10px 0; transform: rotate(-16deg); } } &__face { position: absolute; top: -48px; left: 73px; width: 42px; height: 40px; background: #BD4242; border-radius: 50%; transform-origin: 0 0; animation: sceneTwoGirlFace 10s ease infinite; transform: rotate(0deg) translate(0px, 0px); &:before { content: ''; position: absolute; top: 32px; left: 0px; width: 35px; height: 50px; background: #BD4242; border-radius: 0 0 4px 0; transform-origin: top right; transform: rotate(25deg); } &:after { content: ''; position: absolute; top: 16px; left: -36px; width: 40px; height: 40px; background: #101019; border-radius: 50%; } } &__nose { position: absolute; top: 33px; left: 18px; width: 16px; height: 28px; background: #BD4242; border-radius: 0 0 8px 0; transform: rotate(-9deg) translate(0, 0); &:before { content: ''; position: absolute; top: -13px; left: -2px; width: 23px; height: 10px; background: #101019; border-radius: 20px; animation: sceneTwoGirlBrow 10s ease infinite; transform: rotate(51deg); } &:after { content: ''; position: absolute; top: 1px; left: -7px; width: 17px; height: 5px; background: #101019; border-radius: 4px; animation: sceneTwoGirlEye 10s ease infinite; transform: rotate(47deg); } } } .stone { position: absolute; top: 422px; left: 203px; width: 350px; height: 138px; border-radius: 110px 180px 0 0 / 82px 130px 0 0; background: linear-gradient(-50deg, #4A4263 45%, #413452 46%, #413452 62%, #352C49 63%); animation: sceneTwoStone 10s ease infinite; &:before { content: ''; position: absolute; top: 66px; left: -90px; width: 97px; height: 76px; background: #352C49; border-radius: 48px 0 0 0; } &:after { content: ''; position: absolute; top: 96px; left: -141px; width: 106px; height: 46px; background: #352C49; border-radius: 50px 50px 0 0; box-shadow: 524px 6px 0 0 #352C49; } } .basket { position: absolute; top: 516px; left: 248px; width: 50px; height: 50px; box-sizing: border-box; background: #413452; border-radius: 50%; box-shadow: inset 0 0 0 12px #CA415A, inset 0 0 0 18px #EECD19; animation: sceneTwoStone 10s ease infinite; &:before { content: ''; position: absolute; top: 1px; left: -105px; width: 61px; height: 12px; background: #D69338; transform: rotate(-44deg); box-shadow: 0px 3px 0 0 #677321, 3px 15px 0 0 #B4394A, 3px 20px 0 0 #7B3231, -7px 32px 0 0 #D69338; } &:after { content: ''; position: absolute; top: -7px; left: -26px; width: 15px; height: 43px; background: #C47533; border-radius: 8px; } div:nth-child(1) { position: absolute; top: 16px; left: -53px; width: 60px; height: 8px; background: #8C9421; border-radius: 10px 10px 0 0; &:before { content: ''; position: absolute; top: 8px; left: -33px; width: 136px; height: 30px; background: #C47533; border-top: 6px solid #E7AD39; z-index: 1; } &:after { content: ''; position: absolute; top: 22px; left: -33px; width: 21px; height: 17px; background: #7B3231; z-index: 1; border-radius: 0 15px 0 0; } } div:nth-child(2) { position: absolute; top: 30px; left: -44px; width: 52px; height: 24px; box-sizing: border-box; background: #E7AD39; z-index: 1; border-radius: 0 0 25px 25px; border-left: 8px solid #7B3231; border-bottom: 8px solid #7B3231; border-right: 8px solid #7B3231; &:before { content: ''; position: absolute; top: -14px; left: 6px; width: 14px; height: 20px; background: #C47533; border-radius: 0 0 12px 12px; border: 5px solid #101019; border-top: 0; } &:after { content: ''; position: absolute; top: 20px; left: -50px; width: 48px; height: 10px; background: #7B3231; border-radius: 0 10px 0 0; } } } .sand { position: absolute; bottom: 0px; left: 0px; width: 500px; height: 40px; background: #677321; animation: sceneTwoStone 10s ease infinite; &:before { content: ''; position: absolute; bottom: 0px; left: 0px; width: 810px; height: 18px; background: #E7AD39; } &:after { content: ''; position: absolute; top: 14px; left: 135px; width: 190px; height: 8px; background: #E7AD39; border-radius: 10px 0 0 0; } div { position: absolute; top: 8px; left: 240px; width: 117px; height: 14px; background: #E7AD39; border-radius: 0 15px 0 0; &:before { content: ''; position: absolute; top: -15px; left: 0px; width: 71px; height: 15px; background: #E7AD39; border-radius: 0 20px 0 0; } &:after { content: ''; position: absolute; top: 0px; left: -10px; width: 75px; height: 10px; background: #E7AD39; z-index: 1; border-radius: 10px 0 0 0; } } } .crab { position: absolute; bottom: 25px; left: 28px; width: 60px; height: 30px; animation: sceneTwoCrab 10s linear infinite, sceneTwoStone 10s ease infinite; transform: translateX(0px); div:nth-child(1) { content: ''; position: absolute; bottom: 0; left: 0; width: 60px; height: 30px; background: linear-gradient(#9C2141 49%, #E7CEB5 50%); border-radius: 10px; animation: sceneTwoCrabBody 10s linear infinite; transform: rotate(0deg) translate(0px, 0px); &:before { content: ''; position: absolute; top: -7px; left: 14px; width: 8px; height: 9px; background: white; border-radius: 2px; box-shadow: 24px 0 0 0 white; } } div:nth-child(2) { position: absolute; top: -29px; left: -32px; width: 15px; height: 44px; background: #9C2141; border-radius: 10px 0 0 10px; animation: sceneTwoCrabLeftArm 10s linear infinite; &:before { content: ''; position: absolute; top: 6px; left: 15px; width: 13px; height: 18px; background: #641939; border-radius: 0 15px 0 0; } &:after { content: ''; position: absolute; top: 24px; left: 15px; width: 13px; height: 20px; background: #9C2141; border-radius: 0 0 10px 0; } } div:nth-child(3) { position: absolute; top: -35px; left: 79px; width: 15px; height: 44px; background: #9C2141; border-radius: 0 10px 10px 0; animation: sceneTwoCrabRightArm 10s linear infinite; transform: rotate(0deg) translate(0px, 0px); &:before { content: ''; position: absolute; top: 6px; left: -13px; width: 13px; height: 18px; background: #641939; border-radius: 15px 0 0 0; } &:after { content: ''; position: absolute; top: 24px; left: -13px; width: 13px; height: 20px; background: #9C2141; border-radius: 0 0 0 10px; } } div:nth-child(4) { position: absolute; top: 21px; left: -18px; width: 17px; height: 16px; background: #641939; border-radius: 0 0 100% 0; animation: sceneTwoCrabLeg1 10s linear infinite; transform: rotate(-20deg) translate(0px, 0px); } div:nth-child(5) { position: absolute; top: 21px; left: 2px; width: 14px; height: 16px; background: #9C2141; border-radius: 0 0 100% 0; animation: sceneTwoCrabLeg2 10s linear infinite; transform: rotate(0deg) translate(0px, 0px); } div:nth-child(6) { position: absolute; top: 21px; left: 46px; width: 16px; height: 16px; background: #9C2141; border-radius: 0 0 0 100%; animation: sceneTwoCrabLeg3 10s linear infinite; transform: rotate(0deg) translate(0px, 0px); } div:nth-child(7) { position: absolute; top: 21px; left: 64px; width: 16px; height: 16px; background: #641939; border-radius: 0 0 0 100%; animation: sceneTwoCrabLeg4 10s linear infinite; transform: rotate(0deg) translate(0px, 0px); } } .bg-1 { position: absolute; top: 0px; left: 0px; width: 800px; height: 300px; background: #9C3163; border-radius: 0 0 90px 90px; animation: sceneTwoBg1 10s ease infinite; } .bg-2 { position: absolute; top: -30px; left: -47px; width: 220px; height: 220px; background: #CA415A; border-radius: 50%; animation: sceneTwoBg2 10s ease infinite; &:before { content: ''; position: absolute; top: 33px; left: 144px; width: 200px; height: 200px; background: #CA415A; border-radius: 50%; } } .bg-3 { position: absolute; top: -41px; right: -44px; width: 200px; height: 200px; background: #CA415A; border-radius: 50%; animation: sceneTwoBg3 10s ease infinite; &:before { content: ''; position: absolute; top: 68px; left: -230px; width: 200px; height: 200px; background: #CA415A; border-radius: 50%; } &:after { content: ''; position: absolute; top: 93px; left: -117px; width: 110px; height: 110px; background: #CA415A; border-radius: 50%; box-shadow: 100px -7px 0 10px #CA415A; } } .bg-4 { position: absolute; top: 36px; left: -127px; width: 220px; height: 220px; background: #ED7852; border-radius: 50%; box-shadow: 442px 10px 0 0 #ED7852, 782px -21px 0 0 #ED7852, 302px 69px 0 0 #ED7852, 112px 140px 0 0 #ED7852, 262px 150px 0 0 #ED7852, 542px 110px 0 0 #ED7852, 772px 70px 0 0 #ED7852; animation: sceneTwoBg4 10s ease infinite; &:before { content: ''; position: absolute; top: 58px; left: 156px; width: 140px; height: 140px; background: #ED7852; border-radius: 50%; box-shadow: 509px 15px 0 0 #ED7852; } &:after { content: ''; position: absolute; top: 110px; left: 260px; width: 80px; height: 80px; background: #ED7852; border-radius: 50%; box-shadow: 378px -16px 0 0 #ED7852, 488px -35px 0 0 #ED7852; } } .bg-5 { position: absolute; top: 199px; left: -140px; width: 220px; height: 220px; background: #FC9250; border-radius: 50%; box-shadow: 500px 20px 0 0 #FC9250, 635px -15px 0 0 #FC9250, 805px 135px 0 0 #FC9250, 605px 75px 0 0 #FC9250, 335px 125px 0 0 #FC9250, 105px 125px 0 0 #FC9250; animation: sceneTwoBg5 10s ease infinite; &:before { content: ''; position: absolute; top: 110px; left: 340px; width: 100px; height: 40px; background: #FC9250; border-radius: 50%; box-shadow: 538px 6px 0 0 #FC9250; } &:after { content: ''; position: absolute; top: 112px; left: 222px; width: 170px; height: 170px; background: #FC9250; border-radius: 50%; box-shadow: 510px -70px 0 0 #FC9250; } } .bg-6 { position: absolute; bottom: 0px; left: 559px; width: 260px; height: 260px; background: #F7BD64; border-radius: 50%; box-shadow: -751px 8px 0 0 #F7BD64, -204px 38px 0 0 #F7BD64; animation: sceneTwoBg6 10s ease infinite; &:before { content: ''; position: absolute; top: 50px; left: -385px; width: 150px; height: 150px; background: #F7BD64; border-radius: 50%; box-shadow: 84px 20px 0 0 #F7BD64, -186px 10px 0 0 #F7BD64, -86px 30px 0 0 #F7BD64; } } .water { position: absolute; bottom: 18px; right: 0px; width: 470px; height: 21px; background: white; z-index: 1; animation: sceneTwoWater 10s ease infinite; &:before { content: ''; position: absolute; top: -11px; left: -45px; width: 55px; height: 32px; background: white; border-radius: 30px 30px 0 0; } &:after { content: ''; position: absolute; top: 9px; left: -60px; width: 20px; height: 12px; background: white; border-radius: 14px 0 0 0; } div:nth-child(1) { position: absolute; top: -12px; left: 102px; width: 230px; height: 12px; background: white; border-radius: 20px 0 0 0; box-shadow: 183px -9px 0 0 white; &:before { content: ''; position: absolute; top: -31px; left: 43px; width: 102px; height: 45px; background: white; border-radius: 120px 120px 0 0; } &:after { content: ''; position: absolute; top: -15px; left: 210px; width: 79px; height: 10px; background: white; border-radius: 10px 10px 0 0; } } div:nth-child(2) { position: absolute; top: -40px; left: 320px; width: 39px; height: 22px; background: white; border-radius: 50px 50px 0 0; &:before { content: ''; position: absolute; top: -7px; left: -74px; width: 12px; height: 12px; background: white; border-radius: 50%; box-shadow: 93px 0 0 0 white; } &:after { content: ''; position: absolute; top: -37px; left: -74px; width: 5px; height: 5px; background: white; border-radius: 50%; box-shadow: 18px 15px 0 0 white, 124px 13px 0 0 white; } } div:nth-child(4) { position: absolute; top: 7px; left: 66px; width: 408px; height: 6px; background: #0297DA; border-radius: 0 0 0 10px; &:before { content: ''; position: absolute; top: 6px; left: 0px; width: 86px; height: 8px; background: white; border-radius: 0 10px 0 0; } &:after { content: ''; position: absolute; top: 4px; left: 215px; width: 210px; height: 10px; background: white; border-radius: 10px 0 0 0; } } div:nth-child(3) { position: absolute; top: 0px; left: 131px; width: 360px; height: 10px; background: #0297DA; border-radius: 10px 0 0 0; &:before { content: ''; position: absolute; top: 0px; left: 272px; width: 80px; height: 11px; background: white; border-radius: 11px 0 0 0; z-index: 1; } &:after { content: ''; position: absolute; top: -11px; left: 195px; width: 150px; height: 11px; background: #0297DA; border-radius: 11px 0 0; } } } } @keyframes sceneTwoCrab { 0% { transform: translateX(0px); } 15% { transform: translateX(0px); } 16.2% { transform: translateX(4px); } 19.8% { transform: translateX(11px); } 100% { transform: translateX(11px); } } @keyframes sceneTwoCrabBody { 0% { transform: rotate(0deg) translate(0px, 0px); } 12.6% { transform: rotate(-2deg) translate(0px, 0px); } 13.2% { transform: rotate(-3deg) translate(0px, 0px); } 15% { transform: rotate(1deg) translate(5px, -2px); } 19.8% { transform: rotate(3deg) translate(5px, -2px); } 24% { transform: rotate(3deg) translate(5px, -6px); } 27% { transform: rotate(6deg) translate(12px, -13px); } 30% { transform: rotate(-8deg) translate(-6px, -15px); } 100% { transform: rotate(-8deg) translate(-6px, -15px); } } @keyframes sceneTwoCrabLeftArm { 13.2% { transform: rotate(0deg) translate(0px, 0px); } 15% { transform: rotate(0deg) translate(4px, -1px); } 16.2% { transform: rotate(0deg) translate(5px, -6px); } 19.8% { transform: rotate(6deg) translate(9px, -20px); } 24% { transform: rotate(21deg) translate(10px, -28px); } 27% { transform: rotate(21deg) translate(17px, -34px); } 30% { transform: rotate(-19deg) translate(-13px, -6px); } 100% { transform: rotate(-19deg) translate(-13px, -6px); } } @keyframes sceneTwoCrabRightArm { 0% { transform: rotate(0deg) translate(0px, 0px); } 12.6% { transform: rotate(0deg) translate(0px, 0px); } 13.2% { transform: rotate(-5deg) translate(-3px, -3px); } 15% { transform: rotate(1deg) translate(4px, -1px); } 16.2% { transform: rotate(15deg) translate(10px, 4px); } 19.8% { transform: rotate(58deg) translate(33px, -1px); } 24% { transform: rotate(58deg) translate(27px, -1px); } 27% { transform: rotate(58deg) translate(27px, -15px); } 30% { transform: rotate(-26deg) translate(-15px, -40px); } 100% { transform: rotate(-26deg) translate(-15px, -40px); } } @keyframes sceneTwoCrabLeg1 { 0% { transform: rotate(-20deg) translate(0px, 0px); } 15% { transform: rotate(-20deg) translate(0px, 0px); } 16.2% { transform: rotate(-20deg) translate(3px, -6px); } 19.8% { transform: rotate(0deg) translate(5px, 0px); } 100% { transform: rotate(0deg) translate(5px, 0px); } } @keyframes sceneTwoCrabLeg2 { 0% { transform: rotate(0deg) translate(0px, 0px); } 12.6% { transform: rotate(0deg) translate(0px, 0px); } 13.2% { transform: rotate(-6deg) translate(1px, -4px); } 15% { transform: rotate(-6deg) translate(12px, 0px); } 16.2% { transform: rotate(1deg) translate(9px, 0px); } 19.8% { transform: rotate(1deg) translate(4px, 0px); } 100% { transform: rotate(1deg) translate(4px, 0px); } } @keyframes sceneTwoCrabLeg3 { 0% { transform: rotate(0deg) translate(0px, 0px); } 12.6% { transform: rotate(0deg) translate(0px, 0px); } 13.2% { transform: rotate(-12deg) translate(3px, -4px); } 15% { transform: rotate(5deg) translate(10px, -2px); } 16.2% { transform: rotate(2deg) translate(10px, 0px); } 19.8% { transform: rotate(2deg) translate(4px, 0px); } 100% { transform: rotate(2deg) translate(4px, 0px); } } @keyframes sceneTwoCrabLeg4 { 0% { transform: rotate(0deg) translate(0px, 0px); } 15% { transform: rotate(0deg) translate(0px, 0px); } 16.2% { transform: rotate(-30deg) translate(4px, -5px); } 19.8% { transform: rotate(0deg) translate(5px, 0px); } 100% { transform: rotate(0deg) translate(5px, 0px); } } @keyframes sceneTwoLighhouse { 0% { transform: rotate(90deg) scaleX(1); } 50% { transform: rotate(90deg) scaleX(2); } 100% { transform: rotate(90deg) scaleX(1); } } @keyframes sceneTwoGirlHear1 { 0% { transform: rotate(-40deg) translate(0, 0); } 10.8% { transform: rotate(-40deg) translate(0, 0); } 16.2% { transform: rotate(-40deg) translate(25px, 7px); } 21% { transform: rotate(-40deg) translate(-13px, -33px); } 100% { transform: rotate(-40deg) translate(-13px, -33px); } } @keyframes sceneTwoGirlHear2 { 0% { transform: translate(0px, 0px) rotate(0deg); } 10.8% { transform: translate(0px, 0px) rotate(0deg); } 16.2% { transform: translate(18px, 9px) rotate(-15deg); } 21% { transform: translate(7px, 9px) rotate(-20deg); } 100% { transform: translate(7px, 9px) rotate(-20deg); } } @keyframes sceneTwoGirlBackArm { 0% { transform: rotate(-30deg) translate(0px, 0px); } 10.8% { transform: rotate(-30deg) translate(0px, 0px); } 16.2% { transform: rotate(-37deg) translate(-19px, 0px); } 21% { transform: rotate(-33deg) translate(-32px, -16px); } 100% { transform: rotate(-33deg) translate(-32px, -16px); } } @keyframes sceneTwoGirlChest { 0% { transform: rotate(-12deg) translate(0px, 0px); } 10.8% { transform: rotate(-12deg) translate(0px, 0px); } 16.2% { transform: rotate(-12deg) translate(0px, 0px); } 21% {transform: rotate(-32deg) translate(-3px, 0px); } 100% {transform: rotate(-32deg) translate(-3px, 0px); } } @keyframes sceneTwoGirlStomack { 0% { transform: rotate(16deg) scaleY(1) scaleX(1) translate(0px, 0px); } 10.8% { transform: rotate(16deg) scaleY(1) scaleX(1) translate(0px, 0px); } 16.2% { transform: rotate(16deg) scaleY(1) scaleX(1) translate(0px, 0px); } 21% { transform: rotate(26deg) scaleY(2.2) scaleX(0.94) translate(2px, -10px); } 100% { transform: rotate(26deg) scaleY(2.2) scaleX(0.94) translate(2px, -10px); } } @keyframes sceneTwoGirlFromArm { 0% { transform: rotate(27deg) translate(0px, 0px); } 10.8% { transform: rotate(27deg) translate(0px, 0px); } 16.2% { transform: rotate(25deg) translate(-8px, 2px); } 21% { transform: rotate(-3deg) translate(-48px, 0px); } 100% { transform: rotate(-3deg) translate(-48px, 0px); } } @keyframes sceneTwoGirlTriceps { 0% { transform: rotate(198deg) translate(0px, 0px); } 10.8% { transform: rotate(198deg) translate(0px, 0px); } 16.2% { transform: rotate(200deg) translate(0px, 0px); } 21% { transform: rotate(264deg) translate(0px, -20px); } 100% { transform: rotate(264deg) translate(0px, -20px); } } @keyframes sceneTwoGirlForearm { 0% { transform: rotate(-67deg) translate(0px, 0px); } 10.8% { transform: rotate(-67deg) translate(0px, 0px); } 16.2% { transform: rotate(-62deg) translate(0px, 0px); } 21% { transform: rotate(-2deg) translate(18px, -12px); } 100% { transform: rotate(-2deg) translate(18px, -12px); } } @keyframes sceneTwoGirlFace { 0% { transform: rotate(0deg) translate(0px, 0px); } 10.8% { transform: rotate(0deg) translate(0px, 0px); } 16.2% { transform: rotate(-16deg) translate(-26px, -16px); } 21% { transform: rotate(-1deg) translate(-6px, -2px); } } @keyframes sceneTwoGirlBrow { 0% { transform: rotate(51deg); } 10.8% { transform: rotate(51deg); } 16.2% { transform: rotate(43deg); } 100% { transform: rotate(43deg); } } @keyframes sceneTwoGirlEye { 0% { transform: rotate(47deg); } 10.8% { transform: rotate(47deg); } 16.2% { transform: rotate(36deg); } 100% { transform: rotate(36deg); } } @keyframes sceneTwo { 0% { opacity: 0; z-index: 3; } 3.5% { opacity: 0; z-index: 3; } 3.6% { opacity: 1; z-index: 3; } 10.2% { opacity: 1; z-index: 4; } 37.7% { opacity: 1; z-index: 4; } 37.8% { opacity: 0; z-index: 1; } 61.8% { opacity: 0; z-index: 2; } 88.8% { opacity: 0; z-index: 3; } 100% { opacity: 0; z-index: 3; } } @keyframes sceneTwoBg1 { 0% { transform: translateY(0px); } 30.6% { transform: translateY(0px); } 34.8% { transform: translateY(600px); } 100% { transform: translateY(600px); } } @keyframes sceneTwoBg2 { 0% { transform: translate(0px, 0px); } 31.2% { transform: translate(0px, 0px); } 34.2% { transform: translate(-400px, -10px); } 100% { transform: translate(-400px, -10px); } } @keyframes sceneTwoBg3 { 0% { transform: translate(0px, 0px); } 31.2% { transform: translate(0px, 0px); } 34.2% { transform: translate(-870px, 30px); } 100% { transform: translate(-870px, 30px); } } @keyframes sceneTwoBg4 { 0% { transform: translate(0px, 0px); } 31.8% { transform: translate(0px, 0px); } 35.4% { transform: translate(930px, 10px); } 100% { transform: translate(930px, 10px); } } @keyframes sceneTwoBg5 { 0% { transform: translate(0px, 0px); } 32.4% { transform: translate(0px, 0px); } 36.6% { transform: translate(-940px, 10px); } 100% { transform: translate(-940px, 10px); } } @keyframes sceneTwoBg6 { 0% { transform: translate(0px, 0px); } 32.4% { transform: translate(0px, 0px); } 36.6% { transform: translate(1000px, 10px); } 100% { transform: translate(1000px, 10px); } } @keyframes sceneTwoRock { 0% { transform: translate(0px, 0px); } 31.8% { transform: translate(0px, 0px); } 35.4% { transform: translate(-193px, 0px); } 100% { transform: translate(-193px, 0px); } } @keyframes sceneTwoStone { 0% { transform: translate(0px, 0px); } 33.6% { transform: translate(0px, 0px); } 37.8% { transform: translate(-750px, 0px); } 100% { transform: translate(-750px, 0px); } } @keyframes sceneTwoWater { 0% { transform: translate(160px, 0px); } 7.8% { transform: translate(160px, 0px); } 19.2% { transform: translate(0px, 0px); } 21% { transform: translate(0px, 0px); } 33.6% { transform: translate(160px, 0px); } 37.8% { transform: translate(480px, 0px); } 100% { transform: translate(480px, 0px); } } .scene-3 { position: absolute; top: 0px; left: 0px; width: 800px; height: 600px; animation: sceneThree 10s linear infinite; .road { position: absolute; top: 0px; left: 0px; animation: sceneThreeRoad 10s ease infinite; } .car { position: absolute; top: 0px; left: 0px; animation: sceneThreeCar 1s ease infinite; animation-delay: .1s; & > div:nth-child(1) { position: absolute; top: 102px; left: 318px; width: 279px; height: 166px; background: #424A6B; border-radius: 0 20px 0 0; box-shadow: inset 0 7px 0 0 #526B94; &:before { content: ''; position: absolute; top: -10px; left: 163px; width: 100px; height: 208px; background: #424A6B; box-shadow: inset -11px 0 0 -1px #526B94; border-radius: 0 26px 0 0; transform-origin: right top; transform: rotate(-36deg); } &:after { content: ''; position: absolute; top: -50px; left: -10px; width: 290px; height: 226px; box-sizing: border-box; border-radius: 0 20px 0 0; border-left: 10px solid #0A0615; border-top: 10px solid #0A0615; border-bottom: 10px solid #0A0615; } } & > div:nth-child(2) { position: absolute; top: 41px; left: 516px; width: 64px; height: 253px; box-sizing: border-box; border-right: 10px solid #0A0615; border-bottom: 10px solid #0A0615; border-radius: 0 28px 42px 0; transform-origin: top right; transform: rotate(-37deg); z-index: 1; &:before { content: ''; position: absolute; top: 212px; left: -84px; width: 100px; height: 10px; background: #0A0615; transform: rotate(37deg); } &:after { content: ''; position: absolute; top: -259px; left: -441px; width: 213px; height: 227px; box-sizing: border-box; border-top: 10px solid #0A0615; border-right: 10px solid #0A0615; border-bottom: 10px solid #0A0615; border-radius: 20px 0 0 0; transform: rotate(37deg); } } & > div:nth-child(3) { position: absolute; top: 268px; left: 0px; width: 80px; height: 10px; background: #0A0615; &:before { content: ''; position: absolute; top: -185px; left: 70px; width: 64px; height: 253px; box-sizing: border-box; border-left: 10px solid #0A0615; border-bottom: 10px solid #0A0615; border-radius: 28px 0 0 42px; transform-origin: top right; transform: rotate(37deg); z-index: 1; } &:after { content: ''; position: absolute; top: -60px; left: 100px; border-left: 32px solid transparent; border-right: 32px solid transparent; border-bottom: 52px solid #0A0615; } } & > div:nth-child(4) { position: absolute; top: 137px; left: 90px; width: 12px; height: 74px; background: #0A0615; border-radius: 6px; box-shadow: -42px -11px 0 0 #0A0615, -29px 17px 0 1px #0A0615, -14px 18px 0 2px #0A0615, -51px 40px 0 2px #0A0615; &:before { content: ''; position: absolute; top: 79px; left: -32px; width: 32px; height: 20px; background: #0A0615; } &:after { content: ''; position: absolute; top: 60px; left: -11px; width: 20px; height: 25px; background: #0A0615; border-radius: 6px; transform: rotate(30deg); } } & > div:nth-child(5) { position: absolute; top: 29px; left: 54px; width: 569px; height: 23px; box-sizing: border-box; border-top: 10px solid #0A0615; background: #1B172C; border-radius: 7% 7% 0 0 / 100% 100% 0 0; &:before { content: ''; position: absolute; top: -7px; left: 7px; width: 35px; height: 273px; box-sizing: border-box; background: #1B172C; transform-origin: 0 0; transform: rotate(37deg); border-radius: 21% 0 0 0; border-left: 14px solid #425273; z-index: 3; } &:after { content: ''; position: absolute; top: 13px; left: 226px; width: 28px; height: 227px; background: #1B172C; } } & > div:nth-child(6) { position: absolute; top: 30px; left: 599px; width: 26px; height: 26px; background: #0A0615; border-radius: 0 40px 0 0; transform: skewX(37deg); &:before { content: ''; position: absolute; top: 26px; left: 16px; width: 10px; height: 218px; background: #526B94; box-shadow: -10px 0 0 0 #425273, -16px 0 0 0 #425273, -26px 0 0 0 #1B172C, -34px 0 0 0 #1B172C; } &:after { content: ''; position: absolute; top: 22px; left: -25px; width: 25px; height: 25px; background: #1B172C; } } & > div:nth-child(7) { position: absolute; top: 278px; left: 0px; width: 780px; height: 290px; background: #1B172C; &:before { content: ''; position: absolute; top: -64px; right: 20px; border-right: 50px solid transparent; border-bottom: 64px solid #1B172C; } &:after { content: ''; position: absolute; top: -26px; right: 68px; border-left: 30px solid transparent; border-bottom: 26px solid #1B172C; } } & > div:nth-child(8) { position: absolute; top: 136px; left: 182px; width: 68px; height: 180px; background: #425464; border-radius: 60px; box-shadow: inset 25px -4px 0 9px #2F294A, inset 35px -10px 0 17px #313152; z-index: 1; &:before { content: ''; position: absolute; top: 154px; left: 1px; width: 71px; height: 219px; background: #425464; border-radius: 0 0 0 60px; box-shadow: inset 24px -9px 0 9px #2F294A, inset 54px 0 0 0 #313152; transform: rotate(-19.5deg); transform-origin: 0 0; } &:after { content: ''; position: absolute; top: 263px; left: 65px; width: 232px; height: 80px; background: #2F294A; border-radius: 60px 30px 30px 60px; } } & > div:nth-child(9) { position: absolute; top: 333px; left: 664px; width: 113px; height: 85px; box-sizing: border-box; background: #0A0615; border: 10px solid #2B242C; border-radius: 0 60px 60px 60px; box-shadow: 40px 0 0 10px #2B242C, 37px 78px 0 4px #2B242C, 47px 158px 0 4px #2B242C; &:before { content: ''; position: absolute; top: -57px; left: -11px; width: 97px; height: 47px; box-sizing: border-box; background: #0A0615; border-radius: 0 0 20px 0; border-top: 13px solid #2B242C; border-left: 22px solid #2B242C; border-right: 10px solid #2B242C; transform: skewX(-49deg); transform-origin: bottom left; box-shadow: 70px 0 0 #2B242C; } &:after { content: ''; position: absolute; top: 77px; left: 73px; width: 80px; height: 131px; background: #0A0615; border-radius: 70px 0 0 0; border-top: 19px solid #1B172C; border-left: 19px solid #1B172C; } } & > div:nth-child(10) { position: absolute; top: 414px; left: 498px; width: 234px; height: 144px; background: #1B172C; border-radius: 0 56px 71px 60px; overflow: hidden; z-index: 1; &:before { content: ''; position: absolute; top: 16px; left: 2px; width: 94px; height: 139px; box-sizing: border-box; background: #293253; border-radius: 27px 27px; box-shadow: inset 0 10px 0 12px #293253, inset 0 -9px 0 12px #293253, inset 0 48px 0 20px #424A6B, inset 0 -17px 0 12px #424A6B, inset 0 80px 0 0 #202132; } &:after { content: ''; position: absolute; top: 0px; left: 32px; width: 26px; height: 8px; border-left: 6px solid #3F4262; border-top: 8px solid #3F4262; border-right: 6px solid #3F4262; border-radius: 6px 6px 0 0; } & > div { position: absolute; top: 72px; left: 102px; width: 84px; height: 12px; background: #424A6B; box-shadow: 14px 0 0 0 #424A6B, 34px 0 0 0 #293253, -18px 12px 0 0 #313152, -18px 16px 0 0 #313152, 11px 12px 0 0 #313152, 11px 16px 0 0 #313152, 16px 28px 0 0 #293253, 16px 34px 0 0 #293253, 26px 28px 0 0 #293253, 26px 34px 0 0 #293253, 8px 46px 0 0 #432747, 8px 50px 0 0 #432747; &:before { content: ''; position: absolute; top: 16px; left: 4px; width: 30px; height: 6px; background: #202132; box-shadow: 34px 0 0 0 #202132, 38px 0 0 0 #202132, 34px 18px 0 0 #202132, 54px 18px 0 0 #202132, 28px 34px 0 0 #202132, 28px 36px 0 0 #202132, 34px 34px 0 0 #202132, 34px 36px 0 0 #202132; } &:after { content: ''; position: absolute; top: 26px; left: 10px; width: 6px; height: 16px; background: #202132; box-shadow: 0 4px 0 0 #202132, 15px 4px 0 0 #202132, 15px 0 0 0 #202132, 85px 4px 0 0 #202132, 85px 0 0 0 #202132, 6px 20px 0 0 #202132, 9px 20px 0 0 #202132, 66px 20px 0 0 #202132, 69px 20px 0 0 #202132; } } } & > div:nth-child(11) { position: absolute; top: 329px; left: 660px; width: 74px; height: 6px; background: #0A0615; transform-origin: 0 0; transform: rotate(-41deg); border-radius: 4px; &:before { content: ''; position: absolute; top: -10px; left: 20px; width: 10px; height: 11px; background: #0A0615; } &:after { content: ''; position: absolute; top: -37px; left: -18px; width: 85px; height: 27px; background: #0A0615; border-radius: 10px 10px 20px 20px; } } & > div:nth-child(12) { position: absolute; top: 392px; left: 691px; width: 61px; height: 16px; background: #293253; border-radius: 2px 2px 20px 20px; &:before { content: ''; position: absolute; top: -28px; left: -12px; width: 86px; height: 28px; box-sizing: border-box; background: #313152; border-radius: 0 14px 14px 0; border-top: 5px solid #522959; border-right: 5px solid #522959; border-bottom: 5px solid #522959; box-shadow: inset 5px 0 0 0 #0A0615, inset -44px 0 0 -36px #1B172C; } &:after { content: ''; position: absolute; top: -68px; left: 11px; width: 44px; height: 10px; background: #293253; border-radius: 5px; box-shadow: 10px -10px 0 0 #293253; } } & > div:nth-child(13) { position: absolute; top: 272px; left: 750px; width: 60px; height: 14px; background: #0A0615; transform: skewX(37deg); &:before { content: ''; position: absolute; top: -113px; left: 68px; width: 9px; height: 113px; background: #0A0615; box-shadow: -15px -55px 0 0 #0A0615, -15px 0px 0 0 #0A0615; } &:after { content: ''; position: absolute; top: -102px; left: 53px; width: 16px; height: 14px; background: #0A0615; } } & > div:nth-child(14) { position: absolute; top: 496px; left: 323px; width: 230px; height: 62px; background: linear-gradient(#0A0615 25%, #2B242C 26%, #2B242C 84%, #1B172C 85%); border-radius: 56px 0 0 0; &:before { content: ''; position: absolute; top: -16px; left: -29px; width: 160px; height: 16px; background: #0A0615; } &:after { content: ''; position: absolute; top: 0px; left: 29px; width: 62px; height: 62px; background: #432747; } } & > div:nth-child(15) { position: absolute; top: 481px; left: 41px; width: 157px; height: 30px; background: #0A0615; &:before { content: ''; position: absolute; top: 30px; left: 0px; width: 157px; border-right: 40px solid transparent; border-bottom: 47px solid #2B242C; } &:after { content: ''; position: absolute; top: -291px; left: -31px; width: 50px; height: 160px; background: #5A6B8C; transform-origin: 0 0; transform: rotate(-14deg); border-radius: 21px; z-index: 1; } } & > div:nth-child(16) { position: absolute; top: 413px; left: -10px; width: 234px; height: 68px; background: #2F294A; border-radius: 0 41px 21px 0; &:after { content: ''; position: absolute; top: -276px; left: -20px; width: 69px; height: 276px; background: linear-gradient(to right, #292149 28%, #2F294A 29%); border-radius: 34px 34px 15px 15px; z-index: 2; } &:before { content: ''; position: absolute; top: -163px; left: -172px; border-right: 100px solid transparent; border-left: 160px solid transparent; border-bottom: 60px solid #1B172C; transform: rotate(-90deg); z-index: 1; } } & > div:nth-child(17) { position: absolute; top: 264px; left: -417px; width: 320px; height: 239px; box-sizing: border-box; background: #1B172C; border-top: 12px solid #0A0615; border-left: 14px solid #0A0615; border-bottom: 17px solid #0A0615; border-radius: 40% 0 0 0; box-shadow: inset 21px -24px 0 0 #2B242C; &:before { content: ''; position: absolute; top: 13px; left: 0px; width: 54px; height: 103px; background: #432747; border-radius: 100% 0 31px 0 / 73% 0 31px 0; box-shadow: inset -12px -29px 0 0 #0A0615; } &:after { content: ''; position: absolute; top: 116px; left: 24px; width: 183px; height: 70px; background: #0A0615; border-radius: 35px; } } & > div:nth-child(18) { position: absolute; top: 342px; left: -334px; width: 130px; height: 34px; background: #2B242C; &:before { content: ''; position: absolute; top: -80px; left: 200px; width: 66px; height: 191px; background: #2B242C; border-radius: 40px 42px 0 0; transform-origin: 0 0; transform: rotate(-20deg); z-index: 3; } &:after { content: ''; position: absolute; top: -96px; left: 215px; width: 30px; height: 30px; background: #0A0615; transform: skewX(-35deg); z-index: 3; } } & > div:nth-child(19) { position: absolute; top: 340px; left: -97px; border-right: 50px solid transparent; border-bottom: 78px solid #2B242C; &:before { content: ''; position: absolute; top: 36px; left: -105px; width: 90px; height: 41px; background: linear-gradient(#473A56 49%, #413452 50%); transform: rotate(-20deg); } &:after { content: ''; position: absolute; top: 57px; left: -108px; width: 250px; height: 250px; box-sizing: border-box; border-radius: 50%; border: 20px solid transparent; border-left: 20px solid #2B242C; transform: rotate(65deg); } } & > div:nth-child(20) { position: absolute; top: 412px; left: -205px; width: 256px; height: 188px; box-sizing: border-box; background: linear-gradient(#0A0615 92%, #202132 93%); border-radius: 138px 86px 0 0; border-top: 20px solid #1B172C; border-left: 20px solid #1B172C; border-right: 20px solid #1B172C; z-index: 3; &:before { content: ''; position: absolute; top: 17px; left: 20px; width: 192px; height: 192px; box-sizing: border-box; background: radial-gradient(#1B172C 10%, #0A0615 11%, #0A0615 24%, #1B172C 25%, #1B172C 50%, #0A0615 51%); border-radius: 50%; border-top: 9px solid #1B172C; border-left: 9px solid #1B172C; border-bottom: 9px solid #0A0615; border-right: 9px solid #0A0615; transform: rotate(45deg); } &:after { content: ''; position: absolute; top: -56px; left: -168px; width: 92px; height: 17px; background: #1A3142; border-right: 16px solid #27445A; border-left: 16px solid #27445A; box-shadow: 5px -57px 0 0 #2B242C, 41px -57px 0 0 #2B242C; } } & > div:nth-child(21) { position: absolute; top: 503px; left: -393px; width: 59px; height: 57px; background: linear-gradient(#821D42 32%, #4A5A73 33%); box-shadow: inset -47px 0 0 0 #0A0615, 140px 0 0 0 #0A0615; &:before { content: ''; position: absolute; top: 0px; left: 59px; width: 81px; height: 31px; background: #1B172C; border-bottom: 12px solid #0A0615; } &:after { content: ''; position: absolute; top: 55px; left: 444px; width: 677px; height: 12px; background: #2B242C; box-shadow: 0px 12px 0 0 #0A0615, 90px 12px 0 0 #0A0615; } } } .sneakers { position: absolute; top: 514px; left: 50px; width: 31px; height: 36px; background: linear-gradient(#424A6B 77%, #293253 78%); &:before { content: ''; position: absolute; top: 12px; left: 31px; width: 40px; height: 24px; background: linear-gradient(to right, #424A6B 61%, #293253 62%); border-radius: 0 17px 0 0; box-shadow: inset 0 -8px 0 0 #293253; } &:after { content: ''; position: absolute; top: 5px; left: 31px; border-right: 25px solid transparent; border-bottom: 7px solid #293253; } & > div { position: absolute; top: 14px; left: 0px; width: 17px; height: 14px; background: #293253; border-radius: 0 14px 0 0; &:before { content: ''; position: absolute; top: -32px; left: 13px; width: 18px; height: 30px; background: #293253; border-radius: 20px 0 0 8px; } &:after { content: ''; position: absolute; top: -4px; left: 50px; width: 5px; height: 8px; background: #1B172C; box-shadow: -8px -2px 0 0 #1B172C, -16px -4px 0 0 #1B172C; z-index: 1; } } } .papper { position: absolute; top: 480px; left: 106px; width: 60px; height: 66px; box-sizing: border-box; background: #293253; border: 15px solid #4A5A73; box-shadow: 0 8px 0 0 #424A6B, 0 24px 0 0 #4A5A73; z-index: 11; transform-origin: left 90px; transform: rotate(-6deg); animation: sceneThreePapper 10s ease infinite; animation-delay: -0.5s; &:before { content: ''; position: absolute; top: -15px; left: -15px; border-bottom: 28px solid transparent; border-left: 60px solid #5A6B8C; } &:after { content: ''; position: absolute; top: -15px; left: -15px; border-top: 28px solid transparent; border-left: 60px solid #424A6B; transform: rotate(-50deg); } } .man { position: absolute; top: 168px; left: 236px; width: 465px; height: 321px; z-index: 1; &__head { content: ''; position: absolute; top: 77px; left: 30px; width: 35px; height: 67px; background: #473A56; border-radius: 18px; transform-origin: bottom left; transform: rotate(5deg); animation: sceneThreeManHead 1s ease infinite; &:before { content: ''; position: absolute; top: -9px; left: 12px; width: 56px; height: 66px; background: #0A0615; border-radius: 0 0 6px 45px; } &:after { content: ''; position: absolute; top: 13px; left: 51px; width: 23px; height: 16px; background: #0A0615; border-radius: 0 0 4px 0; } } &__hair { content: ''; position: absolute; top: -67px; left: -16px; width: 46px; height: 86px; background: #0A0615; border-radius: 35px 0 0 27px; &:before { content: ''; position: absolute; top: 0px; left: 46px; width: 10px; border-right: 11px solid transparent; border-top: 16px solid #0A0615; } &:after { content: ''; position: absolute; top: 16px; left: 46px; height: 17px; border-bottom: 10px solid transparent; border-left: 10px solid #0A0615; } } &__beard { content: ''; position: absolute; top: -62px; left: 30px; width: 40px; height: 75px; background: #6B8278; border-radius: 0 28px 0 22px; box-shadow: inset -10px 1px 0 0 #7AA68E; &:before { content: ''; position: absolute; top: 37px; left: 18px; width: 26px; height: 8px; background: #0A0615; } &:after { content: ''; position: absolute; top: 50px; left: 28px; width: 6px; height: 9px; background: #0A0615; border-radius: 2px; animation: sceneThreeManEye 2s ease infinite; } } &__nose { position: absolute; top: -11px; left: 70px; width: 12px; height: 24px; background: #73436B; border-radius: 0 12px 4px 0; box-shadow: inset -4px 0 0 0 #B65B76; &:before { content: ''; position: absolute; top: 14px; left: -4px; width: 12px; height: 10px; background: #73436B; border-radius: 4px 0 0 4px; box-shadow: inset 0 -4px 0 0 #B65B76; } } &__body { position: absolute; top: 199px; left: 40px; width: 71px; height: 110px; background: #31396A; border-radius: 50px 0 0 4px; box-shadow: inset -14px 0 0 0 #3A7BA5; transform-origin: 0 0; transform: rotate(-66deg); z-index: 1; &:before { content: ''; position: absolute; top: 157px; left: 15px; width: 72px; height: 37px; background: #4A4263; box-shadow: inset -7px 0 0 0 #413452, 0 12px 0 0 #3A114B; transform-origin: 0 0; transform: rotate(-24deg); } &:after { content: ''; position: absolute; top: 108px; left: -8px; width: 72px; height: 68px; background: #31396A; box-shadow: inset -8px 0 0 0 #293253; border-radius: 16% 0 0 0 / 100% 0 0 0; transform-origin: 0 0; transform: rotate(-25deg); } } &__arm { position: absolute; top: 121px; left: 28px; width: 58px; height: 75px; background: #325385; border-radius: 29px 29px 0 0; box-shadow: inset -12px 0 0 0 #3A7BA5; transform: rotate(-9deg); transform-origin: 29px 29px; z-index: 1; &:before { content: ''; position: absolute; top: 75px; left: 16px; width: 33px; height: 80px; background: #6B8278; border-radius: 0 0 16px 16px; } } &__forearm { position: absolute; top: 130px; left: 20px; width: 26px; height: 163px; background: #6B8278; border-radius: 40px; transform-origin: 13px 13px; transform: rotate(-131deg); &:before { content: ''; position: absolute; top: 142px; left: 7px; height: 18px; border-bottom: 22px solid transparent; border-right: 23px solid #6B8278; transform: rotate(50deg); transform-origin: 0 0; animation: sceneThreeManPalm .5s linear infinite; } &:after { content: ''; position: absolute; top: 165px; left: -39px; width: 13px; border-left: 19px solid transparent; border-bottom: 18px solid #7AA68E; transform-origin: bottom right; transform: rotate(4deg) translate(0, 0); animation: sceneThreeManFingers .5s linear infinite; } } &__shorts { position: absolute; top: 244px; left: 277px; width: 50px; height: 70px; background: #3A114B; transform-origin: 0 0; transform: rotate(-117deg); border-radius: 4px 0 0 0; z-index: 7; &:after { content: ''; position: absolute; top: -9px; left: -12px; width: 83px; height: 102px; background: #553356; box-shadow: inset 47px 0 0 0 #522959; transform-origin: 0 0; transform: rotate(-22deg); border-radius: 24px 40px 0 0 / 54px 40px 0 0; } &:before { content: ''; position: absolute; top: -37px; left: 14px; border-right: 50px solid transparent; border-top: 46px solid #522959; border-radius: 0 15px; transform-origin: 0 0; transform: rotate(23deg); } } &__legs { position: absolute; top: 183px; left: 323px; div:nth-child(1) { position: absolute; top: -37px; left: -95px; width: 40px; height: 164px; background: #4A426B; border-radius: 0 0 22px 15px; transform-origin: top right; transform: rotate(-143deg); z-index: 6; &:before { content: ''; position: absolute; top: -2px; left: -28px; width: 40px; height: 164px; background: #4A426B; border-radius: 0 0 22px 15px; transform-origin: top right; transform: rotate(-8deg); } } div:nth-child(2) { position: absolute; top: -68px; left: 106px; width: 32px; height: 69px; background: #4A426B; border-radius: 0 0 0 10px; transform-origin: 0 0; transform: rotate(-146deg); &:before { content: ''; position: absolute; top: -13px; left: 84px; width: 23px; border-right: 33px solid transparent; border-left: 5px solid transparent; border-top: 70px solid #473A56; transform-origin: 0 0; transform: rotate(91deg); } &:after { content: ''; position: absolute; top: 48px; left: 3px; width: 30px; height: 15px; background: #4A426B; border-radius: 0 0 11px 6px; transform-origin: 0 0; transform: rotate(41deg); } } div:nth-child(3) { position: absolute; top: -131px; left: 115px; width: 23px; height: 13px; background: #4A426B; border-radius: 0 5px 10px 0; transform-origin: 0 0; transform: rotate(-126deg); } div:nth-child(4) { position: absolute; top: 24px; left: 3px; width: 58px; height: 135px; background: #352C49; border-radius: 0 0 30px 30px; transform-origin: 0 0; transform: rotate(-124deg); z-index: 4; } div:nth-child(5) { content: ''; position: absolute; top: -97px; left: 65px; width: 30px; height: 180px; transform-origin: 0 0; transform: rotate(7deg); background: #352C49; border-radius: 19px 14px 0 0; z-index: 5; &:before { content: ''; position: absolute; top: 0px; left: 22px; width: 30px; height: 170px; background: #352C49; border-radius: 0 29px 0 26px; transform-origin: 0 0; transform: rotate(8deg); } } div:nth-child(6) { position: absolute; top: 71px; left: 37px; width: 35px; height: 35px; background: #352C49; border-radius: 30px 30px 0 0; transform: rotate(237deg); &:before { content: ''; position: absolute; top: 1px; left: -30px; height: 13px; border-top: 22px solid transparent; border-right: 50px solid #352C49; transform: rotate(10deg); } &:after { content: ''; position: absolute; top: 16px; left: -56px; width: 42px; height: 19px; background: #352C49; border-radius: 20px 17px 0 0; transform: rotate(-40deg); } } } } .laptop { position: absolute; top: 166px; left: 164px; width: 72px; height: 11px; background: #0A0615; border-radius: 0 0 8px 0; &:before { content: ''; position: absolute; top: -84px; left: 65px; width: 10px; height: 96px; background: #0A0615; border-radius: 0 10px 10px 0; box-shadow: -5px 0 0 0 #92DAF3; transform-origin: bottom right; transform: rotate(14deg); } &:after { content: ''; position: absolute; top: 0px; left: 58px; width: 10px; height: 10px; background: #0A0615; } } .pizza { position: absolute; top: 392px; left: 62px; width: 156px; height: 18px; background: #473A56; z-index: 1; &:before { content: ''; position: absolute; top: -102px; left: -12px; width: 94px; height: 102px; box-sizing: border-box; background: #524A6B; border-top: 10px solid #413452; border-right: 16px solid #473A56; border-left: 14px solid #473A56; transform: skewX(14deg); } &:after { content: ''; position: absolute; top: -20px; left: 0px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 20px solid #524A6B; } &__fat { position: absolute; top: -78px; left: 12px; width: 18px; height: 16px; background: #413452; border-radius: 50%; transform: skewX(14deg); &:before { content: ''; position: absolute; top: 4px; left: 31px; width: 20px; height: 25px; background: #413452; border-radius: 15px 0 0 15px; } &:after { content: ''; position: absolute; top: 33px; left: 4px; width: 47px; height: 46px; background: #413452; border-radius: 70% 0 0 0; } } } .coffee { position: absolute; top: 355px; left: 125px; width: 28px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 55px solid #5A6B8C; transform-origin: 7px bottom; z-index: 1; animation: sceneThreeCoffee 10s ease infinite; animation-delay: -0.5s; &:before { content: ''; position: absolute; top: -45px; left: -6px; width: 32px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 27px solid #27445A; } &:after { content: ''; position: absolute; top: -72px; left: 0px; width: 29px; height: 9px; background: #4A5A73; box-shadow: -13px 8px 0 0 #5A6B8C, 13px 8px 0 0 #5A6B8C, 6px 13px 0 0 #4A5A73, -7px 13px 0 0 #4A5A73; } } .bg-1 { position: absolute; top: 0px; left: 0px; width: 850px; height: 130px; border-radius: 0 50px 50px 0; background: #2F294A; animation: sceneThreeBg1 10s ease infinite; &:before { content: ''; position: absolute; top: 257px; left: 0px; width: 850px; height: 133px; background: #2F294A; border-radius: 0 55px 55px 0; } } .bg-2 { position: absolute; top: 0px; right: 0px; width: 860px; height: 54px; background: #2F294A; border-radius: 25px 0 0 25px; animation: sceneThreeBg2 10s ease infinite; &:before { content: ''; position: absolute; top: 126px; right: 0px; width: 1054px; height: 133px; background: #2F294A; border-radius: 57px 0 0 57px; } &:after { content: ''; position: absolute; top: 521px; right: 0px; width: 1314px; height: 90px; background: #2F294A; border-radius: 50px 0 0 0; } } } @keyframes sceneThreeManEye { 60% { transform: scaleY(1); } 65% { transform: scaleY(.1); } 70% { transform: scaleY(1); } } @keyframes sceneThreeManPalm { 0% { transform: rotate(50deg); } 50% { transform: rotate(40deg); } 100% { transform: rotate(50deg); } } @keyframes sceneThreeManFingers { 0% { transform: rotate(4deg) translate(0, 0); } 50% { transform: rotate(-6deg) translate(5px, 4px); } 100% { transform: rotate(4deg) translate(0, 0); } } @keyframes sceneThreeManHead { 0% { transform: rotate(0deg); } 50% { transform: rotate(9deg); } 100% { transform: rotate(0deg); } } @keyframes sceneThreeCoffee { 0% { transform: rotate(0deg) translate(0px, 0px); } 55.2% { transform: rotate(0deg) translate(0px, 0px); } 57.6% { transform: rotate(-77deg) translate(0px, 0px); } 58.8% { transform: rotate(-77deg) translate(9px, 8px); } 60% { transform: rotate(-77deg) translate(0px, 0px); } 100% { transform: rotate(-77deg) translate(0px, 0px); } } @keyframes sceneThreePapper { 0% { transform: rotate(-6deg); } 57% { transform: rotate(-6deg); } 59.4% { transform: rotate(-38deg); } 100% { transform: rotate(-38deg); } } @keyframes sceneThreeManHead { 0% { transform: rotate(0deg); } 50% { transform: rotate(9deg); } 100% { transform: rotate(0deg); } } @keyframes sceneThreeRoad { 0% { transform: translate(0, 0); } 52.8% { transform: translate(0, 0); } 61.8% { transform: translate(1220px, 0); } 100% { transform: translate(1220px, 0); } } @keyframes sceneThreeCar { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } @keyframes sceneThreeBg1 { 0% { transform: translateX(0); } 55.3% { transform: translateX(0); } 61.8% { transform: translateX(-850px); } 100% { transform: translateX(-850px); } } @keyframes sceneThreeBg2 { 0% { transform: translateX(0); } 55.2% { transform: translateX(0); } 61.8% { transform: translateX(1320px); } 100% { transform: translateX(1320px); } } @keyframes sceneThree { 0% { opacity: 0; z-index: 3; } 31.1% { opacity: 0; z-index: 3; } 31.2% { opacity: 1; z-index: 3; } 37.8% { opacity: 1; z-index: 4; } 61.7% { opacity: 1; z-index: 4; } 61.8% { opacity: 0; z-index: 1; } 88.8% { opacity: 0; z-index: 2; } 100% { opacity: 0; z-index: 2; } } .scene-4 { position: absolute; top: 0px; left: 0px; width: 800px; height: 600px; animation: sceneFour 10s linear infinite; &__top { position: absolute; top: 0px; left: 0px; animation: sceneFourTop 10s ease infinite; } &__left { position: absolute; top: 0px; left: 0px; animation: sceneFourLeft 10s ease infinite; } &__right { position: absolute; top: 0px; left: 0px; animation: sceneFourRight 10s ease infinite; } .picture-1 { position: absolute; top: 0px; left: 0px; width: 98px; height: 98px; background: #6B8439; border: 12px solid #32283F; overflow: hidden; &:before { content: ''; position: absolute; top: 0px; left: 0px; width: 100px; height: 100px; background: #435A3A; transform: rotate(45deg); } &:after { content: ''; position: absolute; top: 53px; left: 58px; width: 20px; height: 36px; background: #D0BD21; box-shadow: 0 -43px 0 0 #D0BD21; border-radius: 100%; transform-origin: 0 0; transform: rotate(-135deg); } } .picture-2 { position: absolute; top: 136px; left: 36px; width: 62px; height: 91px; background: #C6C69C; border: 12px solid #314339; &:before { content: ''; position: absolute; top: 62px; left: 6px; width: 4px; height: 5px; background: #32283F; box-shadow: 8px 0 0 0 #32283F, 12px 0 0 0 #32283F, 20px 0 0 0 #32283F, 24px 0 0 0 #32283F, 28px 0 0 0 #32283F, 32px 0 0 0 #32283F, 36px 0 0 0 #32283F, 40px 0 0 0 #32283F, 44px 0 0 0 #32283F, 44px 8px 0 0 #32283F, 40px 8px 0 0 #32283F, 36px 8px 0 0 #32283F, 8px -8px 0 0 #32283F, 12px -8px 0 0 #32283F, 16px -8px 0 0 #32283F, 24px -8px 0 0 #32283F, 32px -8px 0 0 #32283F, 36px -8px 0 0 #32283F, 40px -8px 0 0 #32283F, 43px -8px 0 0 #32283F, 4px -16px 0 0 #32283F, 8px -16px 0 0 #32283F, 12px -16px 0 0 #32283F, 16px -16px 0 0 #32283F, 20px -16px 0 0 #32283F, 28px -16px 0 0 #32283F, 32px -16px 0 0 #32283F, 36px -16px 0 0 #32283F, 40px -16px 0 0 #32283F, 12px -28px 0 0 #32283F, 16px -28px 0 0 #32283F, 20px -28px 0 0 #32283F, 24px -28px 0 0 #32283F, 28px -28px 0 0 #32283F, 32px -28px 0 0 #32283F, 34px -28px 0 0 #32283F, 12px -24px 0 0 #32283F, 16px -24px 0 0 #32283F, 20px -24px 0 0 #32283F, 24px -24px 0 0 #32283F, 28px -24px 0 0 #32283F, 32px -24px 0 0 #32283F, 34px -24px 0 0 #32283F; } &:after { content: ''; position: absolute; top: 9px; left: 23px; width: 7px; height: 7px; border: 4px solid #32283F; transform: rotate(45deg); } } .picture-3 { position: absolute; top: -30px; left: 138px; width: 53px; height: 74px; background: #6B8439; border: 10px solid #314339; } .picture-4 { position: absolute; top: 79px; left: 138px; width: 164px; height: 86px; background: #AEAB21; border: 12px solid #424242; box-shadow: inset 0 0 0 14px #D0C821; &:before { content: ''; position: absolute; top: 26px; left: 102px; width: 35px; height: 35px; background: linear-gradient(-45deg, #9B9C21 50%, #737B21 50%); border-radius: 100% 0; transform: rotate(-45deg); box-shadow: -27px -27px 0 0 #737B21; } &:after { content: ''; position: absolute; top: 26px; left: 26px; width: 35px; height: 35px; background: linear-gradient(-45deg, #737B21 50%, #9B9C21 50%); border-radius: 100% 0; transform: rotate(-45deg); } } .picture-5 { position: absolute; top: 26px; left: 225px; width: 26px; height: 26px; background: #435A3A; border: 6px solid #32283F; &:before { content: ''; position: absolute; top: 7px; left: 7px; width: 11px; height: 11px; background: #9B9C21; transform: rotate(45deg); } &:after { content: ''; position: absolute; top: -43px; left: -5px; width: 25px; height: 10px; background: #435A3A; border: 6px solid #32283F; } } .picture-6 { position: absolute; top: -30px; left: 276px; width: 310px; height: 55px; background: #5A6222; border: 12px solid #5A6222; box-shadow: inset 0 0 0 12px #737B21; &:before { content: ''; position: absolute; top: 6px; left: 23px; width: 30px; height: 30px; background: #737B21; border-radius: 90% 0; box-shadow: 103px 0 0 0 #737B21, 206px 0 0 0 #737B21; } &:after { content: ''; position: absolute; top: 6px; left: 52px; width: 30px; height: 30px; background: #737B21; border-radius: 0 90%; box-shadow: 103px 0 0 0 #737B21, 206px 0 0 0 #737B21; } } .picture-7 { position: absolute; top: 64px; left: 552px; width: 112px; height: 64px; background: linear-gradient(to right, #6B8439 45%, #435A3A 46%, #435A3A 55%, #6B8439 56%); border: 12px solid #32283F; box-shadow: inset 0 0 0 12px #435A3A; &:before { content: ''; position: absolute; top: 18px; left: 17px; width: 14px; height: 14px; background: #314339; border-radius: 50%; box-shadow: 14px 0 0 0 #314339, 14px 14px 0 0 #314339, 0 14px 0 0 #314339, 49px 0 0 0 #314339, 49px 14px 0 0 #314339, 63px 14px 0 0 #314339, 63px 0 0 0 #314339; } &:after { content: ''; position: absolute; top: -100px; left: 62px; width: 190px; height: 51px; background: #314339; border: 11px solid #32283F; box-shadow: inset 0 0 0 12px #6B8439; } } .picture-8 { position: absolute; top: 64px; left: 702px; width: 120px; height: 97px; background: #9B9C21; border: 15px solid #314339; box-shadow: inset 0 0 0 12px #D0BD21; &:before { content: ''; position: absolute; top: 85px; left: -624px; width: 10px; height: 4px; background: #32283F; box-shadow: -2px 8px 0 0 #32283F; transform: skewX(-27deg); } &:after { content: ''; position: absolute; top: 85px; left: -663px; width: 10px; height: 4px; background: #32283F; box-shadow: 2px 8px 0 0 #32283F; transform: skewX(27deg); } } .bookshelf { position: absolute; top: 266px; left: 555px; width: 320px; height: 294px; background: linear-gradient(#314339 9%, #435A3A 9%, #435A3A 35%, #4A6B39 35%, #4A6B39 38%, #314339 38%, #314339 48%, #435A3A 48%, #435A3A 68%, #4A6B39 68%, #4A6B39 71.5%, #314339 72%, #314339 81%, #435A3A 81%); border: 12px solid #537A39; &:before { content: ''; position: absolute; top: 10px; left: 168px; width: 28px; height: 92px; background: #FFFFFF; box-shadow: -8px 0 0 0 #436B94, inset 0 22px 0 10px #528CB5, inset 0 0 0 10px #528CB5; } &:after { content: ''; position: absolute; top: 10px; left: 204px; width: 28px; height: 92px; background: #FFFFFF; box-shadow: -8px 0 0 0 #737B21, inset 0 22px 0 10px #9B9C21, inset 0 0 0 10px #9B9C21; } } .photo { position: absolute; top: 306px; left: 629px; width: 35px; height: 56px; background: #6B8439; border: 9px solid #32283F; overflow: hidden; &:before { content: ''; position: absolute; top: 10px; left: 7px; width: 18px; height: 18px; background: #ACB752; border-radius: 50%; } &:after { content: ''; position: absolute; top: 32px; left: -7px; border