@font-face {
   font-family: "poppins";
   src: url("font/Poppins-Medium.woff") format("woff");
}

@font-face {
   font-family: "poppins", sans-serif;
   src: url("font/Poppins-Bold.woff") format("woff");
}

:root {
   --Gray: hsl(0, 0%, 75%);
   --Grayish-Violet: hsl(257, 7%, 63%);
   --Very-Dark-Blue: hsl(255, 11%, 22%);
   --Very-Dark-Violet: hsl(260, 8%, 14%);

   --Cyan: hsl(180, 66%, 49%);
   --Dark-Violet: hsl(257, 27%, 26%);

   --Red: hsl(0, 87%, 67%);
   --pry-radius: 30px;

   --debugger: 1px solid#000;
}

*,
*::before,
*::after {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
}

body {
   font-family: poppins, sans-serif;
   font-size: 18px;
}

a {
   display: inline-block;
   text-decoration: none;
   text-transform: capitalize;
   color: var(--Grayish-Violet);
   padding: 0.5em;
}

h1, h2, h3 {
   color: var(--Very-Dark-Violet);
   margin-bottom: 1rem;
   font-weight: 700;
}

p {
   color: var(--Grayish-Violet);
   margin-bottom: 2rem;
}

ul {
   list-style: none;
}

li {
   margin-bottom: 1rem;
}

img {
   max-width: 100%;
}

.get-started {
   background-color: var(--Cyan);
   padding: 0.5em 1.5em;
   border-radius: var(--pry-radius);
   color: #fff;
}




/* Header styles */

.banner {
   background-image: url("images/illustration-working.svg");
   background-repeat: no-repeat;
   background-position: -35px 70px;
   position: relative;
   padding: 2em 1em 4em 1em;
}

.banner > .banner-logo {
   position: relative;
}

.banner #toggler {
   position: absolute;
   top: 0;
   right: 0;
   width: 30px;
   height: 20px;
   z-index: 2;
   opacity: 0;
   cursor: pointer;
}

.banner .hamburger {
   position: absolute;
   top: 0;
   right: 0;
   width: 30px;
   height: 30px;
   z-index: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: transform 400ms ease;
}

.banner .hamburger::before,
.banner .hamburger::after {
   content: "";
   position: absolute;
   top: 7px;
   left: 0;
   width: 100%;
   height: 3px;
   background-color: var(--Grayish-Violet);
   border-radius: 5px;
   transition: transform 400ms ease;
}

.banner .hamburger::after {
   top: 20px;
}

.banner .hamburger > div {
   height: 3px;
   width: 100%;
   background-color: var(--Grayish-Violet);
   border-radius: 5px;
   transition: transform 500ms ease-out;
}

.banner #toggler:checked + .hamburger::before {
   transform: rotate(40deg) translateY(8px);
}

.banner #toggler:checked + .hamburger::after {
   transform: rotate(-40deg) translateY(-9px);
}

.banner #toggler:checked + .hamburger > div {
   transform: scale(0);
}

.banner .main-links {
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   background-color: var(--Dark-Violet);
   border-radius: 10px;
   text-align: center;
   height: 0;
   overflow: hidden;
   transition: height 250ms ease;
}

.banner .main-links > ul {
   padding: 1.5em;
}

.banner .main-links a {
   color: #fff;
}

.banner .main-links li:nth-of-type(3) {
   border-bottom: 1px solid var(--Grayish-Violet);
   padding-bottom: 1em;
}

.banner .main-links li:last-of-type {
   background-color: var(--Cyan);
   border-radius: var(--pry-radius);
}

.banner #toggler:checked ~ .main-links {
   height: 380px;
}

.banner > .banner-text {
   padding: 28em 0 4em 0;
   text-align: center;
}

.banner > .banner-text > h1 {
   font-weight: 700;
   margin-bottom: 1rem;
}



/* Main Styles */

main {
   background-color: #DFE3EEaf;
   padding: 2em 2em 0 2em;
   position: relative;
   text-align: center;
}

main > .url {
   width: calc(100% - 3em);
   position: absolute;
   top: 0;
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 1.5em;
   background-color: var(--Dark-Violet);
   background-image: url("images/bg-shorten-mobile.svg");
   background-repeat: no-repeat;
   background-position: right;
   border-radius: 5px;
}

main .url-wrapper {
   display: flex;
   flex-direction: column;
   gap: 10px;
   border-radius: 5px;
}

main .url-wrapper > input,
main .url-wrapper > button {
   padding: 0.5em 1em;
   border: none;
   border-radius: 5px;
   color: var(--Grayish-Violet);
   font-family: inherit;
   font-size: inherit;
}

main .url-wrapper > button {
   background-color: var(--Cyan);
   color: #fff;
   cursor: pointer;
}

main .error-message {
   display: none;
   position: absolute;
   bottom: -30px;
   left: 10;
}

main .active {
   display: block;
   color: red; 
   animation: fleet 2s ease;
}

@keyframes fleet {
   0% {
      opacity: 0;
      transform: translateX(-3rem);
   }

   100% {
      opacity: 1;
      transform: translateX(0);
   }
}

main > .result-wrapper {
   margin-top: 3rem;
   border-radius: 5px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   background-color: #fff;
   font-size: 16px;
   text-align: left;
   padding: 1em;
}

main > .result-wrapper > span:nth-child(1) {
   border-bottom: 1px solid #DFE3EEaf;
   padding-bottom: 0.5em;
}

