.happy-birthday{max-width:800px;width:100%;padding-top:150px;height:300px}.happy-birthday img{width:100%}.the-message{padding:0 20px;z-index:1000}.message-p{transition:opacity 1s ease-in-out}.fade-in{opacity:1}.fade-out,.faded{opacity:0}.active-message{opacity:1;transition:5s}.the-message{text-align:center;font-size:25px}.message{width:100%;display:flex;justify-content:center}body{margin:0;padding:0;background-color:#242424;overflow-x:hidden;font-family:Emilys Candy,serif;font-weight:900;font-style:normal}.fade-off{transition:9s;opacity:0}.hide{display:none!important}.light-on{background-color:#ffcb64!important}.background{background-color:#242424;height:100vh;width:100vw;transition:25s;max-width:400px;position:relative;margin:0 auto}.message button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#646cff;cursor:pointer;transition:border-color .25s;color:#fff}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;cursor:pointer;transition:border-color .25s;background-color:#ffcb64}button:hover{border-color:#ffcb64}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.hanging-light{height:200px;width:100%;display:flex;justify-content:space-around;position:absolute;top:-300px;transition:10s}.light-bulb-container{height:100%;width:65px;position:relative}.light-bulb-container-animation1{animation:animate 8s alternate infinite}.light-bulb-container-animation2{animation:animate1 5s alternate infinite}.light-bulb-container-animation3{animation:animate2 3s alternate infinite}#light1{position:absolute;top:70px;left:13px;width:40px;height:40px;background-color:#46f23d;border-radius:50%;border:.9px solid #3ae231}#light1:before{content:"";background-color:#fff;position:absolute;top:-100px;left:20px;width:2px;height:100px}#light2{position:absolute;top:150px;left:10px;width:40px;height:40px;background-color:#0df7ff;border-radius:50%;border:.9px solid #0dd8df}#light2:before{content:"";background-color:#fff;position:absolute;top:-150px;left:20px;width:2px;height:150px}#light3{position:absolute;top:100px;left:10px;width:40px;height:40px;background-color:red;border-radius:50%;border:.9px solid #d30505}#light3:before{content:"";background-color:#fff;position:absolute;top:-100px;left:20px;width:2px;height:100px}@keyframes animate{0%{transform:rotate(10deg)}to{transform:rotate(-10deg)}}@keyframes animate1{0%{transform:rotate(5deg)}to{transform:rotate(-5deg)}}@keyframes animate2{0%{transform:rotate(8deg)}to{transform:rotate(-8deg)}}#ballon-container{position:relative}#light-button{position:absolute;bottom:100px;width:100%;display:flex;justify-content:center}#ballon img{height:100%}#ballon{position:absolute;height:100px;width:100px}.ballon1{animation:ballon1 30s alternate infinite}.ballon2{animation:ballon2 40s alternate infinite}.ballon3{animation:ballon3 35s alternate infinite}.ballon4{animation:ballon4 35s alternate infinite}@keyframes ballon1{0%{margin-top:10vh;margin-left:70vw;transform:rotate(-10deg)}15%{transform:rotate(10deg)}35%{transform:rotate(-10deg)}50%{margin-top:40vh;margin-left:0;transform:rotate(10deg)}65%{transform:rotate(10deg)}85%{transform:rotate(-10deg)}to{margin-top:80vh;margin-left:70vw;transform:rotate(10deg)}}@keyframes ballon2{to{margin-top:50vh;margin-left:75vw;transform:rotate(-10deg)}85%{transform:rotate(10deg)}65%{transform:rotate(-10deg)}50%{margin-top:60vh;margin-left:0;transform:rotate(10deg)}35%{transform:rotate(10deg)}15%{transform:rotate(-10deg)}0%{margin-top:70vh;margin-left:75vw;transform:rotate(10deg)}}@keyframes ballon3{0%{margin-top:10vh;margin-left:5vw;transform:rotate(-10deg)}15%{transform:rotate(10deg)}35%{transform:rotate(-10deg)}40%{margin-top:40vh;margin-left:70vw;transform:rotate(10deg)}65%{transform:rotate(10deg)}85%{transform:rotate(-10deg)}to{margin-top:80vh;margin-left:5vw;transform:rotate(10deg)}}@keyframes ballon4{0%{margin-top:10vh;margin-left:70vw;transform:rotate(-10deg)}15%{transform:rotate(10deg)}35%{transform:rotate(-10deg)}50%{margin-top:40vh;margin-left:30vw;transform:rotate(10deg)}65%{transform:rotate(10deg)}85%{transform:rotate(-10deg)}0%{margin-top:80vh;margin-left:70vw;transform:rotate(10deg)}}
