@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap);*{box-sizing:border-box}body{padding:0;font-family:Montserrat,sans-serif;color:#fff}body,h1{margin:0}footer{position:absolute;bottom:1%;color:#fff;z-index:9999999}footer,strong{text-align:center}a{color:#fff}.light-container{height:100vh;width:100vw;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#2c2d35}.light-container h1{text-align:center;margin:0 2rem}.light-container:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;opacity:.05;z-index:1}.light-container>:not(:last-child){margin-bottom:2rem}.light-container.is-red{--color:#f94a1c}.light-container.is-yellow{--color:#ff9e18}.light-container.is-green{--color:#0ad05e}.light{background-color:#22212a;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;width:30vmax;height:60vmax;z-index:2;border-radius:3vmax;box-shadow:inset 0 0 0 2vmax rgba(0,0,0,.3),0 2vmax 3vmax rgba(0,0,0,.3)}@media screen and (min-width:500px){.light{width:30vmin;border-radius:3vmin;box-shadow:inset 0 0 0 2vmin rgba(0,0,0,.3),0 2vmin 3vmin rgba(0,0,0,.3);height:60vmin}}.light>*{--size:40%;--opacity:0.2;margin:7.5%;border-radius:50%;width:var(--size);padding-bottom:var(--size);background-color:#2a1e1e;transition:1s ease;position:relative;box-shadow:0 0 1rem transparent;overflow:hidden}.light>:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;opacity:var(--opacity);background-image:radial-gradient(circle,hsla(0,0%,100%,.5) 0,hsla(0,0%,100%,.2) 80%,hsla(0,0%,100%,0) 100%);background-color:var(--color);transition:1s ease}.light>.is-active{--opacity:1;box-shadow:0 0 10vmin 4vmin var(--color)}.light>.is-red{--color:#f94a1c}.light>.is-yellow{--color:#ff9e18}.light>.is-green{--color:#0ad05e}