/* Copyright © 2020, Stewart Smith. See LICENSE for details. */ /* The way to solve this absolutely should be transitions. However, because we cannot select a color mode for interpolating between colors, we cannot force interpolation to be HSL. Instead it’s RGB. Which is gross. So we are forced to use keyframe animations to declare each color step in HSL instead. */ body { --beats-per-minute: 101; /* Based on the “Eraser” album artwork colors */ --color-background: hsl( 0, 90%, 40% ); --color-key-background: hsl( 0, 0%, 0% ); --color-key-text: hsl( 0, 10%, 50% ); --color-key-text-glow: hsla( 0, 90%, 90%, 0.1 ); --color-key-press-background: hsl( 0, 90%, 95% ); --color-key-press-text: hsl( 0, 90%, 100% ); --color-key-press-glow: hsla( 0, 0%, 90%, 0.5 ); --color-key-options-background: hsl( 0, 90%, 60% ); --color-key-options-text: hsl( 0, 90%, 100% ); font-size: 24px; line-height: 36px; color: hsl( 0, 0%, 50% ); } strong { color: black; } a { color: hsl( 0, 0%, 50% ); text-decoration-color: hsl( 0, 0%, 90% ); } a:hover { background-color: #FC0; color: black; text-decoration: none; } main { position: relative; width: 100vw; height: 100vh; text-align: center; overflow: hidden; } section, footer { background-color: white; text-align: center; } section { margin: 0; padding: 12vh 0 18vh 0; } .section-description { margin: 0 auto; padding: 5vh 0; width: 90vw; max-width: 640px; } h2 { margin-bottom: 13px; font-weight: normal; color: black; } h2 svg { height: 108px; } /************/ /* */ /* Main */ /* */ /************/ #title, #instructions { position: absolute; right: 0; left: 0; text-align: center; transition: opacity calc( var( --beat ) * 2 ); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #title { top: 25vh; /*color: rgba( 0, 0, 0, 0.7 );*/ color: hsl( 0, 0%, 100% ); text-shadow: 0px 0px calc( var( --size ) * 0.5 ) hsla( 0, 0%, 100%, 0.3 ); font-size: calc( var( --size ) * 3 ); line-height: calc( var( --size ) * 3 ); letter-spacing: calc( var( --size ) * 1.8 ); font-weight: normal; } #title .kern-SW { letter-spacing: calc( var( --size ) * 1.5 ); } #title .kern-WA { letter-spacing: calc( var( --size ) * 1.4 ); } #title .kern-AN { letter-spacing: calc( var( --size ) * 1.6 ); } #instructions { top: 75vh; /*color: white;*/ color: hsla( 0, 0%, 100%, 75% ); font-size: calc( var( --size ) * 2.5 ); line-height: calc( var( --size ) * 4 ); } #instructions .lesser { opacity: 0.5; } #title.playing, #instructions.playing { opacity: 0 } /**************/ /* */ /* Eraser */ /* */ /**************/ section#eraser { padding-top: 20vh; } #eraser-album-cover { width: 50vw; max-width: 512px; height: auto; box-shadow: 2px 2px 6px hsla( 0, 0%, 0%, 0.5 ), 6px 8px 32px hsla( 0, 0%, 0%, 0.3 ); } /****************/ /* */ /* Purchase */ /* */ /****************/ a#xl-link { display: inline-block; margin: 10px auto 20px auto; border-radius: 4px; padding: 0; text-decoration: none; } a#xl-link svg { width: 240px; height: 240px; fill: hsl( 0, 0%, 20% ); } a:hover#xl-link svg { fill: black; } #data-brokers { margin: 10px 0; } #data-brokers a { display: inline-block; margin: 0; border-radius: 4px; width: 80px; height: 120px; overflow: hidden; padding: 12px; text-decoration: none; font-size: 15px; line-height: 20px; } #data-brokers a svg { margin: 0 0 6px 0; width: 40px; height: 40px; fill: hsl( 0, 0%, 30% ); } #data-brokers a:hover svg { fill: black; } /****************/ /* */ /* Colophon */ /* */ /****************/ section#colophon { position: relative; } figure { position: relative; margin: 40px auto; text-align: center; } figure img { display: block; margin-bottom: 20px; width: 100%; height: auto; } figcaption { max-width: 85%; margin: 0 auto; font-size: 15px; line-height: 20px; } /**************/ /* */ /* Footer */ /* */ /**************/ footer { position: relative; margin: 0; height: 100vh; min-height: 40vw; background-color: white; overflow: hidden; } #canute-and-sea { position: absolute; right: 0; bottom: 0; width: 80vw; height: 40vw; } /****************/ /* */ /* Controls */ /* */ /****************/ #timeline { /*background-color: hsl( 0, 90%, 35% );*/ } .loaded { background-color: hsl( 0, 90%, 35% ); } #progress, #controls .button { background-color: hsl( 0, 90%, 30% ); color: hsl( 0, 70%, 50% ); } #controls .button use { fill: hsl( 0, 70%, 50% ); } #controls .button:hover { background-color: hsl( 0, 90%, 25% ); color: hsl( 0, 70%, 70% ); } #controls .button:hover use { /*fill: hsl( 0, 70%, 70% );*/ fill: white; } #progress-head { background-color: hsl( 0, 70%, 70% ); } #progress-clock { /*color: hsl( 0, 70%, 70% );*/ color: hsla( 0, 0%, 100%, 0.4 ); } #seeker-head { background-color: white; } #seeker-clock { color: white; } #button-play { /*color: black;*/ background-color: inherit; /*animation-name: pulse;*/ /*animation-name: key-release;*/ } #button-play, #controls #button-play svg, #controls #button-play use { /*fill: black;*/ /*fill: hsl( 180.000, 70.000%, 50.000% );*/ fill: unset; animation-name: pulse; animation-duration: calc( var( --beat ) * 2 ); animation-timing-function: ease-in-out; /*animation-fill-mode: both;*/ /*animation-name: key-release;*/ } #button-play:hover { /*color: var( --color-background );*/ background-color: inherit; fill: white; } @keyframes pulse { 0% { fill: hsl( 0.000, 70.000%, 50.000% ); } 1% { fill: hsl( 0.000, 70.200%, 50.450% ); } 2% { fill: hsl( 0.000, 70.400%, 50.900% ); } 3% { fill: hsl( 0.000, 70.600%, 51.350% ); } 4% { fill: hsl( 0.000, 70.800%, 51.800% ); } 5% { fill: hsl( 0.000, 71.000%, 52.250% ); } 6% { fill: hsl( 0.000, 71.200%, 52.700% ); } 7% { fill: hsl( 0.000, 71.400%, 53.150% ); } 8% { fill: hsl( 0.000, 71.600%, 53.600% ); } 9% { fill: hsl( 0.000, 71.800%, 54.050% ); } 10% { fill: hsl( 0.000, 72.000%, 54.500% ); } 11% { fill: hsl( 0.000, 72.200%, 54.950% ); } 12% { fill: hsl( 0.000, 72.400%, 55.400% ); } 13% { fill: hsl( 0.000, 72.600%, 55.850% ); } 14% { fill: hsl( 0.000, 72.800%, 56.300% ); } 15% { fill: hsl( 0.000, 73.000%, 56.750% ); } 16% { fill: hsl( 0.000, 73.200%, 57.200% ); } 17% { fill: hsl( 0.000, 73.400%, 57.650% ); } 18% { fill: hsl( 0.000, 73.600%, 58.100% ); } 19% { fill: hsl( 0.000, 73.800%, 58.550% ); } 20% { fill: hsl( 0.000, 74.000%, 59.000% ); } 21% { fill: hsl( 0.000, 74.200%, 59.450% ); } 22% { fill: hsl( 0.000, 74.400%, 59.900% ); } 23% { fill: hsl( 0.000, 74.600%, 60.350% ); } 24% { fill: hsl( 0.000, 74.800%, 60.800% ); } 25% { fill: hsl( 0.000, 75.000%, 61.250% ); } 26% { fill: hsl( 0.000, 75.200%, 61.700% ); } 27% { fill: hsl( 0.000, 75.400%, 62.150% ); } 28% { fill: hsl( 0.000, 75.600%, 62.600% ); } 29% { fill: hsl( 0.000, 75.800%, 63.050% ); } 30% { fill: hsl( 0.000, 76.000%, 63.500% ); } 31% { fill: hsl( 0.000, 76.200%, 63.950% ); } 32% { fill: hsl( 0.000, 76.400%, 64.400% ); } 33% { fill: hsl( 0.000, 76.600%, 64.850% ); } 34% { fill: hsl( 0.000, 76.800%, 65.300% ); } 35% { fill: hsl( 0.000, 77.000%, 65.750% ); } 36% { fill: hsl( 0.000, 77.200%, 66.200% ); } 37% { fill: hsl( 0.000, 77.400%, 66.650% ); } 38% { fill: hsl( 0.000, 77.600%, 67.100% ); } 39% { fill: hsl( 0.000, 77.800%, 67.550% ); } 40% { fill: hsl( 0.000, 78.000%, 68.000% ); } 41% { fill: hsl( 0.000, 78.200%, 68.450% ); } 42% { fill: hsl( 0.000, 78.400%, 68.900% ); } 43% { fill: hsl( 0.000, 78.600%, 69.350% ); } 44% { fill: hsl( 0.000, 78.800%, 69.800% ); } 45% { fill: hsl( 0.000, 79.000%, 70.250% ); } 46% { fill: hsl( 0.000, 79.200%, 70.700% ); } 47% { fill: hsl( 0.000, 79.400%, 71.150% ); } 48% { fill: hsl( 0.000, 79.600%, 71.600% ); } 49% { fill: hsl( 0.000, 79.800%, 72.050% ); } 50% { fill: hsl( 0.000, 80.000%, 72.500% ); } 51% { fill: hsl( 0.000, 80.200%, 72.950% ); } 52% { fill: hsl( 0.000, 80.400%, 73.400% ); } 53% { fill: hsl( 0.000, 80.600%, 73.850% ); } 54% { fill: hsl( 0.000, 80.800%, 74.300% ); } 55% { fill: hsl( 0.000, 81.000%, 74.750% ); } 56% { fill: hsl( 0.000, 81.200%, 75.200% ); } 57% { fill: hsl( 0.000, 81.400%, 75.650% ); } 58% { fill: hsl( 0.000, 81.600%, 76.100% ); } 59% { fill: hsl( 0.000, 81.800%, 76.550% ); } 60% { fill: hsl( 0.000, 82.000%, 77.000% ); } 61% { fill: hsl( 0.000, 82.200%, 77.450% ); } 62% { fill: hsl( 0.000, 82.400%, 77.900% ); } 63% { fill: hsl( 0.000, 82.600%, 78.350% ); } 64% { fill: hsl( 0.000, 82.800%, 78.800% ); } 65% { fill: hsl( 0.000, 83.000%, 79.250% ); } 66% { fill: hsl( 0.000, 83.200%, 79.700% ); } 67% { fill: hsl( 0.000, 83.400%, 80.150% ); } 68% { fill: hsl( 0.000, 83.600%, 80.600% ); } 69% { fill: hsl( 0.000, 83.800%, 81.050% ); } 70% { fill: hsl( 0.000, 84.000%, 81.500% ); } 71% { fill: hsl( 0.000, 84.200%, 81.950% ); } 72% { fill: hsl( 0.000, 84.400%, 82.400% ); } 73% { fill: hsl( 0.000, 84.600%, 82.850% ); } 74% { fill: hsl( 0.000, 84.800%, 83.300% ); } 75% { fill: hsl( 0.000, 85.000%, 83.750% ); } 76% { fill: hsl( 0.000, 85.200%, 84.200% ); } 77% { fill: hsl( 0.000, 85.400%, 84.650% ); } 78% { fill: hsl( 0.000, 85.600%, 85.100% ); } 79% { fill: hsl( 0.000, 85.800%, 85.550% ); } 80% { fill: hsl( 0.000, 86.000%, 86.000% ); } 81% { fill: hsl( 0.000, 86.200%, 86.450% ); } 82% { fill: hsl( 0.000, 86.400%, 86.900% ); } 83% { fill: hsl( 0.000, 86.600%, 87.350% ); } 84% { fill: hsl( 0.000, 86.800%, 87.800% ); } 85% { fill: hsl( 0.000, 87.000%, 88.250% ); } 86% { fill: hsl( 0.000, 87.200%, 88.700% ); } 87% { fill: hsl( 0.000, 87.400%, 89.150% ); } 88% { fill: hsl( 0.000, 87.600%, 89.600% ); } 89% { fill: hsl( 0.000, 87.800%, 90.050% ); } 90% { fill: hsl( 0.000, 88.000%, 90.500% ); } 91% { fill: hsl( 0.000, 88.200%, 90.950% ); } 92% { fill: hsl( 0.000, 88.400%, 91.400% ); } 93% { fill: hsl( 0.000, 88.600%, 91.850% ); } 94% { fill: hsl( 0.000, 88.800%, 92.300% ); } 95% { fill: hsl( 0.000, 89.000%, 92.750% ); } 96% { fill: hsl( 0.000, 89.200%, 93.200% ); } 97% { fill: hsl( 0.000, 89.400%, 93.650% ); } 98% { fill: hsl( 0.000, 89.600%, 94.100% ); } 99% { fill: hsl( 0.000, 89.800%, 94.550% ); } 100% { fill: hsl( 0.000, 90.000%, 95.000% ); } } #fullscreen-container { /*transition: background-color calc( var( --beat ) * 6 ) ease-in;*/ } #fullscreen-container.dim { /*background-color: hsl( 0, 90%, 40% );*/ background-color: hsl( 0, 90%, 10% ); /*transition: none;*/ } #fullscreen-container { --curtain-left: 0%; --curatin-right: 0%; background: linear-gradient( to right, var( --color-background ) var( --curtain-left ), #000 var( --curtain-left ), #000 var( --curatin-right ), var( --color-background ) var( --curatin-right ) ); } #fullscreen-container.curtained { --curtain-left: 50%; --curatin-right: 75%; } /****************/ /* */ /* Keyboard */ /* */ /****************/ .keyboard { color: hsl( 0, 0%, 80% ); vertical-align: bottom; backface-visibility: visible; -webkit-backface-visibility: visible; } main.spin .keyboard-rotator, main.spin .keyboard-translator { will-change: transform; } main.spin .key { will-change: transform, background-color, color, box-shadow; } .keyboard.popcorn { will-change: transform, opacity; } .keyboard.popcorn .keys { will-change: transform, background-color, color, box-shadow; } .keyboard.fade-in { animation: fade-in calc( var( --beat ) * 4 ); } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } .key { --background-hue: 0; --background-saturation: 90%; --background-lightness: 0%; --text-hue: 0; --text-saturation: 20%; --text-lightness: 75%; transition: none; animation: none; backface-visibility: visible; -webkit-backface-visibility: visible; } .key.engaged { --background-lightness: 95%; --text-hue: 0; --text-saturation: 90%; --text-lightness: 100%; animation: none; transition: none; box-shadow: 0 0 calc( var( --size ) * 1 ) white, 0 0 calc( var( --size ) * 3 ) white; } .key.disengaging { transition-duration: var( --beat-half ); animation-duration: var( --beat-half ); animation-name: key-release-default; animation-fill-mode: both; animation-iteration-count: 1; animation-timing-function: ease-out; animation-play-state: running; } .keyboard.option-lag .key.disegnaging { animation-name: key-release-option; } .key.dead, .key.dead.engaged, .key.dead.disengaging, .key.blank, .key.blank.engaged, .key.blank.disengaging { color: transparent !important; } @keyframes key-release-default { 0% { background-color: hsl( 0.000, 90.000%, 95.000% ); color: hsl( 0.000, 90.000%, 100.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.500 ); } 1% { background-color: hsl( 0.000, 89.800%, 94.050% ); color: hsl( 0.000, 89.200%, 99.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.495 ); } 2% { background-color: hsl( 0.000, 89.600%, 93.100% ); color: hsl( 0.000, 88.400%, 99.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.490 ); } 3% { background-color: hsl( 0.000, 89.400%, 92.150% ); color: hsl( 0.000, 87.600%, 98.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.485 ); } 4% { background-color: hsl( 0.000, 89.200%, 91.200% ); color: hsl( 0.000, 86.800%, 98.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.480 ); } 5% { background-color: hsl( 0.000, 89.000%, 90.250% ); color: hsl( 0.000, 86.000%, 97.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.475 ); } 6% { background-color: hsl( 0.000, 88.800%, 89.300% ); color: hsl( 0.000, 85.200%, 97.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.470 ); } 7% { background-color: hsl( 0.000, 88.600%, 88.350% ); color: hsl( 0.000, 84.400%, 96.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.465 ); } 8% { background-color: hsl( 0.000, 88.400%, 87.400% ); color: hsl( 0.000, 83.600%, 96.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.460 ); } 9% { background-color: hsl( 0.000, 88.200%, 86.450% ); color: hsl( 0.000, 82.800%, 95.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.455 ); } 10% { background-color: hsl( 0.000, 88.000%, 85.500% ); color: hsl( 0.000, 82.000%, 95.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.450 ); } 11% { background-color: hsl( 0.000, 87.800%, 84.550% ); color: hsl( 0.000, 81.200%, 94.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.445 ); } 12% { background-color: hsl( 0.000, 87.600%, 83.600% ); color: hsl( 0.000, 80.400%, 94.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.440 ); } 13% { background-color: hsl( 0.000, 87.400%, 82.650% ); color: hsl( 0.000, 79.600%, 93.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.435 ); } 14% { background-color: hsl( 0.000, 87.200%, 81.700% ); color: hsl( 0.000, 78.800%, 93.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.430 ); } 15% { background-color: hsl( 0.000, 87.000%, 80.750% ); color: hsl( 0.000, 78.000%, 92.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.425 ); } 16% { background-color: hsl( 0.000, 86.800%, 79.800% ); color: hsl( 0.000, 77.200%, 92.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.420 ); } 17% { background-color: hsl( 0.000, 86.600%, 78.850% ); color: hsl( 0.000, 76.400%, 91.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.415 ); } 18% { background-color: hsl( 0.000, 86.400%, 77.900% ); color: hsl( 0.000, 75.600%, 91.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.410 ); } 19% { background-color: hsl( 0.000, 86.200%, 76.950% ); color: hsl( 0.000, 74.800%, 90.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.405 ); } 20% { background-color: hsl( 0.000, 86.000%, 76.000% ); color: hsl( 0.000, 74.000%, 90.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.400 ); } 21% { background-color: hsl( 0.000, 85.800%, 75.050% ); color: hsl( 0.000, 73.200%, 89.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.395 ); } 22% { background-color: hsl( 0.000, 85.600%, 74.100% ); color: hsl( 0.000, 72.400%, 89.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.390 ); } 23% { background-color: hsl( 0.000, 85.400%, 73.150% ); color: hsl( 0.000, 71.600%, 88.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.385 ); } 24% { background-color: hsl( 0.000, 85.200%, 72.200% ); color: hsl( 0.000, 70.800%, 88.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.380 ); } 25% { background-color: hsl( 0.000, 85.000%, 71.250% ); color: hsl( 0.000, 70.000%, 87.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.375 ); } 26% { background-color: hsl( 0.000, 84.800%, 70.300% ); color: hsl( 0.000, 69.200%, 87.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.370 ); } 27% { background-color: hsl( 0.000, 84.600%, 69.350% ); color: hsl( 0.000, 68.400%, 86.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.365 ); } 28% { background-color: hsl( 0.000, 84.400%, 68.400% ); color: hsl( 0.000, 67.600%, 86.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.360 ); } 29% { background-color: hsl( 0.000, 84.200%, 67.450% ); color: hsl( 0.000, 66.800%, 85.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.355 ); } 30% { background-color: hsl( 0.000, 84.000%, 66.500% ); color: hsl( 0.000, 66.000%, 85.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.350 ); } 31% { background-color: hsl( 0.000, 83.800%, 65.550% ); color: hsl( 0.000, 65.200%, 84.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.345 ); } 32% { background-color: hsl( 0.000, 83.600%, 64.600% ); color: hsl( 0.000, 64.400%, 84.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.340 ); } 33% { background-color: hsl( 0.000, 83.400%, 63.650% ); color: hsl( 0.000, 63.600%, 83.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.335 ); } 34% { background-color: hsl( 0.000, 83.200%, 62.700% ); color: hsl( 0.000, 62.800%, 83.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.330 ); } 35% { background-color: hsl( 0.000, 83.000%, 61.750% ); color: hsl( 0.000, 62.000%, 82.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.325 ); } 36% { background-color: hsl( 0.000, 82.800%, 60.800% ); color: hsl( 0.000, 61.200%, 82.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.320 ); } 37% { background-color: hsl( 0.000, 82.600%, 59.850% ); color: hsl( 0.000, 60.400%, 81.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.315 ); } 38% { background-color: hsl( 0.000, 82.400%, 58.900% ); color: hsl( 0.000, 59.600%, 81.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.310 ); } 39% { background-color: hsl( 0.000, 82.200%, 57.950% ); color: hsl( 0.000, 58.800%, 80.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.305 ); } 40% { background-color: hsl( 0.000, 82.000%, 57.000% ); color: hsl( 0.000, 58.000%, 80.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.300 ); } 41% { background-color: hsl( 0.000, 81.800%, 56.050% ); color: hsl( 0.000, 57.200%, 79.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.295 ); } 42% { background-color: hsl( 0.000, 81.600%, 55.100% ); color: hsl( 0.000, 56.400%, 79.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.290 ); } 43% { background-color: hsl( 0.000, 81.400%, 54.150% ); color: hsl( 0.000, 55.600%, 78.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.285 ); } 44% { background-color: hsl( 0.000, 81.200%, 53.200% ); color: hsl( 0.000, 54.800%, 78.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.280 ); } 45% { background-color: hsl( 0.000, 81.000%, 52.250% ); color: hsl( 0.000, 54.000%, 77.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.275 ); } 46% { background-color: hsl( 0.000, 80.800%, 51.300% ); color: hsl( 0.000, 53.200%, 77.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.270 ); } 47% { background-color: hsl( 0.000, 80.600%, 50.350% ); color: hsl( 0.000, 52.400%, 76.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.265 ); } 48% { background-color: hsl( 0.000, 80.400%, 49.400% ); color: hsl( 0.000, 51.600%, 76.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.260 ); } 49% { background-color: hsl( 0.000, 80.200%, 48.450% ); color: hsl( 0.000, 50.800%, 75.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.255 ); } 50% { background-color: hsl( 0.000, 80.000%, 47.500% ); color: hsl( 0.000, 50.000%, 75.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.250 ); } 51% { background-color: hsl( 0.000, 79.800%, 46.550% ); color: hsl( 0.000, 49.200%, 74.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.245 ); } 52% { background-color: hsl( 0.000, 79.600%, 45.600% ); color: hsl( 0.000, 48.400%, 74.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.240 ); } 53% { background-color: hsl( 0.000, 79.400%, 44.650% ); color: hsl( 0.000, 47.600%, 73.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.235 ); } 54% { background-color: hsl( 0.000, 79.200%, 43.700% ); color: hsl( 0.000, 46.800%, 73.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.230 ); } 55% { background-color: hsl( 0.000, 79.000%, 42.750% ); color: hsl( 0.000, 46.000%, 72.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.225 ); } 56% { background-color: hsl( 0.000, 78.800%, 41.800% ); color: hsl( 0.000, 45.200%, 72.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.220 ); } 57% { background-color: hsl( 0.000, 78.600%, 40.850% ); color: hsl( 0.000, 44.400%, 71.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.215 ); } 58% { background-color: hsl( 0.000, 78.400%, 39.900% ); color: hsl( 0.000, 43.600%, 71.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.210 ); } 59% { background-color: hsl( 0.000, 78.200%, 38.950% ); color: hsl( 0.000, 42.800%, 70.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.205 ); } 60% { background-color: hsl( 0.000, 78.000%, 38.000% ); color: hsl( 0.000, 42.000%, 70.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.200 ); } 61% { background-color: hsl( 0.000, 77.800%, 37.050% ); color: hsl( 0.000, 41.200%, 69.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.195 ); } 62% { background-color: hsl( 0.000, 77.600%, 36.100% ); color: hsl( 0.000, 40.400%, 69.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.190 ); } 63% { background-color: hsl( 0.000, 77.400%, 35.150% ); color: hsl( 0.000, 39.600%, 68.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.185 ); } 64% { background-color: hsl( 0.000, 77.200%, 34.200% ); color: hsl( 0.000, 38.800%, 68.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.180 ); } 65% { background-color: hsl( 0.000, 77.000%, 33.250% ); color: hsl( 0.000, 38.000%, 67.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.175 ); } 66% { background-color: hsl( 0.000, 76.800%, 32.300% ); color: hsl( 0.000, 37.200%, 67.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.170 ); } 67% { background-color: hsl( 0.000, 76.600%, 31.350% ); color: hsl( 0.000, 36.400%, 66.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.165 ); } 68% { background-color: hsl( 0.000, 76.400%, 30.400% ); color: hsl( 0.000, 35.600%, 66.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.160 ); } 69% { background-color: hsl( 0.000, 76.200%, 29.450% ); color: hsl( 0.000, 34.800%, 65.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.155 ); } 70% { background-color: hsl( 0.000, 76.000%, 28.500% ); color: hsl( 0.000, 34.000%, 65.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.150 ); } 71% { background-color: hsl( 0.000, 75.800%, 27.550% ); color: hsl( 0.000, 33.200%, 64.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.145 ); } 72% { background-color: hsl( 0.000, 75.600%, 26.600% ); color: hsl( 0.000, 32.400%, 64.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.140 ); } 73% { background-color: hsl( 0.000, 75.400%, 25.650% ); color: hsl( 0.000, 31.600%, 63.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.135 ); } 74% { background-color: hsl( 0.000, 75.200%, 24.700% ); color: hsl( 0.000, 30.800%, 63.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.130 ); } 75% { background-color: hsl( 0.000, 75.000%, 23.750% ); color: hsl( 0.000, 30.000%, 62.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.125 ); } 76% { background-color: hsl( 0.000, 74.800%, 22.800% ); color: hsl( 0.000, 29.200%, 62.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.120 ); } 77% { background-color: hsl( 0.000, 74.600%, 21.850% ); color: hsl( 0.000, 28.400%, 61.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.115 ); } 78% { background-color: hsl( 0.000, 74.400%, 20.900% ); color: hsl( 0.000, 27.600%, 61.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.110 ); } 79% { background-color: hsl( 0.000, 74.200%, 19.950% ); color: hsl( 0.000, 26.800%, 60.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.105 ); } 80% { background-color: hsl( 0.000, 74.000%, 19.000% ); color: hsl( 0.000, 26.000%, 60.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.100 ); } 81% { background-color: hsl( 0.000, 73.800%, 18.050% ); color: hsl( 0.000, 25.200%, 59.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.095 ); } 82% { background-color: hsl( 0.000, 73.600%, 17.100% ); color: hsl( 0.000, 24.400%, 59.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.090 ); } 83% { background-color: hsl( 0.000, 73.400%, 16.150% ); color: hsl( 0.000, 23.600%, 58.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.085 ); } 84% { background-color: hsl( 0.000, 73.200%, 15.200% ); color: hsl( 0.000, 22.800%, 58.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.080 ); } 85% { background-color: hsl( 0.000, 73.000%, 14.250% ); color: hsl( 0.000, 22.000%, 57.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.075 ); } 86% { background-color: hsl( 0.000, 72.800%, 13.300% ); color: hsl( 0.000, 21.200%, 57.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.070 ); } 87% { background-color: hsl( 0.000, 72.600%, 12.350% ); color: hsl( 0.000, 20.400%, 56.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.065 ); } 88% { background-color: hsl( 0.000, 72.400%, 11.400% ); color: hsl( 0.000, 19.600%, 56.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.060 ); } 89% { background-color: hsl( 0.000, 72.200%, 10.450% ); color: hsl( 0.000, 18.800%, 55.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.055 ); } 90% { background-color: hsl( 0.000, 72.000%, 9.500% ); color: hsl( 0.000, 18.000%, 55.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.050 ); } 91% { background-color: hsl( 0.000, 71.800%, 8.550% ); color: hsl( 0.000, 17.200%, 54.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.045 ); } 92% { background-color: hsl( 0.000, 71.600%, 7.600% ); color: hsl( 0.000, 16.400%, 54.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.040 ); } 93% { background-color: hsl( 0.000, 71.400%, 6.650% ); color: hsl( 0.000, 15.600%, 53.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.035 ); } 94% { background-color: hsl( 0.000, 71.200%, 5.700% ); color: hsl( 0.000, 14.800%, 53.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.030 ); } 95% { background-color: hsl( 0.000, 71.000%, 4.750% ); color: hsl( 0.000, 14.000%, 52.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.025 ); } 96% { background-color: hsl( 0.000, 70.800%, 3.800% ); color: hsl( 0.000, 13.200%, 52.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.020 ); } 97% { background-color: hsl( 0.000, 70.600%, 2.850% ); color: hsl( 0.000, 12.400%, 51.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.015 ); } 98% { background-color: hsl( 0.000, 70.400%, 1.900% ); color: hsl( 0.000, 11.600%, 51.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.010 ); } 99% { background-color: hsl( 0.000, 70.200%, 0.950% ); color: hsl( 0.000, 10.800%, 50.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.005 ); } 100% { background-color: hsl( 0.000, 70.000%, 0.000% ); color: hsl( 0.000, 10.000%, 50.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.000 ); } } @keyframes key-release-option { 0% { background-color: hsl( 0.000, 90.000%, 60.000% ); color: hsl( 0.000, 90.000%, 100.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.500 ); } 1% { background-color: hsl( 0.000, 89.800%, 59.400% ); color: hsl( 0.000, 89.200%, 99.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.495 ); } 2% { background-color: hsl( 0.000, 89.600%, 58.800% ); color: hsl( 0.000, 88.400%, 99.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.490 ); } 3% { background-color: hsl( 0.000, 89.400%, 58.200% ); color: hsl( 0.000, 87.600%, 98.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.485 ); } 4% { background-color: hsl( 0.000, 89.200%, 57.600% ); color: hsl( 0.000, 86.800%, 98.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.480 ); } 5% { background-color: hsl( 0.000, 89.000%, 57.000% ); color: hsl( 0.000, 86.000%, 97.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.475 ); } 6% { background-color: hsl( 0.000, 88.800%, 56.400% ); color: hsl( 0.000, 85.200%, 97.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.470 ); } 7% { background-color: hsl( 0.000, 88.600%, 55.800% ); color: hsl( 0.000, 84.400%, 96.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.465 ); } 8% { background-color: hsl( 0.000, 88.400%, 55.200% ); color: hsl( 0.000, 83.600%, 96.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.460 ); } 9% { background-color: hsl( 0.000, 88.200%, 54.600% ); color: hsl( 0.000, 82.800%, 95.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.455 ); } 10% { background-color: hsl( 0.000, 88.000%, 54.000% ); color: hsl( 0.000, 82.000%, 95.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.450 ); } 11% { background-color: hsl( 0.000, 87.800%, 53.400% ); color: hsl( 0.000, 81.200%, 94.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.445 ); } 12% { background-color: hsl( 0.000, 87.600%, 52.800% ); color: hsl( 0.000, 80.400%, 94.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.440 ); } 13% { background-color: hsl( 0.000, 87.400%, 52.200% ); color: hsl( 0.000, 79.600%, 93.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.435 ); } 14% { background-color: hsl( 0.000, 87.200%, 51.600% ); color: hsl( 0.000, 78.800%, 93.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.430 ); } 15% { background-color: hsl( 0.000, 87.000%, 51.000% ); color: hsl( 0.000, 78.000%, 92.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.425 ); } 16% { background-color: hsl( 0.000, 86.800%, 50.400% ); color: hsl( 0.000, 77.200%, 92.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.420 ); } 17% { background-color: hsl( 0.000, 86.600%, 49.800% ); color: hsl( 0.000, 76.400%, 91.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.415 ); } 18% { background-color: hsl( 0.000, 86.400%, 49.200% ); color: hsl( 0.000, 75.600%, 91.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.410 ); } 19% { background-color: hsl( 0.000, 86.200%, 48.600% ); color: hsl( 0.000, 74.800%, 90.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.405 ); } 20% { background-color: hsl( 0.000, 86.000%, 48.000% ); color: hsl( 0.000, 74.000%, 90.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.400 ); } 21% { background-color: hsl( 0.000, 85.800%, 47.400% ); color: hsl( 0.000, 73.200%, 89.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.395 ); } 22% { background-color: hsl( 0.000, 85.600%, 46.800% ); color: hsl( 0.000, 72.400%, 89.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.390 ); } 23% { background-color: hsl( 0.000, 85.400%, 46.200% ); color: hsl( 0.000, 71.600%, 88.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.385 ); } 24% { background-color: hsl( 0.000, 85.200%, 45.600% ); color: hsl( 0.000, 70.800%, 88.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.380 ); } 25% { background-color: hsl( 0.000, 85.000%, 45.000% ); color: hsl( 0.000, 70.000%, 87.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.375 ); } 26% { background-color: hsl( 0.000, 84.800%, 44.400% ); color: hsl( 0.000, 69.200%, 87.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.370 ); } 27% { background-color: hsl( 0.000, 84.600%, 43.800% ); color: hsl( 0.000, 68.400%, 86.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.365 ); } 28% { background-color: hsl( 0.000, 84.400%, 43.200% ); color: hsl( 0.000, 67.600%, 86.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.360 ); } 29% { background-color: hsl( 0.000, 84.200%, 42.600% ); color: hsl( 0.000, 66.800%, 85.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.355 ); } 30% { background-color: hsl( 0.000, 84.000%, 42.000% ); color: hsl( 0.000, 66.000%, 85.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.350 ); } 31% { background-color: hsl( 0.000, 83.800%, 41.400% ); color: hsl( 0.000, 65.200%, 84.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.345 ); } 32% { background-color: hsl( 0.000, 83.600%, 40.800% ); color: hsl( 0.000, 64.400%, 84.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.340 ); } 33% { background-color: hsl( 0.000, 83.400%, 40.200% ); color: hsl( 0.000, 63.600%, 83.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.335 ); } 34% { background-color: hsl( 0.000, 83.200%, 39.600% ); color: hsl( 0.000, 62.800%, 83.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.330 ); } 35% { background-color: hsl( 0.000, 83.000%, 39.000% ); color: hsl( 0.000, 62.000%, 82.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.325 ); } 36% { background-color: hsl( 0.000, 82.800%, 38.400% ); color: hsl( 0.000, 61.200%, 82.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.320 ); } 37% { background-color: hsl( 0.000, 82.600%, 37.800% ); color: hsl( 0.000, 60.400%, 81.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.315 ); } 38% { background-color: hsl( 0.000, 82.400%, 37.200% ); color: hsl( 0.000, 59.600%, 81.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.310 ); } 39% { background-color: hsl( 0.000, 82.200%, 36.600% ); color: hsl( 0.000, 58.800%, 80.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.305 ); } 40% { background-color: hsl( 0.000, 82.000%, 36.000% ); color: hsl( 0.000, 58.000%, 80.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.300 ); } 41% { background-color: hsl( 0.000, 81.800%, 35.400% ); color: hsl( 0.000, 57.200%, 79.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.295 ); } 42% { background-color: hsl( 0.000, 81.600%, 34.800% ); color: hsl( 0.000, 56.400%, 79.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.290 ); } 43% { background-color: hsl( 0.000, 81.400%, 34.200% ); color: hsl( 0.000, 55.600%, 78.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.285 ); } 44% { background-color: hsl( 0.000, 81.200%, 33.600% ); color: hsl( 0.000, 54.800%, 78.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.280 ); } 45% { background-color: hsl( 0.000, 81.000%, 33.000% ); color: hsl( 0.000, 54.000%, 77.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.275 ); } 46% { background-color: hsl( 0.000, 80.800%, 32.400% ); color: hsl( 0.000, 53.200%, 77.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.270 ); } 47% { background-color: hsl( 0.000, 80.600%, 31.800% ); color: hsl( 0.000, 52.400%, 76.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.265 ); } 48% { background-color: hsl( 0.000, 80.400%, 31.200% ); color: hsl( 0.000, 51.600%, 76.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.260 ); } 49% { background-color: hsl( 0.000, 80.200%, 30.600% ); color: hsl( 0.000, 50.800%, 75.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.255 ); } 50% { background-color: hsl( 0.000, 80.000%, 30.000% ); color: hsl( 0.000, 50.000%, 75.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.250 ); } 51% { background-color: hsl( 0.000, 79.800%, 29.400% ); color: hsl( 0.000, 49.200%, 74.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.245 ); } 52% { background-color: hsl( 0.000, 79.600%, 28.800% ); color: hsl( 0.000, 48.400%, 74.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.240 ); } 53% { background-color: hsl( 0.000, 79.400%, 28.200% ); color: hsl( 0.000, 47.600%, 73.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.235 ); } 54% { background-color: hsl( 0.000, 79.200%, 27.600% ); color: hsl( 0.000, 46.800%, 73.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.230 ); } 55% { background-color: hsl( 0.000, 79.000%, 27.000% ); color: hsl( 0.000, 46.000%, 72.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.225 ); } 56% { background-color: hsl( 0.000, 78.800%, 26.400% ); color: hsl( 0.000, 45.200%, 72.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.220 ); } 57% { background-color: hsl( 0.000, 78.600%, 25.800% ); color: hsl( 0.000, 44.400%, 71.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.215 ); } 58% { background-color: hsl( 0.000, 78.400%, 25.200% ); color: hsl( 0.000, 43.600%, 71.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.210 ); } 59% { background-color: hsl( 0.000, 78.200%, 24.600% ); color: hsl( 0.000, 42.800%, 70.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.205 ); } 60% { background-color: hsl( 0.000, 78.000%, 24.000% ); color: hsl( 0.000, 42.000%, 70.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.200 ); } 61% { background-color: hsl( 0.000, 77.800%, 23.400% ); color: hsl( 0.000, 41.200%, 69.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.195 ); } 62% { background-color: hsl( 0.000, 77.600%, 22.800% ); color: hsl( 0.000, 40.400%, 69.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.190 ); } 63% { background-color: hsl( 0.000, 77.400%, 22.200% ); color: hsl( 0.000, 39.600%, 68.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.185 ); } 64% { background-color: hsl( 0.000, 77.200%, 21.600% ); color: hsl( 0.000, 38.800%, 68.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.180 ); } 65% { background-color: hsl( 0.000, 77.000%, 21.000% ); color: hsl( 0.000, 38.000%, 67.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.175 ); } 66% { background-color: hsl( 0.000, 76.800%, 20.400% ); color: hsl( 0.000, 37.200%, 67.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.170 ); } 67% { background-color: hsl( 0.000, 76.600%, 19.800% ); color: hsl( 0.000, 36.400%, 66.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.165 ); } 68% { background-color: hsl( 0.000, 76.400%, 19.200% ); color: hsl( 0.000, 35.600%, 66.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.160 ); } 69% { background-color: hsl( 0.000, 76.200%, 18.600% ); color: hsl( 0.000, 34.800%, 65.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.155 ); } 70% { background-color: hsl( 0.000, 76.000%, 18.000% ); color: hsl( 0.000, 34.000%, 65.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.150 ); } 71% { background-color: hsl( 0.000, 75.800%, 17.400% ); color: hsl( 0.000, 33.200%, 64.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.145 ); } 72% { background-color: hsl( 0.000, 75.600%, 16.800% ); color: hsl( 0.000, 32.400%, 64.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.140 ); } 73% { background-color: hsl( 0.000, 75.400%, 16.200% ); color: hsl( 0.000, 31.600%, 63.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.135 ); } 74% { background-color: hsl( 0.000, 75.200%, 15.600% ); color: hsl( 0.000, 30.800%, 63.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.130 ); } 75% { background-color: hsl( 0.000, 75.000%, 15.000% ); color: hsl( 0.000, 30.000%, 62.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.125 ); } 76% { background-color: hsl( 0.000, 74.800%, 14.400% ); color: hsl( 0.000, 29.200%, 62.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.120 ); } 77% { background-color: hsl( 0.000, 74.600%, 13.800% ); color: hsl( 0.000, 28.400%, 61.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.115 ); } 78% { background-color: hsl( 0.000, 74.400%, 13.200% ); color: hsl( 0.000, 27.600%, 61.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.110 ); } 79% { background-color: hsl( 0.000, 74.200%, 12.600% ); color: hsl( 0.000, 26.800%, 60.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.105 ); } 80% { background-color: hsl( 0.000, 74.000%, 12.000% ); color: hsl( 0.000, 26.000%, 60.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.100 ); } 81% { background-color: hsl( 0.000, 73.800%, 11.400% ); color: hsl( 0.000, 25.200%, 59.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.095 ); } 82% { background-color: hsl( 0.000, 73.600%, 10.800% ); color: hsl( 0.000, 24.400%, 59.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.090 ); } 83% { background-color: hsl( 0.000, 73.400%, 10.200% ); color: hsl( 0.000, 23.600%, 58.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.085 ); } 84% { background-color: hsl( 0.000, 73.200%, 9.600% ); color: hsl( 0.000, 22.800%, 58.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.080 ); } 85% { background-color: hsl( 0.000, 73.000%, 9.000% ); color: hsl( 0.000, 22.000%, 57.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.075 ); } 86% { background-color: hsl( 0.000, 72.800%, 8.400% ); color: hsl( 0.000, 21.200%, 57.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.070 ); } 87% { background-color: hsl( 0.000, 72.600%, 7.800% ); color: hsl( 0.000, 20.400%, 56.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.065 ); } 88% { background-color: hsl( 0.000, 72.400%, 7.200% ); color: hsl( 0.000, 19.600%, 56.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.060 ); } 89% { background-color: hsl( 0.000, 72.200%, 6.600% ); color: hsl( 0.000, 18.800%, 55.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.055 ); } 90% { background-color: hsl( 0.000, 72.000%, 6.000% ); color: hsl( 0.000, 18.000%, 55.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.050 ); } 91% { background-color: hsl( 0.000, 71.800%, 5.400% ); color: hsl( 0.000, 17.200%, 54.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.045 ); } 92% { background-color: hsl( 0.000, 71.600%, 4.800% ); color: hsl( 0.000, 16.400%, 54.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.040 ); } 93% { background-color: hsl( 0.000, 71.400%, 4.200% ); color: hsl( 0.000, 15.600%, 53.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.035 ); } 94% { background-color: hsl( 0.000, 71.200%, 3.600% ); color: hsl( 0.000, 14.800%, 53.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.030 ); } 95% { background-color: hsl( 0.000, 71.000%, 3.000% ); color: hsl( 0.000, 14.000%, 52.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.025 ); } 96% { background-color: hsl( 0.000, 70.800%, 2.400% ); color: hsl( 0.000, 13.200%, 52.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.020 ); } 97% { background-color: hsl( 0.000, 70.600%, 1.800% ); color: hsl( 0.000, 12.400%, 51.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.015 ); } 98% { background-color: hsl( 0.000, 70.400%, 1.200% ); color: hsl( 0.000, 11.600%, 51.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.010 ); } 99% { background-color: hsl( 0.000, 70.200%, 0.600% ); color: hsl( 0.000, 10.800%, 50.500% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.005 ); } 100% { background-color: hsl( 0.000, 70.000%, 0.000% ); color: hsl( 0.000, 10.000%, 50.000% ); box-shadow: 0px 0px calc( var( --size ) * 4 ) hsla( 0.000, 90.000%, 90.000%, 0.000 ); } } /***************/ /* */ /* Customs */ /* */ /***************/ .keyboard { /*transition-property: transform;*/ /*transition-duration: 1s;*/ /*transition-timing-function: ease-in-out;*/ } /*.key-period.engaged { background-color: hsl( 0, 100%, 100% ); box-shadow: 0 0 calc( var( --size ) * 6 ) hsl( 0, 100%, 100% ); }*/ .keyboard.push-out .key.engaged { transform: translateZ( calc( var( --size ) * 12 )); transition: none; } .keyboard.push-in .key.engaged { transform: translateZ( calc( var( --size ) * -12 )); transition: none; } .keyboard.push-out .key.disengaging, .keyboard.push-in .key.disengaging { transition-property: transform; transition-timing-function: ease-out; transition-duration: calc( var( --beat ) * 2 ); animation-duration: calc( var( --beat ) * 2 ); } .keyboard.long-sustain .key.engaged { transition: none; } .keyboard.long-sustain .key.disengaging { transition: transform var( --beat-eighth ) ease-out; /*transition: transform calc( var( --beat-eighth ) / 2 ) ease-out;*/ animation-duration: var( --beat ); /*animation-duration: var( --beat-eighth );*/ } .key.black { background: none; /*background-color: black;*/ /*color: transparent;*/ background-color: transparent; color: transparent; } .key.blindspot { visibility: hidden; } .key.invisible { color: transparent; transition: none; } .key.not-obvious { backface-visibility: hidden; -webkit-backface-visibility: hidden;/* Stupid iOS Safari WTF */ transition: transform calc( var( --beat ) * 2 ) ease-out; transform: rotateY( 0.5turn ); } .key.not-obvious-release { backface-visibility: hidden; -webkit-backface-visibility: hidden;/* Stupid iOS Safari WTF */ transition: transform calc( var( --beat ) * 5 ) ease-out; } .key.no-backface { backface-visibility: hidden; -webkit-backface-visibility: hidden;/* Stupid iOS Safari WTF */ } main.tilted .keyboards-rotator { transform: rotateX( 45deg ) rotateY( -13deg ); } main.tilted .keyboards-translator { transform: translate3d( calc( var( --size ) * -5 ), calc( var( --size ) * 5 ), calc( var( --size ) * -5 ) ); } .keyboard.popcorn-dead .key.engaged { transition: none; } .keyboard.popcorn-dead .key.disengaging { transition: none; animation: none; } .keyboard.surf-rider { transform: translate3d( 0, 0, 100px ) rotate3d( 0, 0, -1, 80deg ) rotate3d( 0, 1, 0, 60deg ); } #receipt { /*color: white;*/ }