:root{--cyan: hsl(180, 66%, 49%);--translucent-cyan: hsla(180, 66%, 49%, .61);--dark-violet: hsl(257, 27%, 26%);--error: hsl(0, 87%, 67%);--light-gray: hsl(0, 0%, 75%);--grayish-violet: hsl(257, 7%, 63%);--light-violet: hsl(259, 11%, 39%);--dark-blue: hsl(255, 11%, 22%);--darker-violet: hsl(260, 8%, 14%);--violet: rgb(203, 26, 123)}*{-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}body,html{position:relative;z-index:-1000;background-color:#fff;overflow-x:hidden;margin:0;scroll-behavior:smooth}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#fff0}::-webkit-scrollbar-thumb{background:var(--dark-violet)}::-webkit-scrollbar-thumb:hover{background:var(--dark-blue)}.ham-btn{padding:0;border:none;background-color:#fff;width:40px;height:40px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition-duration:.2s}.bars{width:100%;height:4px;background-color:#000;border-radius:5px;transition-duration:.3s}.rotate-down{transform:rotate(45deg) translate(10px,10px)}.rotate-up{transform:rotate(-45deg) translate(10px,-10px)}.disappear{opacity:0}*{font-family:Poppins,sans-serif;transition:.1s}nav{display:flex;justify-content:space-between;padding:2rem 4rem}.nav-start,.links{display:flex;align-items:center;gap:3rem}.links *{color:var(--grayish-violet);font-weight:800}nav *{cursor:pointer}.links *:hover,.arrow:hover>path{color:var(--darker-violet);stroke:#000}.nav-end{display:flex;gap:1rem}.nav-btn{border:none;font-weight:700}.login{background:transparent;color:var(--grayish-violet)}.login:hover{color:var(--darker-violet)}.signup,.hero-btn{color:#fff;padding:.5rem 1.5rem;border-radius:999px;background-color:var(--cyan)}.signup:hover{background-color:var(--translucent-cyan)}.dropdown-menu{position:absolute;top:5rem;display:flex;flex-direction:column;background-color:var(--dark-violet);padding:0;border-radius:5px;box-shadow:0 4px 16px #0000001a;z-index:1000;overflow-x:hidden}.arrow{margin-left:5px}.arrow>path{stroke:var(--grayish-violet);stroke-width:3px}.arrow.rotate,.ham-arrow.rotate{transform:rotate(180deg);transition:.3s}.list-title:hover>span,.list-title:hover path{color:#000;stroke:#000}.nav-link{color:#fff;padding:1rem;width:100%;margin:0}.nav-link:hover{background-color:var(--cyan)}.ham-nav{width:90vw;box-shadow:10px 10px 10px 5px #00000054;background-color:var(--dark-violet);color:#fff;border-radius:10px;padding:2rem 0;display:flex;flex-direction:column;align-items:center;gap:2rem;height:fit-content;position:fixed;left:5vw;z-index:1000}.arrowed-title{position:relative;left:4px}.ham-arrow{stroke:#fff;margin-left:5px}.ham-arrow>path{stroke-width:3px}.list-title{font-weight:800}.ham-links{text-align:center}.mobile-menu{display:flex;flex-direction:column;align-items:center}hr{width:80%;border:.1px solid var(--light-violet);height:0}.sm-login{color:#fff;font-size:18px}.sm-signup{width:80%;padding:1rem 0;font-size:18px}.hero{display:flex;align-items:center;justify-content:space-between;padding:4rem 0 4rem 4rem}.hero-txt{display:flex;flex-direction:column;gap:1rem;align-items:start}.hero-title{font-size:clamp(3rem,4vw,5rem);margin:0;padding:0;line-height:1.2}.hero-desc{width:80%;color:var(--grayish-violet)}.hero-btn{border:none;font-size:18px;font-weight:600;text-decoration:none;cursor:pointer}.hero-btn:hover{background-color:var(--translucent-cyan)}.hero-img{width:50vw;position:relative;z-index:-1;left:3rem}.gray{position:relative;background:linear-gradient(to bottom,#fff 0px 4rem,hsl(from var(--light-gray) h s l / .4) 4rem 100%);padding-bottom:5rem;height:fit-content}section.form-section{width:100%}.form-container{background:url(/images/bg-shorten-desktop.svg);background-size:cover;background-position:center;background-color:var(--dark-violet);border-radius:10px;width:90vw;position:relative;left:5vw;height:8rem;display:flex;align-items:center;justify-content:center}.url-form{width:100%;display:flex;gap:1rem;align-items:center;justify-content:center}#url-input{width:60%;padding:1rem;border:none;border-radius:5px}#url-input:focus{border-color:var(--cyan)}#url-input.error{border:2px solid var(--error)}#url-input.error::placeholder{color:var(--error);font-weight:600}.error-msg{color:var(--error);position:absolute;top:5rem;left:7.5%;font-style:italic}.shorten{padding:1rem;margin:0;background-color:var(--cyan);border:none;border-radius:5px;color:#fff;font-weight:800;font-size:min(2.25vw,16px);width:20%;cursor:pointer;transition:background-color .2s;display:flex;justify-content:center;align-items:center}.shorten:hover{background-color:var(--translucent-cyan)}.all-results{width:100%}.result{margin-top:1rem;background-color:#fff;align-self:center;border-radius:5px;width:87%;position:relative;left:5vw;display:flex;justify-content:space-between;padding:1rem}.links-hr{display:none}.result div{display:flex;gap:1rem;align-items:center}.short-url{color:var(--cyan);font-weight:700;font-size:16px}.copy{border:none;background-color:var(--cyan);color:#fff;font-weight:700;font-size:16px;width:6rem;height:3rem;border-radius:5px;cursor:pointer}.copy:hover{background-color:var(--translucent-cyan)}.copy.copied{background-color:var(--dark-violet)}.features-section{padding:5rem;display:flex;flex-direction:column;align-items:center;gap:4rem}.features-section .features-title{display:flex;flex-direction:column;gap:.1rem;text-align:center;align-items:center;width:30rem}.features-section .features-title h2{font-size:30px}.desc{justify-content:center;width:60%!important}.features{display:flex;gap:2rem}.feature{position:relative;background-color:#fff;border-radius:5px;padding:2rem}.icon{background-color:var(--dark-violet);width:fit-content;height:auto;padding:1rem;display:flex;justify-content:center;align-items:center;border-radius:50%;position:absolute;top:-3rem}.feature h4{font-size:18px;margin-bottom:0}.feature p{color:var(--grayish-violet)}#feature2{top:3rem}#feature3{top:6rem}.features-ribbon{position:relative;bottom:11rem;z-index:-1;border:3px solid var(--cyan)}.boost{background:url(/images/bg-boost-desktop.svg);background-color:var(--dark-violet);height:15rem;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center}.boost h2{font-size:28px}footer{background-color:var(--darker-violet);color:#fff;display:flex;align-items:baseline;justify-content:space-around;padding:5rem 3vw}.footer-icons{display:flex;gap:1rem}.footer-icon{cursor:pointer}.footer-title>div>*{cursor:pointer;color:var(--light-gray)}.links-title{font-weight:700}.link:hover{color:var(--cyan)}#facebook:hover>path{fill:#1a56ef}#x:hover>path{fill:#28a7d2}#pintrest:hover>path{fill:red}.footer-icon .icon-fill-gradient{opacity:0;transition:opacity .3s ease}.footer-icon:hover .icon-fill-gradient{opacity:1}.footer-icon .icon-fill-base{transition:opacity .3s ease}.footer-icon:hover .icon-fill-base{opacity:0}footer.attribution a{color:var(--cyan)}@media (max-width: 1000px){nav{padding:1rem 2rem}.hero{padding:2rem}.nav-start,.links{gap:1.5rem}.features-section{padding:5rem 2rem}.features-section .features{gap:1rem}.feature{padding:2rem 1rem}.feature>h4{font-size:16px!important}.feature>p{font-size:12px}}@media (max-width: 840px){.result{flex-direction:column;align-items:stretch;text-align:left;gap:.1rem;justify-content:center;padding:1rem}.all-results{width:99%}.links-hr{display:block;width:100%;border-color:var(--light-gray)}.result>div{flex-direction:column;align-items:stretch;gap:.1rem}.copy{width:100%}}@media (max-width: 768px){.nav-start{width:100vw;justify-content:space-between}.ham-btn{justify-self:flex-end}.hero,.hero-txt{flex-direction:column;gap:2rem;align-items:center;text-align:center}.hero-img{width:100vw}.hero-txt{order:1}.features-section .features-title p{font-size:13px;justify-content:center;width:80%}.features{flex-direction:column;gap:4rem}.feature{display:flex;flex-direction:column;align-items:center;text-align:center}.feature>h4{font-size:20px!important}.feature>p{font-size:16px}.features-ribbon{transform:rotate(90deg);position:absolute;width:40rem;bottom:30rem}footer{flex-direction:column;align-items:center;text-align:center;gap:1rem;padding:3rem}}@media (max-width: 590px){.form-container{background:url(/images/bg-shorten-mobile.svg);background-size:cover;background-position:center;background-color:var(--dark-violet);height:12rem}.url-form{flex-direction:column;gap:3rem}#url-input{width:75vw}.error-msg{left:5%;top:4rem}.shorten{width:82vw;padding:1rem;font-size:20px}.all-results{width:97%}.boost{background:url(/images/bg-boost-mobile.svg);background-size:cover;background-color:var(--dark-violet)}}@media (max-width: 420px){.boost h2{font-size:24px}.all-results{width:94%}}