*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}:root{--gradient: linear-gradient( 40deg, #fdeff9, #ec38bc, #7303c0, #03001e, #ff416c, #ff4b2b );--text-light-gradient: linear-gradient( 40deg, #cfe3e8, #93c5fd, #c7d2fe, #fafafa, #cbd5e1 )}body{font-family:customFont,sans-serif;background-color:#181d26;display:flex;justify-content:center;align-items:center}@font-face{font-family:customFont;src:url(../../assets/font/Manrope-ExtraBold.ttf)}h1{font-size:clamp(1.375rem,.75vw + 1.094rem,1.75rem)}.card{position:relative;width:90%;color:#cfe3e8;background-image:linear-gradient(to right bottom, hsl(217deg, 19%, 38%), hsl(218deg, 23%, 16%));padding:1rem 1.5rem;text-align:center;box-shadow:0 .5rem .5rem rgba(31,38,50,.2);border-radius:10px;animation-name:slide-up;animation-duration:1s;animation-timing-function:ease-in-out;animation-fill-mode:both}@media only screen and (min-width: 50em){.card{width:100%;max-width:43.75rem}}@media only screen and (min-width: 56.25em){.card{max-width:31.25rem;padding:1.5rem}}@keyframes slide-up{from{opacity:0;transform:translateY(10%)}to{opacity:none;transform:none}}.card__advice__number{font-size:.7rem;font-weight:100;padding:2em 0;text-transform:uppercase;letter-spacing:3px;background-image:var(--gradient);background-clip:text;-webkit-background-clip:text;color:rgba(0,0,0,0);background-size:400%;animation-name:bg-animation;animation-duration:5s;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-iteration-count:infinite;animation-direction:alternate}@keyframes bg-animation{from{background-position:left}to{background-position:right}}.card__advice{padding-bottom:0}.card__img{margin:2rem auto 3rem auto;display:flex;align-items:center;justify-content:center}button{position:absolute;bottom:-25px;left:50%;transform:translate(-50%, 0);padding:0;border:0;height:60px;width:60px;border-radius:100%;display:flex;align-items:center;justify-content:center;transition:all .3s;cursor:pointer;background-image:var(--gradient);background-size:400%;animation-name:bg-animation;animation-duration:5s;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-iteration-count:infinite;animation-direction:alternate}button:hover{box-shadow:0 0 1rem 1rem rgba(255,65,108,.25);animation-play-state:paused}@keyframes bg-animation{from{background-position:left}to{background-position:right}}button svg{animation-name:rotate-svg;animation-duration:5s;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-iteration-count:infinite;animation-direction:alternate}button svg:hover{animation-play-state:paused}button svg path{fill:#1f2632;animation-name:color;animation-duration:5s;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-iteration-count:infinite;animation-direction:alternate}@keyframes color{from{fill:#c7d2fe}to{fill:#1f2632}}@keyframes rotate-svg{from{transform:roate(0deg)}to{transform:rotate(360deg)}}/*# sourceMappingURL=style.css.map */