@import"https://fonts.googleapis.com/css2?family=Boldonse&family=Outfit:wght@100..900&display=swap";:root{--grad-color1: #6fe3e1;--grad-color2: #619de3;--grad-color3: #5257e5;--ff-header: "Outfit";--ff-text: "Boldonse"}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{height:100dvh;background:linear-gradient(135deg,var(--grad-color1),var(--grad-color2),var(--grad-color3));font-family:var(--ff-text);display:flex;align-items:center;justify-content:center}.app-container{width:clamp(360px,40%,600px);background:#fff2;box-shadow:0 0 2px #0001;border-radius:1rem;padding:1rem;display:flex;flex-direction:column;align-items:center}.header{text-align:center;color:#fff;text-shadow:1px 1px 2px #0006;font-size:clamp(2.5rem,4vw,4rem);font-family:var(--ff-header)}form{width:100%;display:flex;flex-direction:column;align-items:center;gap:1rem}form input{font-family:var(--ff-header);width:80%;padding:.5rem;border-radius:1rem;border:2px solid transparent;font-size:1.2rem;font-weight:500;color:#444}form input::placeholder{font-size:1rem}form input:focus{outline:transparent;border:2px solid #619de3}form button{background:transparent;border:3px solid #fff6;padding:.4rem 2rem;border-radius:1rem;font-family:inherit;color:#fff;font-size:1rem;cursor:pointer}.stats-container{width:80%;height:400px;display:flex;flex-direction:column;align-items:center}.stats-container .current-date{color:#fff}.stats-container .top-section{width:100%;display:flex;align-items:center;justify-content:space-around}.stats-container .top-section p{color:#fff;font-size:4rem;font-family:var(--ff-text)}.stats-container .top-section img{opacity:0;width:80px}.stats-container .mid-section{text-align:center;width:100%;display:flex;align-items:center;justify-content:space-around;color:#fff;font-size:2rem}.stats-container .mid-section p:first-child{text-decoration:underline;font-size:clamp(1.2rem,2vw,1rem)}.stats-container .mid-section .mid-right-section,.stats-container .mid-section .mid-left-section{font-size:clamp(1.5rem,3vw,2.5rem);opacity:0}.stats-container .bottom-section{text-align:center;width:100%;display:flex;align-items:center;justify-content:space-around;color:#fff}.stats-container .bottom-section p:first-child{text-decoration:underline;font-size:clamp(1.2rem,2vw,1rem)}.stats-container .bottom-section .bottom-right-section,.stats-container .bottom-section .bottom-mid-section,.stats-container .bottom-section .bottom-left-section{font-size:clamp(1.5rem,3vw,2.5rem);opacity:0}.tempSlideUp{animation:tempSlideUp .8s cubic-bezier(.18,.89,.32,1.28) forwards}.imgSlideLeft{animation:imgSlideLeft .6s cubic-bezier(.18,.89,.32,1.28) .2s forwards}.popIn1{animation:popIn 1.5s ease-out forwards}.popIn2{animation:popIn 1.5s ease-out .1s forwards}.popIn3{animation:popIn 1.5s ease-out .2s forwards}.popIn4{animation:popIn 1.5s ease-out .3s forwards}.popIn5{animation:popIn 1.5s ease-out .4s forwards}@keyframes tempSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes imgSlideLeft{0%{opacity:0;transform:translate(50px)}to{opacity:1;transform:translate(0)}}@keyframes popIn{0%{opacity:0}to{opacity:1}}