.nav-bar{padding:1% 0;display:flex;background-color:#051014;color:#fff;height:fit-content;justify-content:space-between;align-items:center;z-index:2}.back-arrow{margin-left:2vw}.back-arrow:hover{cursor:pointer}.menu-logo{display:flex;align-items:center;column-gap:2rem;margin-left:1rem}.menu-button{display:flex;flex-direction:column}.menu-button:hover{cursor:pointer;box-shadow:0 0 2px #acbdba}.menu-button div{width:22px;margin:2.5px;height:2px;background-color:#acbdba}.brand-name{font-size:4ch;padding:0;margin:0}.brand-name:hover{cursor:pointer;text-shadow:1px 1px 1px #ACBDBA}.login-button{background-color:#acbdba;padding:.5rem 1rem;border-radius:12px;margin-right:4vw}.login-button:hover{cursor:pointer;box-shadow:0 0 5px #acbdba}.login-text{margin:0;padding:0;font-size:x-large;display:inline}.user-icon{padding:0;margin:0 0 0 10px;height:1rem;width:auto}.logged-in{display:flex;flex-direction:row;margin-right:10px;align-items:center;justify-content:space-between}.user{margin-right:20px;background-color:#003a92;padding:0;width:40px;height:40px;display:flex;justify-content:center;align-items:center;border-radius:10px;cursor:pointer}.user:hover{box-shadow:#024cba 0 0 5px}.user p{padding:0;margin:0;font-size:larger}.logout-button{background-color:#acbdba;border:0;border-radius:5px;cursor:pointer;transition:scale .15s ease-in-out}.logout-button:hover{scale:1.05}.logout-text{margin:0;padding:2px 5px;font-size:small}@media (max-width: 375px){.brand-name{font-size:2ch}.login-text{font-size:small}.user-icon{height:.6rem}.login-button{padding:.4rem}.menu-logo{margin-left:.4rem;column-gap:.8rem}}.home-page{margin:0;padding:0;display:flex;flex-direction:column;width:100%;overflow-x:hidden}.first{vertical-align:top;display:flex;padding:0% 15%;margin:4% 0 8%}.first .left{display:flex;flex-direction:column;align-items:center;width:45%}.first .left p{vertical-align:top;text-align:center;margin:0;padding:0;font-size:clamp(2em,3.4vw,6em);width:100%}.start{margin:3rem 0;background-color:#000;color:#fff;width:15vw;height:15vw;max-width:180px;max-height:180px;min-width:70px;min-height:70px;border-radius:100%;font-size:clamp(1.5em,2vw,4em);border:0;font-weight:600;cursor:pointer;animation:pulse 3s infinite;transition:all .2s ease-in-out}.start:hover{animation-play-state:paused;transform:scale(1.1)}.first .left span{display:block;text-align:center}.audiovision-span{margin-top:12%;scale:1.3;font-weight:700}.first img{margin-top:-6%;margin-left:-5%;width:10%;height:auto;flex:1;cursor:pointer;animation:slide-down 1.2s ease-in-out forwards;transition:filter 4s ease-in-out}.first img:hover{filter:invert(100%)}.description{margin:0;padding:3% 10%;font-size:clamp(2rem,3.5vw,7em);text-align:center;font-weight:500;opacity:0;animation:fadeInUpwards 1.2s ease-in-out forwards;animation-play-state:paused}.second{display:flex;position:relative;height:auto;margin-top:2%;padding:5% 10%;text-align:center}.second img{flex:1;width:85%;max-width:100%;opacity:0;animation:fadeInFromRight 1.5s ease-in-out forwards;animation-play-state:paused}.second p{position:absolute;top:50%;left:35%;transform:translate(-35%,-50%);flex:1;font-size:clamp(2em,4.4vw,8em);padding:0;font-weight:500}.data-analysis-des{flex:1;margin:10% 0 0;padding:5% 10% 0;font-size:clamp(2em,4.5vw,8em);text-align:center;color:#161d20;font-weight:500;animation:fadeInUpwards 1.5s ease-in-out forwards;animation-play-state:paused}.visual-vid{flex:1;margin:2% 0 8%}.last{margin:-5% auto 5%;background-color:#000;color:#fff;width:fit-content;height:auto;border-radius:10px;padding:.5rem 1rem;font-size:clamp(1rem,2vw,5rem);border:0;font-weight:500;cursor:pointer;animation:pulse 3s infinite;transition:all .2s ease-in-out}.last:hover{animation-play-state:paused;transform:scale(1.1)}.audio-visualizer{visibility:hidden;opacity:15%;width:100%;height:fit-content;display:flex;justify-content:center;align-items:flex-end;position:fixed;bottom:0;left:0;right:0;margin:auto;transition:all .2s ease-in-out}.bar{width:2.5vw;height:5.5vw;margin:0 2%;background-color:#fff;border-radius:5px;animation:barsAnimation 1s infinite ease-out}.bar:nth-child(10),.bar:nth-child(1),.bar:nth-child(6),.bar:nth-child(8){animation-delay:.2s}.bar:nth-child(11),.bar:nth-child(2),.bar:nth-child(15),.bar:nth-child(9){animation-delay:.4s}.bar:nth-child(3),.bar:nth-child(14),.bar:nth-child(7){animation-delay:.6s}.bar:nth-child(13),.bar:nth-child(4){animation-delay:.8s}.bar:nth-child(12),.bar:nth-child(5){animation-delay:1s}.audio-container:hover .bar{transform:scaleY(2)}.audio-visual{font-weight:bolder;scale:1.3}@keyframes fadeInUpwards{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInFromRight{0%{opacity:0;transform:translate(50px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}@keyframes barsAnimation{0%{transform:scaleY(1)}50%{transform:scaleY(.5)}to{transform:scaleY(1)}}@keyframes slide-down{0%{opacity:0;transform:translateY(-100%)}50%{transform:translateY(10%)}70%{transform:translateY(-5%)}to{transform:translateY(0);opacity:100%}}@media (max-width: 800px){.first{flex-direction:column-reverse;padding:0;margin:0;height:100svh;width:100%;justify-content:center;align-items:center}.first .left{width:100%;display:flex;justify-content:center;align-items:center}.first .left p{margin-top:1rem;display:flex;flex-direction:column;justify-content:center;align-items:center}.audiovision-span{width:fit-content;margin-top:1em}.first img{width:100%;height:40%;flex:none;object-fit:contain;padding:0;margin:0}.description{display:flex;flex-direction:column;justify-content:center;height:100svh}.second{flex-direction:column-reverse;padding:0;margin:0;height:100svh;width:100%;justify-content:center;align-items:center}.second img{object-fit:contain;width:100%}.visual-vid{width:100%}}@media (max-height: 400px) and (orientation: landscape){.first{margin-top:4em}}@media (max-height: 300px) and (orientation: landscape){.home-page{row-gap:5rem}}html,body,.App,#root{margin:0;padding:0;width:100%;height:100%}html{background-color:#acbdba;font-family:monospace}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh}.loading-spinner{border:4px solid rgba(0,0,0,.1);border-left:4px solid #000;border-radius:50%;width:30px;height:30px;animation:spin 1s linear infinite}.user-created{position:absolute;bottom:20px;left:0;right:0;margin:0;padding:10px;background-color:#006400;color:#fff;font-size:larger;text-align:center;animation:fade-in 1s ease-in-out forwards,fade-out 1s ease-in-out forwards 3s}@keyframes fade-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(20px)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}