@import"https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap";:root{--blade-hue: 120;--blade-lightness: 50%;--blade-clr: white;--accent-clr: floralwhite;--op: 1}*,*::before,*::after{box-sizing:border-box}body{background:#212121;display:grid;grid-template-columns:repeat(6, 1fr);grid-template-rows:50px 50px 1fr;min-height:100vh;place-items:center;overflow:hidden;text-transform:uppercase;font-size:1.5rem;font-family:"Source Sans Pro",sans-serif}@media(max-width: 46.875em){body{font-size:1.3rem}}[name=color]{grid-row:1;align-self:end;margin:.5em}#green,[for=green]{accent-color:green;color:green}#blue,[for=blue]{accent-color:blue;color:blue}#yellow,[for=yellow]{accent-color:#ff0;color:#ff0}#purple,[for=purple]{accent-color:purple;color:purple}#red,[for=red]{accent-color:red;color:red}#darksaber,[for=darksaber]{accent-color:#000;color:#000;-webkit-text-stroke:.25px var(--accent-clr)}label:not(.hilt){font-weight:bold;align-self:start}.lightsaber{grid-column:1/-1;position:relative;margin-top:25vh;position:relative}#on-off{position:absolute;width:0;height:0}.hilt{cursor:pointer;display:block;width:.75rem;height:7rem;border-radius:0 0 4px 4px;background-image:linear-gradient(silver 0 10px, hsl(39deg, 75%, 50%) 0 14px, silver 0 15px, black 0 20px, silver 0 22px, black 0 25px, silver 0 27px, black 0 30px, silver 0 32px, black 0 35px, silver 0 37px, black 0 40px, silver 0 42px, black 0 45px, silver 0 47px, black 0 50px, silver 0 60px, hsl(39deg, 75%, 50%) 60px 80px, silver 0 100%)}.hilt::before{content:"Click here →";color:var(--accent-clr);position:absolute;inset:35px 30px auto auto;white-space:nowrap;text-transform:capitalize;opacity:var(--op)}.blade{position:absolute;background:var(--blade-clr);height:350%;width:100%;bottom:100%;border-radius:100vw 100vw 0 0;box-shadow:inset 0 0 4px hsl(var(--blade-hue) 100% var(--blade-lightness)/1),0 0 1em hsl(var(--blade-hue) 100% var(--blade-lightness)/0.8),0 0 1.5em hsl(var(--blade-hue) 100% var(--blade-lightness)/0.7),0 0 2em hsl(var(--blade-hue) 100% var(--blade-lightness)/0.5),0 0 3em hsl(var(--blade-hue) 100% var(--blade-lightness)/0.3),0 0 5em hsl(var(--blade-hue) 100% var(--blade-lightness)/0.2);transition:transform 100ms ease-in-out;transform-origin:bottom}.blade::before,.blade::after{content:"";position:absolute;inset:0;border-radius:inherit}.blade::after{background:hsl(var(--blade-hue), 100%, var(--blade-lightness));filter:blur(0.5em);opacity:1;-webkit-animation:pulse linear 1s infinite;animation:pulse linear 1s infinite}.blade::before{background:var(--blade-clr);z-index:10}@-webkit-keyframes pulse{50%{opacity:.2}}@keyframes pulse{50%{opacity:.2}}#on-off:not(:checked)+.blade{transform:scaleY(0)}#on-off:checked+.blade{transform:scaleY(1)}#green:checked~.lightsaber{--blade-hue: 120}#blue:checked~.lightsaber{--blade-hue: 195}#yellow:checked~.lightsaber{--blade-hue: 60}#purple:checked~.lightsaber{--blade-hue: 290}#red:checked~.lightsaber{--blade-hue: 360}#darksaber:checked~.lightsaber{--blade-lightness: 100%}#darksaber:checked~.lightsaber .blade{border-radius:100%/500px 10px 0 0}#darksaber:checked~.lightsaber .blade::before{background:#000}@media(max-width: 31.25em){body{grid-template-rows:repeat(7, 70px);grid-template-columns:100px 50px 1fr}[name=color]{grid-column:2;grid-row:auto;align-self:center;justify-self:left;margin:1.5em}label:not(.hilt){grid-column:1;align-self:center;justify-self:left}.lightsaber{align-self:center;grid-column:3;grid-row:6}}/*# sourceMappingURL=styles.css.map */