main > .result-wrapper > span:nth-child(2) {
   color: var(--Cyan);
   padding: 0.5em 0;
}

main > .result-wrapper > button {
   border: none;
   padding: 0.7em 2em;
   font-family: inherit;
   border-radius: inherit;
   color: #fff;
   background-color: var(--Cyan);
   cursor: pointer;
}

main > .statistics {
   padding-top: 7em;
}

main > .statistics > .statistics-title {
   margin-bottom: 6rem;
}

main > .statistics .division {
   background-color: #fff;
   border-radius: 5px;
   padding: 4em 2em 1em 2em;
   margin-bottom: 6rem;
   position: relative;
}

main > .statistics .division:not(:last-child)::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
   height: 50%;
   width: 8px;
   background-color: var(--Cyan);
}

main > .statistics .division > img {
   background-color: var(--Dark-Violet);
   display: inline-block;
   width: 80px;
   height: 80px;
   padding: 20px;
   border-radius: 50%;
   position: absolute;
   top: 0;
   left: 50%;
   transform: translate(-50%, -50%);
}

main > .boost {
   background-color: var(--Dark-Violet);
   background-image: url("images/bg-boost-mobile.svg");
   background-repeat: repeat-x;
   padding: 4em 0;
   margin: 0 -2em;
   color: #fff;
}

main > .boost h2 {
   color: #fff;
}


/* Footer */

footer {
   background-color: var(--Very-Dark-Violet);
   text-align: center;
}

footer > div:not(:last-child) {
   margin-bottom: 1.5rem;
   display: flex;
   flex-direction: column;
   align-items: center;
}

footer > .logo-wrapper {
   padding: 3em 0 2em 0;
   display: inline-block;
   margin-bottom: 0;
}

footer > div > h1 {
   color: #fff;
   font-size: 18px;
   margin-bottom: 1.5rem;
}

footer > div > a {
   margin-bottom: 1rem;
   padding: 0;
}

footer > .social > a:not(:last-child) {
   margin-right: 20px;
}

footer > div > a:hover {
   color: var(--Cyan);
}


/* Media queries */

@media (min-width: 700px) and (max-width: 966px)  {
   body {
      font-size: 0.8rem;
   }
}

@media only screen and (min-width: 758px) {
   .banner {
      background-position: 550px;
      display: flex;
      flex-direction: column;
      padding: 2em 7em;
   }

   .banner > .banner-logo {
      display: flex;
      align-items: center;
   }

   .banner .logo-wrapper {
      margin-right: 40px;
   }

   .banner .main-links {
      width: 80%;
      position: initial;
      height: initial;
      background-color: initial;
   }

   .banner #toggler,
   .banner .hamburger {
      display: none;
   }

   .banner .main-links ul {
      width: 100%;
      display: flex;
      align-items: center; 
      padding: 0;
   }

   .banner .main-links li {
      padding: 0;
      margin-right: 25px;
   }

   .banner .main-links li:first-child {
      margin-left: auto;
   }

   .banner .main-links li:nth-of-type(3) {
      border: none;
      padding: 0;
   }

   .banner .main-links li:nth-last-of-type(2) {
      margin-left: auto;
   }

   .banner .main-links li:last-child {
      margin-right: 0;
   }

   .banner .main-links li:last-of-type a {
      padding: 0.5em 1.5em;
      color: #fff;
   }

   .banner .main-links a {
      padding: 0;
      color: var(--Grayish-Violet);
      font-weight: 700;
   }

   .banner .main-links a:hover,
   .banner .main-links a:focus {
      color: var(--Very-Dark-Violet);
   }

   .banner > .banner-text {
      font-size: 20px;
      padding: 10em 0;
      width: 30ch;
      flex-grow: none;
      text-align: initial;
   }

   /* Main Styles */
   
   main > .url {
      width: calc(100% - 13em);
      padding: 2em;
   }

   main .url-wrapper {
      flex-direction: row;
   }

   main .url-wrapper > input {
      width: 80%;
   }

   main .url-wrapper > button {
      width: 20%;
   }

   main > .result-wrapper {
      width: calc(100% - 9em);
      margin: 3rem auto;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 1em 2em;
   }

   main > .result-wrapper > span:nth-child(1) {
      border: none;
      padding: 0;
   }

   main > .result-wrapper > span:nth-child(2) {
      margin-left: auto;
      margin-right: 30px;
      padding: 0;
   }

   main > .statistics {
      padding: 4.5em;
   }

   main > .statistics > .statistics-title {
      width: 45ch;
      margin: 0 auto 6rem auto;
   }

   main .division-wrapper {
      text-align: left;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2em;
   }

   main > .statistics .division:nth-child(2) {
      top: 40px;
   }

   main > .statistics .division:not(:last-child)::after {
      display: none;
   }

   main > .statistics .division > img {
      left: 20%;
   }

   /* Footer styles */ 

   footer {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: initial;
   }

   footer > div {
      margin-left: 4rem;
      align-self: flex-start;
   }

   footer > div:not(:first-child) {
      padding-top: 3em;
   }

   footer > div > a,
   footer > div > h1 {
      margin-right: auto;
   }

}

@media (min-width: 1230px) {
   main .division-wrapper {
      display: flex;
   }

   main > .statistics .division:not(:last-child)::after {
      display: block;
      top: 50%;
      left: 125%;
      height: 8px;
      width: 50%;
   }

   main > .statistics .division:nth-child(3){
      top: 80px;
   }
}