body { display:none; justify-content: center; position: absolute; background-color: #1f1f1f; /*background-image: url("s-brick008.gif");*/ color: #9999ff; font-weight: bold; font-size: 18px; text-align:center; } #field { position: relative; height: 510px; } .button { display: block; position: absolute; border: 0; line-height: 2.5; padding: 0 20px; font-size: 1rem; text-align: center; color: #fff; font-weight: bold; text-shadow: 1px 1px 1px #000; border-radius: 10px; background-color: rgba(0, 0, 219, 0.8); background-image: linear-gradient( to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0) ); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6); z-index : 2; } .button:hover { background-color: rgba(255, 0, 0, 1); } #start { background-color: rgba(255, 51, 255, 0.8); width: 200px; height: 50px; top: 446px; left:500px; z-index : 2; } #stop0, #stop1, #stop2 { width: 120px; height: 40px; top: 370px; margin:8px 300px; border: 0; line-height: 2.5; padding: 0 20px; font-size: 1rem; text-align: center; color: #fff; text-shadow: 1px 1px 1px #000; border-radius: 10px; background-color: rgba(0,128,0, 1); background-image: linear-gradient( to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0) display: inline-block; padding: 5px 40px; margin-top: 10px; margin: 5px; background-color: rgb(237, 23, 23); border-bottom: solid 4px #627295; border-radius: 10px; z-index : 2; ); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6); } #stop0:active { -webkit-transform: translateY(2px); transform: translateY(2px); border-bottom: none; } #stop1:active { -webkit-transform: translateY(2px); transform: translateY(2px); border-bottom: none; } #stop2:active { -webkit-transform: translateY(2px); transform: translateY(2px); border-bottom: none; } #stop0:hover { background-color: rgba(60,179,113, 1); } #stop1:hover { background-color: rgba(60,179,113, 1); } #stop2:hover { background-color: rgba(60,179,113, 1); } #stop0:active { box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6); } #stop1:active { box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6); } #stop2:active { box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6); } #stop0 { left: 120px; } #stop1 { left: 240px; } #stop2 { left: 360px; } .red { color: #f00; font-weight: bold; font-size: 1.4rem; } .blue { color: #0033cc; font-weight: bold; } .green { color: #008000; font-weight: bold; } .re{ top : 468px ; left : 790px ; /*margin:430px 546px;*/ color: #fff; background-color: rgba(51, 204, 255, 0.8); position: absolute; width: 100px; height: 26px; border: 2px solid; border-radius: 4px; border-radius: 40%; font-weight: bold; z-index : 4; } .re:hover { background-color: rgba(102, 0, 255, 1); } .gradation { font-size: 16px; display: inline-block; font-family: "Roboto", sans-serif; font-weight: bold; background: linear-gradient(90deg, #8c7537 0%, #dbb00b 45%, #fde79d 70%, #dbb10c 85%, #bc7f04 90% 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .number-spinner-wrap{ position: relative; display: block; width: 1200px !important; height: 2rem; } .number-spinner-wrap input::-webkit-outer-spin-button, .number-spinner-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .number-spinner-wrap input{ width:172px; height: 26px; padding-left: 1rem; padding-right: 1rem; text-align: center; font-weight: bold; background-color: #00ccff; color: #fff; } .number-spinner-wrap .spinner{ position: absolute; top: 50%; width: 1.4rem; transform: translate(0, -50%); font-size: 1rem; padding: 2px 1rem; text-align: center; background: #00ff99; cursor: pointer; user-select: none; } .number-spinner-wrap .spinner-down{ left: 496px; border-right: 1px solid lightgray; } .number-spinner-wrap .spinner-up{ right: 496px; border-left: 1px solid lightgray; } .custom-blink { animation: blink-slow 0.5s infinite; } @keyframes blink-slow { 0% { opacity: 0; } 100% { opacity: 1; } } .setf { margin-left: 20px; } .text { animation: flash 1s linear infinite; } @keyframes flash { 0%, 30%, 55%, 100% { opacity: 0; } 25% { opacity: 1; color: #00cc33; } 50% { opacity: 1; color: #ffcc00; } 75% { opacity: 1; color: #ff0066; } } .fset { z-index : 2; } .ftime { position:absolute; top : 500px ; left : 948px ; z-index : 2; color: #fff; font-size: 18px; } .frogo { position:absolute; top : 444px ; left : 162px ; z-index : 2; } .frogo2 { position:absolute; top : 394px ; left : 954px ; z-index : 2; } span { display: inline-block; } .hit2 { display:inline-block; animation: blinkAnimeS5 2s infinite; } @keyframes blinkAnimeS5{ 100% { transform: rotateX(360deg); } } .save { top : 360px ; left : 426px ; display: block; position: absolute; border: 0; line-height: 2; padding: 0 20px; font-size: 1rem; text-align: center; color: #fff; font-weight: bold; text-shadow: 1px 1px 1px #000; border-radius: 10px; background-color: rgba(0, 0, 219, 0.8); z-index : 2; } .save:hover { background-color: rgba(102, 0, 255, 1); }.save2 {top : 360px ;left : 422px ;display: block;position: absolute;z-index : 2;} .del2 { top : 365px ; left : 785px ; display: block; position: absolute; border: 0; line-height: 2; padding: 0 20px; font-size: 12px; text-align: center; color: #fff; font-weight: bold; text-shadow: 1px 1px 1px #000; border-radius: 10px; background-color: rgba(0, 0, 219, 0.8); z-index : 2; } .del2:hover { background-color: rgba(255, 102, 255, 1); } .ftime2 { position:absolute; top : 440px ; left : 785px ; display: block; border: 0; line-height: 1.5; padding: 0 20px; font-size: 1rem; text-align: center; color: #fff; font-weight: bold; text-shadow: 1px 1px 1px #000; border-radius: 10px; background-color: rgba(51, 153 51, 0.8); background-image: linear-gradient( to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0) ); box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6); } .button:hover { background-color: rgba(255, 0, 0, 1); } .frogo3 { position:absolute; top : 414px ; left : 782px ; z-index : 2; } .frogo4 { position:absolute; top : 400px ; left : 366px ; z-index : 2; } .frogo5 { position:absolute; top : 400px ; left : 366px ; z-index : 2; animation: blink-slow 0.5s infinite; @keyframes blink-slow { 0% { opacity: 0; } 100% { opacity: 1; } } } .frogo6 { position:absolute; top : 366px ; left : 162px ; z-index : 2; } .frogo7 { position:absolute; top : 48px ; left : 535px ; z-index : 3; } .logoflower { position:absolute; top : 80px ; left : 486px ; z-index : 2; animation: spinCoin 3s infinite linear; } @keyframes spinCoin { from { transform: rotateY(0deg); } to { transform:rotate3d(1,1,1,360deg); } } .logoflower2 { position:absolute; top : 70px ; left : 480px ; z-index : 2; animation: spinCoin 3s infinite linear; } @keyframes spinCoin { from { transform: rotateY(0deg); } to { transform:rotateY(360deg); } } .logoflower2_2 {position:absolute;top : 70px ;left : 200px ;z-index : 2;animation: spinCoin 3s infinite linear;}@keyframes spinCoin {from {transform: rotateY(0deg);}to {transform:rotateY(360deg);}}.logoflower2_3 {position:absolute;top : 70px ;left : 760px ;z-index : 2;animation: spinCoin 3s infinite linear;}@keyframes spinCoin {from {transform: rotateY(0deg);}to {transform:rotateY(360deg);}}.logoflower3 { position:absolute; top : 100px ; left : 190px ; z-index : 2; } .logoflower4 { position:absolute; top : 48px ; left : 196px ; z-index : 2; } .logoflower5 { position:absolute; top : 48px ; left : 220px ; z-index : 2; } .logoflower6 { position:absolute; top : 48px ; left : 236px ; z-index : 2; } .logoflower7 { position:absolute; top : 48px ; left : 252px ; z-index : 2; } .logoflower8 { position:absolute; top : 48px ; left : 268px ; z-index : 2; } .logoflower9 { position:absolute; top : 48px ; left : 284px ; z-index : 2; } .logoflower10 { position:absolute; top : 48px ; left : 300px ; z-index : 2; } .logoflower11 { position:absolute; top : 48px ; left : 316px ; z-index : 2; } .logoflower12 { position:absolute; top : 48px ; left : 332px ; z-index : 2; } .logoflower13 { position:absolute; top : 48px ; left : 348px ; z-index : 2; } .logoflower14 { position:absolute; top : 48px ; left : 372px ; z-index : 2; } .logoflower15 { position:absolute; top : 48px ; left : 388px ; z-index : 2; } .logoflower16 { position:absolute; top : 48px ; left : 404px ; z-index : 2; } .logoflower17 { position:absolute; top : 48px ; left : 428px ; z-index : 2; } .logoflower18 { position:absolute; top : 48px ; left : 444px ; z-index : 2; } .logoflower19 { position:absolute; top : 48px ; left : 460px ; z-index : 2; } .logoflower20 { position:absolute; top : 48px ; left :476px ; z-index : 2; } .logoflower21 { position:absolute; top : 48px ; left :712px ; background: linear-gradient(to right, #00a1e5, #00ffbc); background: -webkit-linear-gradient(to right, #00a1e5, #00ffbc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; z-index : 2;} .logoflower22 { position:absolute; top : 300px ; left : 196px ; z-index : 2; } .logoflower23 { position:absolute; top : 300px ; left : 212px ; z-index : 2; } .logoflower24 { position:absolute; top : 300px ; left : 228px ; z-index : 2; } .logoflower25 { position:absolute; top : 300px ; left : 252px ; z-index : 2; } .logoflower26 { position:absolute; top : 300px ; left : 268px ; z-index : 2; } .logoflower27 { position:absolute; top : 300px ; left : 284px ; z-index : 2; } .logoflower28 { position:absolute; top : 300px ; left : 308px ; z-index : 2; } .logoflower29 { position:absolute; top : 300px ; left : 324px ; z-index : 2; } .logoflower30 { position:absolute; top : 300px ; left : 340px ; z-index : 2; } .logoflower31 { position:absolute; top : 300px ; left : 364px ; z-index : 2; } .logoflower32 { position:absolute; top : 300px ; left : 380px ; z-index : 2; } .logoflower33 { position:absolute; top : 300px ; left : 396px ; z-index : 2; } .logoflower34 { position:absolute; top : 300px ; left : 420px ; z-index : 2; } .logoflower35 { position:absolute; top : 300px ; left : 436px ; z-index : 2; } .logoflower36 { position:absolute; top : 300px ; left : 452px ; z-index : 2; } .logoflower37 { position:absolute; top : 300px ; left : 468px ; z-index : 2; } .logoflower38 { position:absolute; top : 300px ; left : 484px ; z-index : 2; } .logoflower39 { position:absolute; top : 300px ; left : 500px ; z-index : 2; } .logoflower40 { position:absolute; top : 300px ; left : 516px ; z-index : 2; } .logoflower41 { position:absolute; top : 300px ; left : 532px ; z-index : 2; } .logohis { position:absolute; font-size: 1rem; top : 468px ; left :766px ; font-family: verdana; font-size: 15px; border: 0; line-height: 2; padding: 0 20px; text-align: center; color: #fff; font-weight: bold; text-shadow: 1px 1px 1px #000; z-index : 2; } .test { position:absolute; top : 440px ; left : 190px ; z-index : 2; } .frogo8 { position:absolute; top : 364px ; left : 880px ; z-index : 2; } .frogo9 { position:absolute; top : 318px ; left : 158px ; z-index : 2; } .frogo10 { position:absolute; top : 190px ; left : 157px ; z-index : 2; } .del3 { top : 325px ; left : 556px ; display: block; position: absolute; border: 0; line-height: 2; padding: 0 20px; font-size: 12px; text-align: center; color: #fff; font-weight: bold; text-shadow: 1px 1px 1px #000; border-radius: 10px; background-color: rgba(255, 102, 102, 0.8); z-index : 2; } .del3:hover { background-color: rgba(255, 102, 255, 1); } .circle { position: absolute; top : 416px ; left : 721px ; width: 50px; height: 50px; border-bottom: solid 4px #000; background-color: rgba(255, 204, 102, 0.9); border-radius: 50%; text-align: center; color: #fff; font-weight: bold; text-shadow: 1px 1px 1px #000; margin: 50px auto; text-align: center; line-height: 50px; font-size: 16px; animation: fuwafuwa 2s infinite; z-index : 2; } @keyframes fuwafuwa { 0% { transform: translateY(0px); } 50% { transform: translateY(-30px); } 100% { transform: translateY(0px); } } .frogo99 { position:absolute; top : 462px ; left : 716px ; z-index : 3; } #curtain1{ top:48px; position:absolute; left:164px; height:277px; z-index : 4; } #curtain2{ top:48px; position:absolute; height:277px; right:157px; z-index : 4; } .frogo11 { position:absolute; top : 456px ; left : 422px ; z-index : 2; } .frogo12 { position:absolute; top : 502px ; left : 380px ; border: 0; line-height: 1.2; padding: 0 20px; font-size: 1rem; text-align: center; color: #fff; font-weight: bold; text-shadow: 1px 1px 1px #000; border-radius: 10px; background-color: rgba(51, 153 51, 0.8); background-image: linear-gradient( to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) ); z-index : 2; } .frogo13 { position:absolute; top : 310px ; left : 180px ; z-index : 2; } .frogo14 { position:absolute; top : 424px ; left : 164px ; border: 0; line-height: 1.2; padding: 0 20px; font-size: 1rem; text-align: center; color: #fff; font-weight: bold; text-shadow: 1px 1px 1px #000; border-radius: 10px; background-color: rgba(206, 198, 246, 0.8); background-image: linear-gradient( to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) ); z-index : 2; } .frogo14:hover { background-color: rgba(255, 0, 0, 1); } .frogo15 { position:absolute; top : 424px ; left : 264px ; accent-color: #009933; inline-size: 1rem; block-size: 1rem; z-index : 2; } .frogo16 { position:absolute; top : 424px ; left : 304px ; accent-color: #009933; inline-size: 1rem; block-size: 1rem; z-index : 2; } .frogo17 { position:absolute; top : 424px ; left : 285px; font-size: 1rem; text-align: center; color: #cc99ff; font-weight: bold; text-shadow: 1px 1px 1px #000; z-index : 2; } .frogo18 { position:absolute; top : 424px ; left : 325px; font-size: 1rem; text-align: center; color: #cc99ff; font-weight: bold; text-shadow: 1px 1px 1px #000; z-index : 2; } .frogo14:hover { background-color: rgba(255, 0, 0, 1); } .hisc { top : 323px ; left : 172px ; display: block; position: absolute; z-index : 2; } .hisc2 { top : 324px ; left : 790px ; font-size: 16px; font-weight: bold; color: transparent; background: #000; text-shadow: 2px 2px 3px rgba( 255, 255, 255, 0.5); background-clip: text; -webkit-background-clip: text; display: block; position: absolute; z-index : 5; } .logoflower777 { position:absolute; top : 52px ; left :780px ; background: linear-gradient(to right, #00a1e5, #00ffbc); background: -webkit-linear-gradient(to right, #00a1e5, #00ffbc); -webkit-background-clip: text; -webkit-text-fill-color: transparent; z-index : 2; } .medhit { animation: blinking 1s ease-in-out infinite alternate; position:absolute; top : 190px ; left : 230px ; } @keyframes blinking { 0% {opacity: 0;} 100% {opacity: 1;} } .medhit2 { animation: blinking 1s ease-in-out infinite alternate; position:absolute; top : 190px ; left : 542px ; } @keyframes blinking { 0% {opacity: 0;} 100% {opacity: 1;} } .flower_fre { position:absolute; top : 27px ; left :143px ; z-index : 1; } input[type="range"] { position:absolute; top : 396px ; left : 785px ; -webkit-appearance: none; overflow: hidden; height: 10px; width: 100px; cursor: pointer; border-radius: 0; z-index : 3; } ::-webkit-slider-runnable-track { background: #009999; } ::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 40px; background: #ff9900; box-shadow: -200px 0 0 200px dodgerblue; border: 2px solid #999; } ::-moz-range-track { height: 40px; background: #ddd; } ::-moz-range-thumb { background: #ff9900; height: 40px; width: 20px; border: 3px solid #999; border-radius: 0 !important; box-shadow: -200px 0 0 200px dodgerblue; box-sizing: border-box; } ::-ms-fill-lower { background: dodgerblue; } ::-ms-thumb { background: #ff9900; border: 2px solid #999; height: 40px; width: 20px; box-sizing: border-box; } ::-ms-ticks-after { display: none; } ::-ms-ticks-before { display: none; } ::-ms-track { background: #ddd; color: transparent; height: 40px; border: none; } ::-ms-tooltip { display: none; } .sound { top : 393px ; left : 884px ; display: block; position: absolute; z-index : 3; } .secret { top : 6px ; left : 142px ; display: block; position:absolute; z-index : 5; } .secret2 { top : 28px ; left : 574px ; display: block; position: absolute; border: 0; line-height: 1; font-size: 18px; text-align: center; color: #aeafb1; border-radius: 8px; background-color: #1f1f1f; z-index : 5; } .secret2:hover { background-color: #006633; } .progress-bar {} progress{ -webkit-appearance: none;} progress::-webkit-progress-bar { background-image: linear-gradient(90deg, rgba(255, 151, 29, 0.89) 0%, rgba(247, 238, 12, 0.89) 31%, rgba(233, 94, 52, 0.89) 55%, rgba(154, 39, 238, 0.89) 79%, rgba(88, 139, 250, 0.89) 95%, rgba(35, 102, 247, 0.89)); position: absolute; top : 326px; left : 780px; height: 21px; width: 264px; border-radius: 4px; z-index : 4; } progress::-webkit-progress-value { background-color: #0099ff; border-radius: 8px;box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6);} .ave { position: absolute; top : 335px; left : 578px; transform: translate(50%,-50%); font-family: verdana; font-size: 16px; border: 0; line-height: 2; padding: 0 20px; text-align: center; color: #fff; font-weight: bold; text-shadow: 1px 1px 1px #000; z-index : 4; } .ave2 { position: absolute; top : 335px; left : 834px; transform: translate(50%,-50%); font-family: verdana; font-size: 16px; border: 0; line-height: 2; padding: 0 20px; text-align: center; color: #fff; font-weight: bold; text-shadow: 1px 1px 1px #000; z-index : 4; } .box { -webkit-animation:blink 1.5s ease-in-out infinite alternate; -moz-animation:blink 1.5s ease-in-out infinite alternate; animation:blink 0.5s ease-in-out infinite alternate; position: absolute; left : 184px; width:564px; top: 50px; padding: 135px; box-shadow: 0 0 5px #ff33ff, inset 0 0 5px #ff33ff, 0 0 10px #ff33ff, inset 0 0 10px #ff33ff, 0 0 25px #ff33ff, inset 0 0 25px #dd4c30, 0 3px #000; border: 2px solid #fff; border-radius: 15px; z-index : 4; } #box.blinking{ -webkit-animation:blink 1.5s ease-in-out infinite alternate; -moz-animation:blink 1.5s ease-in-out infinite alternate; animation:blink 0.5s ease-in-out infinite alternate; } @-webkit-keyframes blink{ 0% {opacity:0;} 100% {opacity:1;} } @-moz-keyframes blink{ 0% {opacity:0;} 100% {opacity:1;} } @keyframes blink{ 0% {opacity:0;} 100% {opacity:1;} } .endro {position: absolute;width: 222px;height: 54px;top: 472px;left:492px;z-index : 2;} .endro2 {position: absolute;width: 120px;height: 70px;top: 446px;left:552px;z-index : 2;}.currently { position: absolute; top: 407px; left:146px; border: 0; line-height: 1.2; padding: 0 20px; font-size: 1rem; text-align: center; color: #fda4d8; font-weight: bold; text-shadow: 1px 1px 1px #000; border-radius: 10px; z-index : 2; }.hisc3 {top : 300px ;left : 546px ;display: block;position: absolute;z-index : 3;animation: blinking 0.3s ease-in-out infinite alternate;}@keyframes blinking {0% {opacity: 0;}100% {opacity: 1;}}.magnification {top : 26px ;left : 974px ;display: block;position:absolute;color: #deeb23;font-weight: lighter;font-size: 16px;text-decoration: none;z-index : 4;}.magnification {animation: blinking 2s ease-in-out infinite alternate;}@keyframes blinking {0% {opacity: 0;}100% {opacity: 1;}}.shit10 {top : 346px ;left : 180px ;display: block;position: absolute;border: 0;line-height: 2;padding: 0 20px;font-size: 14px;text-align: center;color: #ffff66;font-weight: bold;text-shadow: 1px 1px 1px #000;border-radius: 10px; z-index : 3;}.shit11 {top : 346px ;left : 244px ;display: block;position: absolute;border: 0;line-height: 2;padding: 0 20px;font-size: 14px;text-align: center;color: #ffff66;font-weight: bold;text-shadow: 1px 1px 1px #000;border-radius: 10px; z-index : 3;}.shit10_1 {top : 346px ;left : 166px ;display: block;position: absolute;border: 0;line-height: 2;padding: 0 20px;font-size: 14px;text-align: center;color: #fff;font-weight: bold;text-shadow: 1px 1px 1px #1f1f1f;border-radius: 10px; z-index : 3;}.shit11_2 {top : 346px ;left : 226px ;display: block;position: absolute;border: 0;line-height: 2;padding: 0 20px;font-size: 14px;text-align: center;color: #fff;font-weight: bold;text-shadow: 1px 1px 1px #1f1f1f;border-radius: 10px; z-index : 3;}.shit11_3 {top : 346px ;left : 290px ;display: block;position: absolute;border: 0;line-height: 2;padding: 0 20px;font-size: 14px;text-align: center;color: #ffccff;font-weight: bold;text-shadow: 1px 1px 1px #1f1f1f;border-radius: 10px; z-index : 3;}.frogo100 {position:absolute;top : 413px ;left : 882px ;
z-index : 3;}.frogo98 {position:absolute;top : 411px ;left : 902px ;z-index : 3;}