@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap);:root{--primary-color:#fff;--secondary-color:#eff0f5;--bg-shorten:#3b3054;--bg-button:#2acfcf;--bg-icon:#3b3054;--title-color:#35323e;--text-color:#9e9aa7;--bg-footer:#232127;--bg-error:#f46262;--button-hover:#9de1e1}*{box-sizing:border-box}*,ul{padding:0;margin:0}a{text-decoration:none;color:#fff;color:var(--primary-color)}li{list-style:none}body{font-family:"Poppins",sans-serif;font-size:18px;width:100%;font-weight:500;color:#9e9aa7;color:var(--text-color);overflow-x:hidden}h1,h3{color:#35323e;color:var(--title-color)}header{width:90%;display:flex;justify-content:space-between;margin:1rem auto;height:8vh;align-items:center;overflow:hidden}.menu-icon{position:relative;width:30px;display:block}nav{position:fixed;top:10%;width:90%;margin:0 auto;height:60vh;background:#3b3054;background:var(--bg-icon);display:flex;align-items:center;flex-direction:column;justify-content:space-evenly;border-radius:10px;opacity:0;transform:translateX(110%);transition:all .5s ease;z-index:10}.navbar-open{opacity:1;transform:translateX(0)}nav ul{margin:1rem auto 0;width:90%}nav li{font-weight:700;color:#fff;color:var(--primary-color);margin-bottom:1.5rem;text-align:center}nav .line{width:90%;margin:0 auto;background:#9e9aa7;background:var(--text-color);height:1px}nav #signup-button{width:100%;color:#fff;color:var(--primary-color);background:#2acfcf;background:var(--bg-button);height:7vh;border-radius:50px;line-height:7vh;cursor:pointer}nav #signup-button:hover{background:#9de1e1;background:var(--button-hover)}.container{display:flex;flex-direction:column;margin:0 auto;background:#fff;background:var(--primary-color);overflow:hidden}.illustration{width:auto;height:60vh;margin-left:1rem}.illustration g{transform:scale(.7)}.top-content{display:flex;flex-direction:column;text-align:center;align-items:center;margin-bottom:2rem}.top-button{width:55%;height:8vh;text-align:center;border-radius:50px;font-weight:700;font-size:18px;color:#fff;color:var(--primary-color);background:#2acfcf;background:var(--bg-button);outline:none;border:none;cursor:pointer}.top-button:hover{background:#9de1e1;background:var(--button-hover)}.top-content h1{line-height:1.2;margin-bottom:1rem;font-size:2.5rem;font-weight:700}.top-content p{margin-bottom:2rem}.content{height:auto;padding:10rem 0;background:#eff0f5;background:var(--secondary-color)}.content-description{display:flex;flex-direction:column;text-align:center;align-items:center;margin-bottom:5rem}.content-description h1{margin-bottom:1rem}.benefit-container{position:relative}.content-benefit{width:90%;display:flex;flex-direction:column;text-align:center;align-items:center;height:50vh;justify-content:space-between;margin:0 auto 3rem}.vertical-line{position:absolute;width:10px;height:80vh;background:#2acfcf;left:50.6%;top:25%}.benefit{position:relative;background-color:#f4f4f4;border-radius:10px;display:flex;flex-direction:column;align-items:center;height:45vh;justify-content:space-evenly;background:#fff;background:var(--primary-color)}.benefit-description{width:85%;margin:0 auto}.benefit-description p{font-size:1rem}.benefit h3{margin-bottom:2rem}.benefit .benefit-icon{position:absolute;top:-6vh;width:80px;height:80px;background-color:#3b3054;background-color:var(--bg-icon);border-radius:50px;display:flex;align-items:center;justify-content:center;left:40%}.shorten-container{position:relative;background-color:#3b3054;background-color:var(--bg-shorten);width:90%;height:25vh;margin:0 auto;background-repeat:no-repeat;transform:translateY(50%);border-radius:10px;overflow:hidden}.bg-shorten{position:absolute;right:0;z-index:1;border-radius:5px}.shorten-container form{position:absolute;width:90%;display:flex;flex-direction:column;z-index:2;right:5%;left:5%;top:15%}.input-wrapper{width:100%}.shorten-container input{margin-bottom:.5rem;padding-left:1rem;color:#9e9aa7}.shorten-container button,.shorten-container input{outline:none;width:100%;height:8vh;border-radius:10px;font-weight:700;font-size:18px;border:none}.shorten-container button{color:#fff;color:var(--primary-color);background:#2acfcf;background:var(--bg-button);cursor:pointer}.shorten-container button:hover{background:#9de1e1;background:var(--button-hover)}.boost-container{height:45vh;position:relative;background:#3b3054;background:var(--bg-shorten);overflow:hidden}.boost-content{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;left:5%;right:5%;top:30%}.boost-content h2{color:#fff;color:var(--primary-color);margin-bottom:2rem}footer{background:#232127;background:var(--bg-footer);padding:2rem 0;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;height:100vh}.logo-footer{width:auto;height:auto}.logo-footer path{fill:#fff}.footer-wrapper{margin:2rem 0}.footer-list{height:auto;margin-bottom:1.5rem}.footer-list .title-list{display:inline-block;color:#fff;color:var(--primary-color);margin-bottom:1rem}.footer-list li{font-size:14px;margin-bottom:.7rem}.footer-list li a{color:#9e9aa7;color:var(--text-color)}.social-media{display:flex;flex-direction:row;width:50%;justify-content:space-between;align-items:center}.social-media>svg{cursor:pointer}.shortened-list{width:90%;margin:0 auto}.shortened-list,.shortened-url{display:flex;flex-direction:column;height:auto}.shortened-url{width:100%;padding:1rem;background:#fff;background:var(--primary-color);border-radius:5px;margin-bottom:1.5rem}.shortened-url .url-name{color:#35323e;color:var(--title-color);font-size:1rem}.shortened-url .line-url{width:100;background:#9e9aa7;background:var(--text-color);margin:1rem 0;height:1px}.shortened-url .shortlink{color:#2acfcf;color:var(--bg-button);font-size:1rem;font-weight:700;margin-bottom:1rem}.shortened-url .copy-url{background:#2acfcf;background:var(--bg-button);color:#fff;color:var(--primary-color);width:100%;height:6vh;text-align:center;border:none;font-size:16px;font-weight:700;border-radius:5px;cursor:pointer}.shortened-url .copy-url:hover{background:#9de1e1;background:var(--button-hover)}.error{color:#f46262;color:var(--bg-error);font-size:14px;margin:.5rem 0}@media screen and (min-width:414px){.boost-container{height:41vh}.boost-container svg{position:absolute;right:0;top:0}.vertical-line{left:49.7%}}@media screen and (min-height:812px){.boost-container{height:37vh}.vertical-line{left:50.5%}}@media screen and (min-width:768px){body{font-size:1.6rem}header .menu-icon{width:40px}header svg:first-child{transform:scale(1.2);margin-left:.65rem}nav{height:50vh;width:80%;margin-left:5%}.illustration{height:75vh}.illustration g{transform:scale(1.5)}.top-content{width:90%;margin:0 auto}.top-content h1{font-size:3rem}.top-button{width:70%}.shorten-container button,.shorten-container input,.top-button{font-size:1.5rem}.content{padding-top:15rem}.shortened-url{padding:1.6rem}.shortened-url .url-name{font-size:1.6rem}.shortened-url .line-url{margin:1.6rem 0}.shortened-url .shortlink{font-size:1.6rem;margin-bottom:1.6rem}.shortened-url .copy-url{font-size:1.5rem}.content-description{width:90%;margin:0 auto 10rem}.content-benefit{height:40vh}.benefit{height:35vh}.benefit .benefit-icon{top:-5.5vh;width:120px;height:120px;border-radius:100px;left:42.5%}.benefit-icon svg{transform:scale(1.4)}.benefit h3{font-size:2rem}.benefit-description p{font-size:1.3rem}.boost-container svg{top:10%;transform:scale(1.25)}footer{padding:5rem 0}footer svg:first-child{transform:scale(1.5)}.footer-list .title-list{font-size:1.7rem}.footer-list li{font-size:1.2rem}footer .social-media>svg{transform:scale(1.5)}}@media screen and (min-width:1024px){body{font-size:2rem}a{color:#9e9aa7;color:var(--text-color)}header .menu-icon{width:50px}header svg:first-child{transform:scale(1.5);margin-left:1.7rem}nav li{margin-bottom:2rem}.illustration{height:75vh}.illustration g{transform:scale(2)}.top-content{margin-top:5rem}.top-content h1{font-size:3.5rem}.shorten-container button,.shorten-container input,.top-button,.top-content p{font-size:2rem}.shortened-list{margin-top:5rem}.copy-url,.shortened-url .url-name,.shortlink{font-size:2rem}.content-description{margin-top:5rem}.benefit .benefit-icon{width:150px;height:150px;left:43%}.benefit-icon svg{transform:scale(2)}.benefit h3{font-size:3rem}.benefit-description p{font-size:1.8rem}.vertical-line{width:15px;left:50.5%}.boost-container svg{top:20%;transform:scale(1.67)}.footer-list .title-list{font-size:2.5rem}.footer-list li{font-size:1.8rem}footer .social-media>svg{transform:scale(2)}}@media screen and (min-width:1024px){body{font-size:18px}header{width:80%}header .menu-icon{display:none}header svg:first-child{transform:scale(1);width:20%;margin-left:0}nav{width:100%;position:unset;transform:translateX(0);opacity:1;z-index:unset;background:none;flex-direction:row;border-radius:0;justify-content:space-between;height:auto}nav,nav ul{margin:0}.menu-list:first-child{width:35%;display:flex;justify-content:space-between}.menu-list:nth-child(3){width:25%;display:flex;flex-direction:row;justify-content:space-between;align-items:center}nav #signup-button{width:50%;height:5vh;line-height:5vh}nav li{font-size:1rem;margin-bottom:0;font-weight:500}nav li a:hover{color:#35323e;color:var(--title-color)}nav .line{display:none}.top-container{width:90%;margin:5rem 0 0 auto;display:flex;flex-direction:row-reverse;justify-content:space-between}.illustration{height:auto;transform:translate(10%,-10%)}.illustration g{transform:scale(1)}.top-content{width:50%;align-items:flex-start;margin-top:0}.top-content h1{font-size:4rem;text-align:left}.top-content p{font-size:18px;text-align:left;width:80%;margin-bottom:3rem}.top-button{font-size:18px;height:6vh;width:35%}.shorten-container{display:flex;align-items:center;height:20vh;width:80%}.bg-shorten{width:100%;height:auto}.shorten-container form{display:flex;flex-direction:row;justify-content:space-between;margin:0 auto;position:unset}.input-wrapper{width:75%}.shorten-container input{width:100%;font-size:18px}.shorten-container button{font-size:18px;width:20%}.content{padding-top:7rem}.shortened-list{margin-top:2rem;margin-bottom:10rem}.shortened-url{flex-direction:row;justify-content:space-between;align-items:center;width:90%;margin:0 auto 1rem}.shortened-url .url-name,.shortlink{font-size:1.5rem}.shortened-url .line-url{display:none}.shortened-url .shortlink{margin-bottom:0;margin-left:auto;margin-right:2rem;font-weight:500;font-size:1.5rem}.shortened-url .copy-url{width:10%;font-size:1.2rem;height:5.5vh}.content-description{margin-top:0}.content-description h1{font-size:3rem}.content-description p{width:40%;line-height:2}.benefit-container{width:80%;display:flex;margin:0 auto;justify-content:space-between;height:60vh}.vertical-line{height:10px;width:80%;left:10%;top:35%}.content-benefit{width:90%;margin:0}.content-benefit:nth-child(3){transform:translateY(15%)}.content-benefit:nth-child(4){transform:translateY(30%)}.benefit{width:90%;text-align:left}.benefit .benefit-icon{width:80px;height:80px;left:10%;top:-4.5vh}.benefit-description{width:85%;margin:0 auto;text-align:left}.benefit-icon svg{transform:scale(1)}.benefit h3{font-size:1.5rem}.benefit-description p{font-size:1rem;line-height:1.7}.boost-container{height:27vh}.boost-container svg{top:0;transform:scale(1.2)}.boost-content{top:20%}.boost-content h2{font-size:2rem}.top-button:nth-child(2){width:15%}footer{height:45vh;display:flex;flex-direction:row;align-items:flex-start;padding:5rem 10rem}footer svg:first-child{transform:scale(1);margin-top:3px}footer .list-wrapper{display:flex;justify-content:space-between;width:50%}.footer-list{margin-bottom:0;text-align:left}.footer-list .title-list{font-weight:700;font-size:1.5rem}.footer-list li{font-size:18px}.footer-list li a:hover{color:#2acfcf;color:var(--bg-button)}footer .social-media{width:20%}footer .social-media>svg{transform:scale(1)}footer .social-media>svg path:hover{fill:#2acfcf;fill:var(--bg-button)}}@media screen and (min-width:1280px){.benefit,.content-benefit{height:50vh}}@media screen and (min-width:1440px){.benefit,.content-benefit{height:35vh}}@media screen and (min-height:1500px){nav #signup-button{height:3vh;line-height:3vh}.top-button{height:3.5vh}.shorten-container{height:10vh}.shorten-container button,.shorten-container input{height:4vh}.benefit-container{height:30vh}.benefit,.content-benefit{height:20vh}.boost-container{height:18vh}.top-button:nth-child(2){height:3.5vh}}@media screen and (min-width:1550px){.top-content{width:40%}}@media screen and (min-height:1800px){.boost-container{height:15vh}}
/*# sourceMappingURL=main.8fd5e274.chunk.css.map */