:root{--cyan: hsl(180, 66%, 49%);--darkViolet: hsl(257, 27%, 26%);--red: hsl(0, 87%, 67%);--gray: hsl(0, 0%, 75%);--grayishViolet: hsl(257, 7%, 63%);--veryDarkBlue: hsl(255, 11%, 22%);--veryDarkViolet: hsl(260, 8%, 14%);--lightGrayish: hsl(230, 25%, 95%)}*{margin:0;padding:0}#root{background:linear-gradient(to bottom,#ffffff 20%,hsl(0deg,0%,92%) 80%);font-family:Poppins,sans-serif}button{background-color:var(--cyan);padding:15px;color:#fff;border:none;font-weight:700;border-radius:30px;cursor:pointer;margin:5px}button:hover{box-shadow:inset 0 0 100px 100px #ffffff1a}header{height:5%;display:grid;grid-template-columns:-webkit-max-content 2fr;grid-template-columns:max-content 2fr;align-items:center;align-content:center;gap:40px;padding-top:10px;margin:0 4%}header div{display:flex;flex-direction:row;justify-content:space-between;align-items:center;color:gray;font-weight:600}header div ul{display:flex;flex-direction:row;gap:20px;list-style-type:none}header div ul li{cursor:pointer}header div div{display:flex;flex-direction:row;gap:10px;align-items:center}header div div #login{background-color:transparent;color:#000;color:gray;font-weight:600;padding:0}header div div #signUp{padding:15px 25px}header .hamburgerMenu{display:flex;flex-direction:column;align-items:flex-end;margin-left:0;width:32%}header .hamburger{cursor:pointer;transition:transform .3s ease-in-out}header .hamburger.open{transform:rotate(45deg);transition:transform .6s ease-in-out}header .mobile-menu{position:absolute;top:2.5rem;display:flex;flex-direction:column;background-color:var(--darkViolet);color:#fff;width:25%;gap:20px;padding:10px;margin-left:0}header .mobile-menu ul,header .mobile-menu div{display:flex;flex-direction:column;gap:5px;align-items:flex-end}header .mobile-menu ul{font-size:.8rem}header .mobile-menu span{font-size:.8rem}header .mobile-menu ul,header .mobile-menu span{cursor:pointer;color:#fff}main{height:80%;display:flex;flex-direction:column;gap:5rem}main .description{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:100px;margin:0 4%}main .description h2{font-weight:800;font-size:3rem}main .description p{font-size:1.4rem;color:gray;max-width:600px}main .description button{padding:15px 35px}main .description img{width:50%}main .statistics{display:flex;flex-direction:column;gap:20px;justify-content:center;align-items:center;text-align:center}main .statistics h2{font-weight:600;font-size:1.6rem}main .statistics p{font-weight:500;font-size:1rem;color:gray;max-width:400px}main .features{display:flex;flex-direction:row;align-items:center;justify-content:center}main .features div{background-color:#fff;padding:20px;border-radius:5px;max-width:400px}main .features div h2{padding-top:10px}main .features div .icon{background-color:var(--darkViolet);padding:20px;border-radius:50%;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;max-width:45px;position:absolute;display:flex;align-items:center;justify-content:center;top:-4rem}main .features .line{background-color:var(--cyan);border:0;border-radius:0;padding:4px 15px}main .features .recognition{position:relative}main .features .records{position:relative;top:2rem}main .features .customizable{position:relative;top:4rem}main .boost{background-color:var(--darkViolet);background-image:url(./bg-boost-desktop-05593952.svg);background-repeat:no-repeat;background-size:cover;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px 0;gap:20px}main .boost h2{color:#fff;font-weight:600;font-size:1.8rem}main .boost button{padding:15px 30px}main .shorter{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px;margin:0 4%}main .shorter form,main .shorter .linksList{width:100%}main .shorter form{display:flex;flex-direction:row;gap:10px;background-color:var(--darkViolet);background-image:url(./bg-shorten-desktop-d119628f.svg);background-repeat:no-repeat;background-size:cover;padding:30px 10px;border-radius:8px;align-items:center;justify-content:center}main .shorter form input{background-color:#fff;border-radius:5px;border:1px solid black;text-indent:10px;outline:0;font-size:1rem;padding:15px;font-weight:600;width:88%}main .shorter form .invalid{border:1px solid var(--red);color:var(--red)}main .shorter form .invalid::-moz-placeholder{color:var(--red);opacity:1}main .shorter form .invalid:-ms-input-placeholder{color:var(--red);opacity:1}main .shorter form .invalid::placeholder{color:var(--red);opacity:1}main .shorter form button{border-radius:5px;padding:15px}main .shorter .linksList{display:flex;flex-direction:column;gap:10px}main .shorter .linksList .link{display:flex;flex-direction:row;background-color:#fff;border:1px solid lightgray;align-items:center;justify-content:space-between;border-radius:5px;font-weight:700;padding:10px 30px}main .shorter .linksList .link a{text-decoration:none}main .shorter .linksList .link hr{display:none}main .shorter .linksList .link div{display:flex;flex-direction:row;gap:15px;align-items:center}main .shorter .linksList .link .originalLink{color:#000}main .shorter .linksList .link .shortLink{color:var(--cyan)}main .shorter .linksList .link button{border-radius:5px;padding:10px 20px}footer{height:15%;background-color:var(--veryDarkViolet);color:var(--lightGrayish);padding:2%;display:grid;grid-template-columns:1.5fr 2fr 1fr}footer li:hover{cursor:pointer;color:var(--cyan)}footer .importantLinks{display:flex;flex-direction:row;gap:80px}footer .importantLinks div{display:flex;flex-direction:column;gap:30px}footer .importantLinks div ul{list-style:none;display:flex;flex-direction:column;gap:15px}footer .socials{display:flex;flex-direction:row;gap:20px;list-style-type:none;align-items:center}footer .socials .icon{display:block;height:24px;width:24px;color:#fff;cursor:pointer}footer .socials .icon:hover{color:#0ff}@media only screen and (max-width: 1200px){footer .importantLinks{padding:0 15px}}@media only screen and (max-width: 800px){header{display:flex;flex-direction:row;align-items:center;justify-content:space-between}header .hamburger{cursor:pointer}main .description{display:flex;flex-direction:column-reverse;align-items:center;justify-content:center;text-align:center;gap:15px}main .description img{width:70%}main .features{display:flex;flex-direction:column;gap:0;margin:30px 0}main .features div{text-align:center}main .features .line{background-color:var(--cyan);border:0;border-radius:0;padding:60px 4px}main .features .recognition,main .features .records,main .features .customizable{margin:0 4%}main .features .records,main .features .customizable{top:0}main .features .icon{padding:20px;top:-4rem;left:40%}main .shorter{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px}main .shorter form{display:flex;flex-direction:column;align-items:center;gap:10px;padding:40px;width:75%}main .shorter form input{padding:0;font-size:.9rem}main .shorter form .invalid{font-size:.7rem}main .shorter form button,main .shorter form input{padding:10px;width:90%}main .shorter .linksList{display:flex;flex-direction:column;width:88%;gap:10px;padding:10px}main .shorter .linksList .link{flex-direction:column;gap:5px}main .shorter .linksList .link hr{display:block;width:100%}main .shorter .linksList .link a{text-decoration:none}main .shorter .linksList .link div{flex-direction:column;gap:5px}main .shorter .linksList .link button{border-radius:5px;padding:10px 20px;width:80%}footer{display:flex;flex-direction:column;gap:40px;justify-content:center;align-items:center;padding:20px 0}footer .importantLinks{flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:15px}}@media only screen and (max-width: 600px){main .description{gap:10px}main .description h2{font-size:1.5rem}main .description p{font-size:.9rem}main .shorter form{padding:20px;border-radius:8px;width:75%}main .shorter input,main .shorter button{padding:10px 0}main .features .icon{position:relative;padding:20px;top:-4rem}main .boost{text-align:center}main .boost h2{color:#fff;font-weight:600;font-size:1.8rem}main .boost button{padding:15px 30px}}