#start{display:flex;flex-direction:column;place-items:center;margin:0;padding:2em}#start h1{margin-top:0}#start input[type=text]{font-size:16px;padding:8px 4px;border:1px solid #cccccc;border-radius:20px;margin-bottom:4px;margin-top:4px;text-align:center}#start input[type=text]:disabled{opacity:.5}#start button{font-size:16px;padding:8px;background-color:#ccc;border:0;border-radius:4px;cursor:pointer;transition:background-color .25s;min-width:200px}#start button:hover{background-color:#ddd}#start button:disabled{opacity:.5}#root{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh}body{background:#eaf6ff;font-family:Poppins,sans-serif}header{text-align:center}footer{text-align:center;padding-top:20px;padding-bottom:30px}main{max-width:720px;margin:auto;display:flex;justify-content:space-around;flex-wrap:wrap}footer{max-width:720px;margin:auto;text-align:center}.lefthalf,.righthalf{width:45%;flex-wrap:wrap}.card{border-radius:25px;background:#fff}.neumorphic-card{background:#fff;border-radius:15px;box-shadow:8px 8px 15px #d1d9e6,-8px -8px 15px #fff;padding:20px;text-align:center;margin:10px;transition:.3s ease-in-out}.neumorphic-card:hover{box-shadow:4px 4px 10px #d1d9e6,-4px -4px 10px #fff;transform:scale(1.05)}.half{width:30%}.full{width:100%}h2{margin-bottom:5px;margin-top:0}h3{color:#1c1f26;margin-bottom:10px;margin-top:0}i{color:#87ceeb;font-size:36px;background:linear-gradient(135deg,#12c2e9,#c471ed,#f64f59);-webkit-background-clip:text;-webkit-text-fill-color:transparent}section{display:flex}.avatars{display:flex;flex-wrap:wrap;justify-content:space-around;margin-top:25px}.avatar img{width:60px;height:60px;border-radius:50%;background:#000;margin-bottom:10px}.skeets-section{text-align:center;margin:50px 0}.skeets-section h2{font-family:Poppins,sans-serif;font-weight:600;font-size:1.8rem;margin-bottom:20px}.chart{display:flex;justify-content:center;align-items:flex-end;gap:10px;height:200px;margin:0 auto}#start button.gradientBtn{background:linear-gradient(135deg,#12c2e9,#c471ed,#f64f59);background-size:200%;background-position:right;color:#fff;margin-top:20px;border-radius:40px;padding:10px 20px;font-size:16px;border:none;cursor:pointer;transition:all .4s ease}#start button.gradientBtn:hover{background-position:left;transform:scale(1.05);box-shadow:0 4px 15px #0003}.bar{background:-webkit-linear-gradient(135deg,#12c2e9,#c471ed,#f64f59);background:linear-gradient(135deg,#12c2e9,#c471ed,#f64f59);border-radius:5px;width:30px;position:relative;transition:transform .3s ease}.bar:hover{transform:scale(1.1);box-shadow:0 4px 8px #0003}.months{display:flex;justify-content:center;margin-top:10px;gap:10px;font-family:Poppins,sans-serif;color:#707070}.months span{width:30px;text-align:center;font-size:.9rem}.fullwidth{width:100%}.hashtags{text-align:left}.twocol{display:flex}.twocol .col{width:50%;text-align:left}.col img{max-width:50%;height:auto}.wrapper{display:flex;align-items:center;justify-content:center}.published{display:inline-flex;flex-direction:column;background:#eaf6ff}.barTrack{height:100%;display:flex;align-items:end;border-radius:5px;background:#efefef}.week .barTrack{width:12%}.week .bar{width:100%}.hashtags{list-style:none;text-align:center;padding:0;margin:0}.hashtags li{border:1px solid black;display:inline-block;margin:5px 15px;padding:10px 25px;border-radius:25px}@media only screen and (max-width : 770px){.lefthalf,.righthalf{width:100%;justify-content:space-around}.half{width:24%;margin:10px 0}.skeets-section{margin-top:0;margin-bottom:0}.mobileHalf{width:50%}.week .barTrack{width:12%;height:100%;background:#efefef;display:flex;align-items:end;border-radius:5px}.week .bar{width:100%}.week .months span{width:12%}.skeets-section h2{margin-bottom:0}.avatar img{width:90px;height:90px}.avatars .avatar{width:25%}main,header,footer{max-width:100%}}@media only screen and (max-width : 550px){.half{width:40%;margin:0;padding:5px}.lefthalf,.righthalf{width:100%;justify-content:center;column-gap:5px}.month .bar{width:15px}.month span{font-size:8px;width:15px}.neumorphic-card.full.month{padding:5px}.avatar img{width:55px;height:55px}.full{margin:10px 0}}.loader{background-color:#eee;padding:2px 6px;border-radius:4px}.loader .loader-icon{-webkit-animation:spin 3s linear infinite;-moz-animation:spin 3s linear infinite;animation:spin 3s linear infinite;margin-right:5px}@-moz-keyframes spin{to{-moz-transform:rotate(360deg)}}@-webkit-keyframes spin{to{-webkit-transform:rotate(360deg)}}@keyframes spin{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}