body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
 }
 .main{
     font-family: "Karla", sans-serif;
     color: white;
     background-color: rgb(238, 229, 238);
     max-width: 100%;
     height: 100%;
     border-radius: 10px;
     display: flex;
     flex-direction: column;
     box-shadow: 0 0 5px rgb(189, 223, 189);
 }
 .container-1{
     border-radius: 10px 10px 0 0;
     padding: 30px;
 }
 .join{
     color: hsl(179, 62%, 43%);
 }
 .hassle-free{
     color: hsl(71, 73%, 54%);
     padding-left: 3px;
 }
 .gain{
     color: black;
 }
 .container{
   display: flex;
   justify-content: left;
   flex-direction: row;
   border-radius: 0 0 10px 10px;
 }
 .container-2{
     background-color: rgb(39, 177, 196);
     flex: 1;
     padding: 20px;
     text-align: left;
     border-radius: 0 0 0 10px;
 }
 .monthly{
     padding-top: 2%;
 }
 .dollar span{
    font-size: 0.7rem;
    color: lightgray;
 }
 .sign{
     background-color: hsl(71, 73%, 54%);
     color: white;
     width: 80%;
     padding: 11px;
     border-radius: 6px 6px 6px 6px;
     border: none;
 }
 .container-3{
     background-color: rgb(54, 180, 180);
     flex: 100%;
     padding: 20px;
     text-align: left;
     flex: 1;
     border-radius: 0 0 10px 0;
 }
 
 
 
 @media (max-width: 375px){
 
     .container-1{
         width: 63.9%;
         border-top-left-radius: 0.3rem;
         border-top-right-radius: 0.3rem;
         background-color: rgb(238, 229, 238);
     }
     .join{
         padding: 30px 30px 5px;
         font-size: 24px;
         line-height: 44px;
         color: hsl(179, 62%, 43%);
         font-family: "Karla";
     }
     .hassle-free{
         padding: 20px 30px 20px;
         font-size: 16px;
         line-height: 34px;
         color: hsl(71, 73%, 54%);
         font-family: "Karla";
     }
     .gain{
         padding: 0px 30px 20px;
         font-size: 14px;
         line-height: 22px;
         color: black;
         font-family: "Karla";
     }
     .container{
         width: 100%;
         display: grid;
     }
     .container-2{
         width: 100%;
         background-color: rgb(39, 177, 196);
         padding: 30px 10px 25px;
         border-radius: 0rem;
     }
     .monthly{
         padding: 2px 20px 10px;
         font-size: 16px;
         line-height: 34px;
         color: white;
         font-family: "Karla";
     }
     .dollar{
         padding: 2px 20px 10px;
         font-size: 20px;
         line-height: 34px;
         color: white;
         font-family: "Karla";
     }
     .per{
         padding: 2px 2px 1px;
         font-size: 12px;
         line-height: 34px;
         color: lightgray;
         font-family: "Karla";
     }
     .full{
         padding: 2px 20px 10px;
         font-size: 16px;
         line-height: 34px;
         color: white;
         font-family: "Karla";
     }
     .sign{
         font-size: 16px;
         line-height: 34px;
         background-color: hsl(71, 73%, 54%);
         color: white;
         border: none;
         font-family: "Karla";
         border-radius: 6px 6px 6px 6px;
         width: 80%;
         padding: 3px;
         text-align: left;
         margin-left: 20px;
         text-align: center;
     }
     .container-3{
         width: 100%;
         background-color: rgb(54, 180, 180);
         padding: 30px 10px 5px;
         border-bottom-right-radius: 0.3rem;
         border-bottom-left-radius: 0.3rem;
     }
     .why{
         padding: 2px 20px 10px;
         font-size: 24px;
         line-height: 34px;
         color: white;
         font-family: "Karla";
     }
     .tutorials{
         padding: 2px 20px 10px;
         font-size: 14px;
         line-height: 34px;
         color: white;
         font-family: "Karla";
     }
     
 }