.containers{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(8,1fr);gap:.5em .5em;grid-auto-flow:row;padding:1rem;grid-template-areas:"c c c a a a a" "f f b b d d d" "f f g g g e e" "f f g g g e e" "f f g g g e e" "j j g g g e e" "j j g g g e e" "l l l m n n n" "l l l m n n n" "l l l m n n n" "l l l m o o o"}.a{grid-area:a;background-color:#dbb5ff!important}.b{grid-area:b}.c{grid-area:c;background-color:#c9fff2!important}.d{grid-area:d}.e{grid-area:e}.f{grid-area:f}.g{grid-area:g;background:radial-gradient(circle,#ffb3c6 10%,transparent 0) 0 0 /30px 30px,radial-gradient(circle,#d5aaff 10%,transparent 0) 15px 15px /30px 30px,#a3c4f3!important}.i{grid-area:i}.j{grid-area:j;background-color:#e0cbf5!important}.m{grid-area:m}.n{grid-area:n;background-color:#e0cbf5!important}.o{grid-area:o}.l{grid-area:l}.containers>div[class]{background:#e2d0d7;position:relative;border-radius:1rem;font-weight:700;display:grid;align-items:center;justify-content:center;text-align:center;padding:1rem;border:.2rem solid #cebcbc}@media (max-width:1800px){.containers{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(6,1fr);grid-template-areas:"c c a a" "e b d d" "e g g g" "f g g g" "l l l l" "l l l l" "o o j j" "m m n n"}}@media (max-width:725px){.containers{display:grid;grid-template-columns:repeat(4,25%);gap:.5em .5em;grid-auto-flow:row;grid-template-areas:"c c e e" "j j b b" "g g g g" "g g g g" "a f f m" "o o o n" "l l l l" "d d d d"}}@media (max-width:480px){.containers{grid-template-columns:repeat(2,1fr);gap:.75rem;padding:.75rem;grid-template-areas:"c c" "a b" "g g" "l l" "e f" "j j" "m m" "n n" "d d" "o o"}.sign{min-height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;span{font-size:2rem!important}}}.sign{min-height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;span{font-size:5.6rem;text-align:center;line-height:1;color:#c6e2ff;animation:neon .08s ease-in-out infinite alternate}}@keyframes neon{0%{text-shadow:0 0 6px rgba(202,228,225,.92),0 0 30px rgba(202,228,225,.34),0 0 12px rgba(30,132,242,.52),0 0 21px rgba(30,132,242,.92),0 0 34px rgba(30,132,242,.78),0 0 54px rgba(30,132,242,.92)}to{text-shadow:0 0 6px rgba(202,228,225,.98),0 0 30px rgba(202,228,225,.42),0 0 12px rgba(30,132,242,.58),0 0 22px rgba(30,132,242,.84),0 0 38px rgba(30,132,242,.88),0 0 60px #1e84f2}}.link{position:absolute;bottom:10px;left:10px;color:#828282;text-decoration:none;&:focus,&:hover{color:#c6e2ff;text-shadow:0 0 2px rgba(202,228,225,.92),0 0 10px rgba(202,228,225,.34),0 0 4px rgba(30,132,242,.52),0 0 7px rgba(30,132,242,.92),0 0 11px rgba(30,132,242,.78),0 0 16px rgba(30,132,242,.92)}}.e:hover{background:#df6788!important;background:radial-gradient(circle,#df6788 0,#e8ced9 100%)!important}.f{background-color:#d6d2d2!important;opacity:.7!important;background-size:32px 32px!important;background-image:repeating-linear-gradient(90deg,#000005,#000005 1.6px,#fcfcfc 0,#fcfcfc)!important}.b:hover{background:#d0b0bc!important;background:radial-gradient(circle,#d0b0bc 0,#e1c7d1 100%)!important}.c:hover{background:radial-gradient(circle,#80ffea 0,#c4e6f6 100%)!important}.a:hover{color:#000!important;background:#3d3d8a!important;background:radial-gradient(circle,#b4b4f4 0,#d8a8eb 100%)!important}.e:hover:before{content:"Read my Experience";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#000;padding:1rem;border-radius:5px;display:block;z-index:1}.e:hover img{visibility:hidden}.k:hover{background:#eb9058!important;background:linear-gradient(177deg,#eb9058,#e5e6da)!important;color:#000}.j:hover,.n:hover{background:radial-gradient(circle,#d8d6e4 0,#c6bbff 100%)!important;cursor:pointer}.m:hover{.sign{min-height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;span{font-size:5.6rem;text-align:center;line-height:1;color:#dcedf8;animation:neon .08s ease-in-out infinite alternate}}}.gradient-background{background:linear-gradient(298deg,#2babf3,#72edd1,#eb88a6,#fcc955)!important;background-size:240% 240%!important;animation:gradient-animation 24s ease infinite!important}@keyframes gradient-animation{0%{background-position:0 50%!important}50%{background-position:100% 50%!important}to{background-position:0 50%!important}}@font-face{font-family:Rocher;src:url(https://assets.codepen.io/9632/RocherColorGX.woff2)}.c{font-family:Rocher;text-align:center;font-size:2.125rem;display:flex;flex-direction:column;align-items:center;justify-content:center}@font-palette-values --Grays{font-family:Rocher;base-palette:9}@font-palette-values --Purples{font-family:Rocher;base-palette:6}@font-palette-values --Mint{font-family:Rocher;base-palette:7}.grays{font-palette:--Grays}.purples{font-palette:--Purples}.mint{font-palette:--Mint}.f:hover{background:#fff!important;background-image:none!important;opacity:1!important;border:.2rem solid #b5b5b5!important;box-shadow:0 8px 20px rgba(0,0,0,.06);transition:all .25s ease}.keyboard-base{width:622px;padding:18px;margin:60px auto;background:#d7dccb;border-radius:20px;box-shadow:0 18px 35px rgba(0,0,0,.08),inset 0 2px 4px hsla(0,0%,100%,.6);display:grid;grid-template-columns:repeat(30,14px);grid-template-rows:repeat(5,36px);gap:6px}.key{grid-column:span 2;border-radius:8px;background:linear-gradient(180deg,#f4f6ef,#e7eadf);border:1px solid rgba(0,0,0,.15);font-size:11px;font-weight:500;color:#4a4d42;display:flex;align-items:flex-start;justify-content:flex-start;padding:6px 0 0 6px;box-shadow:0 4px 0 #cdd2c2,0 6px 10px rgba(0,0,0,.05);transition:all .07s ease;cursor:pointer}.key:active{transform:translateY(3px);box-shadow:0 1px 0 #cdd2c2,0 2px 4px rgba(0,0,0,.05)}.key:nth-child(odd){background:linear-gradient(180deg,#eef1e6,#dde1d4)}.delete{grid-column:span 4}.backslash,.tab{grid-column:span 3}.capslock,.return{grid-column:span 4}.leftshift,.rightshift{grid-column:span 5}.command,.leftctrl{grid-column:span 3}.command{font-size:9px}.space{grid-column:span 13}@media (max-width:768px){.keyboard-base{width:100%;max-width:280px;padding:8px;margin:20px auto;grid-template-columns:repeat(30,6px);grid-template-rows:repeat(5,18px);gap:3px;border-radius:12px}.key{font-size:6px;padding:2px 0 0 3px;border-radius:4px;box-shadow:0 2px 0 #cdd2c2,0 3px 6px rgba(0,0,0,.05)}.command{font-size:5px}}@media (max-width:420px){.keyboard-base{transform:scale(.9);transform-origin:top center;margin:10px auto}.key{font-size:5px;padding:1px 0 0 2px;border-radius:3px;box-shadow:0 1.5px 0 #cdd2c2,0 2px 4px rgba(0,0,0,.05)}.command{font-size:4px}}.checks{background-color:#7209b7;opacity:.78;background-image:linear-gradient(0deg,transparent 45%,#4361ee 0,#4361ee 55%,transparent 0,transparent 0,#4361ee 0,#4361ee 30%,transparent 0);background-size:24px 24px}.boxes,.checks{background-position:0 0}.boxes{background-color:#cf3f1d;opacity:.96;background-image:radial-gradient(circle,transparent 25%,#cf3f1d 26%),linear-gradient(0deg,transparent 44%,#5e0812 45%,#5e0812 55%,transparent 56%),linear-gradient(90deg,transparent 44%,#5e0812 45%,#5e0812 55%,transparent 56%);background-size:52px 52px}.dots{background-color:#e82e2e;opacity:1;background-image:radial-gradient(#f3f0d6 1.8px,transparent 0),radial-gradient(#f3f0d6 1.8px,#e82e2e 0);background-size:72px 72px;background-position:0 0,36px 36px}.dotted{background-color:#11249d;opacity:1;background:repeating-linear-gradient(45deg,#f3f0d6,#f3f0d6 5.5px,#11249d 0,#11249d 27.5px)}.diagonal-lines{background-color:#f4d35e;opacity:.84;background-image:radial-gradient(circle at bottom,#f28f3b,#f28f3b 10%,transparent 0,transparent 20%,#f28f3b 0,#f28f3b 30%,transparent 0,transparent 40%,#f28f3b 0,#f28f3b 50%,transparent 0,transparent 60%,#f28f3b 0,#f28f3b 70%,transparent 0,transparent 80%,#f28f3b 0,#f28f3b 90%,transparent 0);background-position:0 0;background-size:60px 60px}.horizontal-lines{background-color:#9edbe6;opacity:.8;background-size:42px 42px;background-image:repeating-linear-gradient(90deg,#192256,#192256 2.1px,#9edbe6 0,#9edbe6)}.vertical-lines{background-color:#e69ec4;opacity:.8;background-size:8px 8px;background-image:repeating-linear-gradient(0deg,#192256,#192256 .4px,#e69ec4 0,#e69ec4)}.diagonal-stripes{background-color:#6e44ff;opacity:.65;background-image:radial-gradient(circle,transparent 25%,#6e44ff 26%),linear-gradient(45deg,transparent 46%,#b892ff 47%,#b892ff 52%,transparent 53%),linear-gradient(135deg,transparent 46%,#b892ff 47%,#b892ff 52%,transparent 53%);background-position:0 0;background-size:40px 40px}.vertical-stripes{background-color:#000;opacity:1;background-image:linear-gradient(0deg,#000 50%,#f3f0d6 0);background-size:36px 36px}.horizontal-stripes{background-color:#f4d35e;opacity:.67;background-image:linear-gradient(0deg,#f4d35e 50%,transparent 0),linear-gradient(90deg,transparent 45%,#f28f3b 0,#f28f3b 55%,transparent 0,transparent 0,#f28f3b 0,#f28f3b 30%,transparent 0);background-position:0 0;background-size:32px 32px}.zig-zag{background-color:#d00000;opacity:.61;background-image:linear-gradient(90deg,#ffba08 25%,transparent 26%,transparent 49%,#ffba0880 50%,#ffba0880 75%,transparent 76%);background-position:0 0;background-size:28px 28px}.waves{background-color:#ebe7d5;opacity:.8;background-image:repeating-linear-gradient(45deg,#000 25%,transparent 0,transparent 75%,#000 0,#000),repeating-linear-gradient(45deg,#000 25%,#ebe7d5 0,#ebe7d5 75%,#000 0,#000);background-position:0 0,37px 37px;background-size:74px 74px}.patternizer{background-color:#d6d2d2;opacity:1;background-size:32px 32px;background-image:repeating-linear-gradient(90deg,#000005,#000005 1.6px,#fcfcfc 0,#fcfcfc)}@media (max-width:768px){.patternizer{background-size:16px 16px}}:root{--color-bg:#beefe7;--color-bg-second:#71cbc2;--color-cassette:#344366;--color-border:#192748;--color-text:#021748;--color-reel:#aaa;--border:solid .2rem var(--color-border);--rewind-duration:9s}body.playing:before{content:"";display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:200%;height:200%;z-index:-1;background:repeating-conic-gradient(var(--color-bg) 0deg 15deg,var(--color-bg-second) 15deg 30deg);animation:playing 45s linear infinite}@keyframes playing{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(1turn)}}.cassette{position:relative;width:28rem;height:17.5rem;background:var(--color-cassette)}.cassette,.cassette:after{border:var(--border);border-radius:.5rem}.cassette:after{content:"";display:block;width:104%;height:30%;background-color:var(--color-cassette);position:absolute;top:63%;left:-2%;z-index:-1}.cassette__bottom{width:60%;height:26%;position:absolute;left:50%;transform:translateX(-50%);bottom:-4%}.cassette__bottom:after,.cassette__bottom:before{content:"";height:100%;width:60%;position:absolute;top:0;border:var(--border);background-color:var(--color-cassette)}.cassette__bottom:before{left:0;border-right-width:0;border-radius:.5rem 0 0 .5rem;transform:skew(-15deg)}.cassette__bottom:after{right:0;border-left-width:0;border-radius:0 .5rem .5rem 0;transform:skew(15deg);z-index:-1}.cassette__line{position:relative;display:block;width:89%;height:.2rem;background:hsla(0,0%,100%,.1);margin:.5rem auto .6rem;border-radius:.2rem}.opening{border:var(--border);width:1.2rem;height:1.2rem;border-radius:.4rem;background:var(--color-bg);position:absolute;transform:translate(-50%,-50%)}.opening:first-of-type,.opening:nth-of-type(4){bottom:3%;border-radius:50%}.opening:nth-of-type(2),.opening:nth-of-type(3){bottom:12%}.opening:first-of-type{left:18%}.opening:nth-of-type(2){left:33%}.opening:nth-of-type(3){left:67%}.opening:nth-of-type(4){left:82%}.screw{width:.7rem;height:.7rem;border:.1rem solid var(--color-border);border-radius:50%;position:absolute;transform:translate(-50%,-50%)}.screw:before{content:"";display:block;position:absolute;left:50%;top:0;width:0;height:100%;border-left:.1rem solid var(--color-border);transform:translateX(-50%)}.screw:first-of-type,.screw:nth-of-type(2){top:.7rem}.screw:nth-of-type(3),.screw:nth-of-type(4){bottom:.6rem}.screw:first-of-type,.screw:nth-of-type(3){left:2.5%}.screw:nth-of-type(2),.screw:nth-of-type(4){left:97.5%}.screw:first-of-type{transform:translate(-50%,-50%) rotate(-45deg)}.screw:nth-of-type(2){transform:translate(-50%,-50%) rotate(45deg)}.screw:nth-of-type(3){transform:translate(-50%,50%) rotate(45deg)}.screw:nth-of-type(4){transform:translate(-50%,50%) rotate(-45deg)}.cassette__bottom .screw{left:50%;top:40%}.label{position:relative;border:var(--border);border-radius:.4rem;width:90%;height:64%;margin:0 auto;background:#f5f5f5}.label:before{content:"";display:block;position:absolute;left:0;bottom:14%;height:55%;width:100%;background:linear-gradient(#ac1b21 0 20%,#e14727 20.1% 40%,#f67f21 40.1% 60%,#e0ad3f 60.1% 80%,#f8f39e 80.1%)}.title{height:36%;padding-bottom:.5rem;text-align:center;display:flex;align-items:center;justify-content:center;text-transform:uppercase;font-size:2.4rem;letter-spacing:.02em;font-weight:700}.side{left:7.5%;background:var(--color-text);font-weight:400;font-size:1.5rem;line-height:1;width:1.8rem;height:1.8rem;display:flex;align-items:center;justify-content:center}.duration,.side{position:absolute;top:59%;transform:translate(-50%,-50%);color:#fff}.duration{left:92.5%;text-shadow:0 0 .1rem var(--color-text);font-weight:600;font-size:1.8rem;letter-spacing:.06em}.caption{height:18%;justify-content:center;text-align:center;font-size:.7rem;line-height:1}.caption,.cutout{display:flex;align-items:center;position:relative}.cutout{width:70%;height:46%;background:var(--color-cassette);border:var(--border);margin:0 auto;border-radius:.2rem;justify-content:space-around}.reel{width:3.5rem;height:3.5rem;border:var(--border);border-radius:50%;background:var(--color-border);position:relative;overflow:hidden}.reel:before{content:"";display:block;position:absolute;left:0;top:0;width:100%;height:100%;border-radius:inherit;border:.2rem solid var(--color-reel)}.reel__prongs,.reel__prongs:after,.reel__prongs:before{position:absolute;left:50%;top:50%;height:3.5rem;width:.4rem;transform:translate(-50%,-50%);border-left-width:.7rem;border-bottom:.7rem solid var(--color-reel);border-right-width:.7rem;border-top:.7rem solid var(--color-reel);border-left:0 solid var(--color-reel);border-right:0 solid var(--color-reel)}.reel__prongs:after,.reel__prongs:before{content:"";display:block}.reel__prongs:before{transform:translate(-50%,-50%) rotate(-60deg)}.reel__prongs:after{transform:translate(-50%,-50%) rotate(60deg)}@keyframes rewind-reel{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(3turn)}}.window{width:40%;height:68%;border:var(--border);border-radius:.2rem;background:var(--color-bg-second);position:relative;overflow:hidden}.window:after,.window:before{content:"";display:block;width:100%;position:absolute;left:0;z-index:2}.window:before{height:100%;top:0;background:hsla(0,0%,100%,.1)}.window:after{top:15%;height:40%;border-color:hsla(0,0%,100%,.3);border-style:solid;border-width:.3rem 0 .5rem}.window__reel{width:6.5rem;height:6.5rem;border-radius:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.window__reel:first-child{left:-45%}.window__reel:last-child{left:145%}.window__reel:after,.window__reel:before{content:"";display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:inherit}.window__reel:after{width:100%;height:100%;background:var(--color-reel)}.window__reel:before{width:170%;height:170%;background:#3a111c;animation:rewind-tape infinite var(--rewind-duration) alternate linear}.window__reel:last-child:before{animation-direction:alternate-reverse}@keyframes rewind-tape{0%{width:105%;height:105%}to{width:225%;height:225%}}.bg-animation{animation:pastelColors 8s linear infinite;background-size:cover}body.is-playing:before{animation:rotateAndChangeColors 45s linear infinite,pastelColors 12s ease-in-out infinite;opacity:1}@keyframes rotateAndChangeColors{0%{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(1turn)}}@keyframes pastelColors{0%{background:repeating-conic-gradient(#f9d8d8 0deg 15deg,#d8f3d8 15deg 30deg,#fce4b4 30deg 45deg,#bcd6f7 45deg 60deg,#f9e0ec 60deg 75deg,#ffb5b5 75deg 90deg)}20%{background:repeating-conic-gradient(#e2b8d0 0deg 15deg,#b3e2d0 15deg 30deg,#ffedc7 30deg 45deg,#a8c8f7 45deg 60deg,#e1d6f2 60deg 75deg,#ffc7c7 75deg 90deg)}40%{background:repeating-conic-gradient(#ffd1dc 0deg 15deg,#b0e4d9 15deg 30deg,#fff5b8 30deg 45deg,#c3daf7 45deg 60deg,#f7d7f7 60deg 75deg,#ffb3b3 75deg 90deg)}60%{background:repeating-conic-gradient(#f7e1f2 0deg 15deg,#d1f0e0 15deg 30deg,#ffedd0 30deg 45deg,#aecaf7 45deg 60deg,#f6d3f9 60deg 75deg,#fcb8b8 75deg 90deg)}80%{background:repeating-conic-gradient(#f9d8d8 0deg 15deg,#d8f3d8 15deg 30deg,#fce4b4 30deg 45deg,#bcd6f7 45deg 60deg,#f9e0ec 60deg 75deg,#ffb5b5 75deg 90deg)}to{background:repeating-conic-gradient(#f9d8d8 0deg 15deg,#d8f3d8 15deg 30deg,#fce4b4 30deg 45deg,#bcd6f7 45deg 60deg,#f9e0ec 60deg 75deg,#ffb5b5 75deg 90deg)}}@media screen and (max-width:768px){.cassette{width:90vw;height:auto;max-width:20rem}.cassette:after{width:102%;height:25%}.cassette__bottom{width:80%}.title{font-size:1.8rem}.duration,.side{font-size:1.2rem;width:1.5rem;height:1.5rem}.cutout{width:85%}.reel{width:3rem;height:3rem}.caption{font-size:.6rem}}@media screen and (max-width:480px){.cassette{width:95vw;max-width:16rem}.cassette__bottom{width:90%}.title{font-size:1.4rem}.duration,.side{font-size:1rem;width:1.2rem;height:1.2rem}.cutout{width:90%}.reel{width:2.5rem;height:2.5rem}.caption{font-size:.5rem}.cassette{margin-bottom:1.5rem}}.reel__prongs{animation:rewind-reel var(--rewind-duration) infinite alternate linear;animation-play-state:paused}body.is-playing .reel__prongs{animation-play-state:running}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:14px;width:14px;border-radius:50%;background:#2563eb;cursor:pointer}