@import url("https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap");
:root {
   --Cyan: hsl(179, 62%, 43%);
   --Bright-Yellow: hsl(71, 73%, 54%);
   --Light-Gray: hsl(204, 43%, 93%);
   --Grayish-Blue: hsl(218, 22%, 67%);
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   list-style: none;
}

main {
   background-color: var(--Light-Gray);
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   font-family: "Karla", sans-serif;
   font-size: 1rem;
   /* border-radius:0.5rem; */
}

.container {
   width: 40rem;
   border-radius: 0.5rem;
   padding-top: 2rem;
   padding-bottom: 2rem;
   overflow: hidden;
}

.top-sec {
   background-color: white;
   padding: 2.5rem;
   border-radius: 0.5rem0.5rem 0 0;
   height: 13.5rem;
}

.top-sec .heading {
   font-size: 1.375rem;
   padding-bottom: 1.5rem;
   color: var(--Cyan);
}

.top-sec .mid-text {
   color: var(--Bright-Yellow);
   padding-bottom: 0.5rem;
   margin-top: 0.25rem;
   font-size: 1rem;
   font-weight: 700;
}

.top-sec .desc {
   color: var(--Grayish-Blue);
   margin-top: 0.25rem;
   line-height: 1.5;
}

.bot-sec {
   display: flex;
   width: 100%;
   height: 16.125rem;
   border-radius: 0 00.5rem0.5rem;
   overflow: hidden;
}

.left-sec {
   width: 50%;
   background-color: #2bb3b1;
   padding: 2.5rem;
}

.left-sec .subs-text {
   color: var(--Light-Gray);
   font-size: 1.125rem;
   font-weight: 700;
}

.left-sec .price-sec {
   display: flex;
   align-items: center;
   padding: 1.125rem 0;
   padding-bottom: 0.75rem;
}

.left-sec .price-sec .price {
   color: var(--Light-Gray);
   font-size: 28px;
   padding-right: 1rem;
}

.left-sec .price-sec p {
   color: var(--Light-Gray);
   color: #65cbcf;
}

.left-sec .desc-text {
   color: var(--Light-Gray);
   /* letter-spacing: -0.1px; */
}

.sign-up {
   border: none;
   background-color: var(--Bright-Yellow);
   height: 3rem;
   border-radius: 0.5rem;
   width: 100%;
   margin-top: 1.875rem;
   color: var(--Light-Gray);
   font-weight: 700;
   font-size: 1rem;
   cursor: pointer;
}

.right-sec {
   width: 50%;
   background-color: #4abebd;
   padding: 2.5rem;
}

.right-sec p {
   color: var(--Light-Gray);
   padding-bottom: 1.125rem;
   font-weight: 700;
   font-size: 1.125rem;
}

.right-sec .desc {
   line-height: 1.45;
   color: #a9edef;
   font-size: 0.875rem;
   padding-right: 3rem;
}

@media (min-width: 451px) and (max-width: 680px) {
   .container {
      width: 27rem;
   }

   .top-sec{
      height: auto;
   }

   .bot-sec {
      flex-direction: column;
      height: auto;
   }
   .left-sec,
   .right-sec {
      width: 100%;
   }
}

@media (max-width: 450px) {
   .container {
      width: 20rem;
      padding-top: 1rem;
      padding-bottom: 1rem;
   }

   .top-sec {
      padding: 1.375rem;
   }

   .top-sec .heading {
      font-size: 20px;
   }

   .top-sec .mid-text {
      font-size: 1rem;
   }

   .top-sec .desc {
      font-size: 0.875rem;
   }

   .bot-sec {
      flex-direction: column;
      height: auto;
   }

   .left-sec,
   .right-sec {
      width: 100%;
      padding: 1.375rem;
   }
}

.attribution {
   font-size: 11px;
   text-align: center;
   padding: 0.5rem 0;
}

.attribution a {
   color: hsl(228, 45%, 44%);
}