*{margin:0;padding:0;text-decoration:none}body{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:"Raleway",sans-serif;background-color:#0c122c;background-image:url(https://github.com/BlackFury117/Fylo-data-storage-component-master/blob/main/images/bg-desktop.png?raw=true);background-repeat:no-repeat;background-size:contain;background-position:bottom}.container{display:flex;align-items:end;margin-bottom:2rem;position:relative}.container #talkbubble{display:flex;justify-content:center;align-items:center;width:125px;height:55px;background:#fff;position:absolute;top:0;right:18px;border-radius:10px;font-weight:700}.container #talkbubble .left{color:#9a9ba2;font-size:.7rem}.container #talkbubble .num{font-size:1.5rem;font-weight:700;color:#0c122c;margin-right:.6rem}.container #talkbubble:before{content:"";position:absolute;bottom:-10px;left:79%;transform:translateX(-40%);transform:rotate(0deg);width:0;height:0;border-top:23px solid rgba(0,0,0,0);border-right:26px solid #fff;border-bottom:23px solid rgba(0,0,0,0)}.container .fylo{display:flex;flex-direction:column;justify-content:center;width:200px;height:110px;margin-right:1.5rem;padding:1rem 4rem 1rem 1.4rem;background-color:#1e2c69;border-radius:.5rem 4.5rem .5rem .5rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}.container .fylo .main-logo{width:110px;margin-bottom:1rem}.container .fylo .icons{display:flex;align-items:center}.container .fylo #icon-document{width:15px}.container .fylo .icon{width:20px}.container .fylo .bg-color{display:flex;justify-content:center;align-items:center;background-color:#0b122b;padding:.4rem;margin-right:.5rem;height:25px;width:25px;border-radius:.5rem}.container .storage{background-color:#1e2c69;border-radius:.5rem;padding:1rem;width:350px;height:80px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}.container .storage .used{color:#bfbfbf;font-size:.8rem;margin-bottom:.8rem}.container .storage span{color:#fff;font-weight:700}.container .storage .rom{font-size:.8rem;font-weight:700;color:#d2d0d0;display:flex;justify-content:space-between}.container .storage .bg-range{display:flex;align-items:center;background-color:#0c122c;border-radius:2rem;width:100%;height:1rem;margin-bottom:.8rem;padding:.1rem}.container .storage .bg-range .gradient-range{display:flex;justify-content:flex-end;align-items:center;background:linear-gradient(90deg, hsl(6, 100%, 80%) 0%, hsl(335, 100%, 65%) 100%);border-radius:2rem;width:80%;height:.8rem;margin-left:.1rem}.container .storage .bg-range .gradient-range .cursor{background-color:#fff;width:10px;height:.6rem;border-radius:50%;margin-right:.2rem}@media only screen and (max-width: 600px){body{background-image:url(https://github.com/BlackFury117/Fylo-data-storage-component-master/blob/main/images/bg-mobile.png?raw=true);background-color:none;background-repeat:no-repeat;background-size:cover;padding:0 1.2rem;min-height:100vh}.container{flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;width:100%}.container .fylo{width:100%;margin-right:0;padding:1rem}.container .storage{width:100%}.container #talkbubble{position:absolute;display:flex;top:90%;right:0;left:0;margin:0 auto}.container #talkbubble:before{border:0}.attribution{margin-top:2rem}}.attribution{font-size:13px;text-align:center;color:#a8a6a6}.attribution a{color:#cfcfcf;font-weight:bolder}/*# sourceMappingURL=styles.css.map */