@import url('https://fonts.googleapis.com/css2?family=Sono:wght@200..800&display=swap');

body {
   font-family: "Sono", sans-serif;
}

hr {
   margin-top: 15px;
}

.pricing-container {
   margin: 50px 50px 100px 50px;
   display: flex;
   gap: 25px;
   justify-content: space-evenly;
   align-items: center;
}

.pricing-plan {
   padding: 30px;
   background-color: rgb(235, 235, 235);
   border: 1px solid #888;
   border-radius: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   /* flex: 1; tells all within this container to be flexile and have the same width */
   flex: 1;
   /* set a max-width for the items in this container */
   max-width: 300px;
}

.plan-title {
   height: 50px;
   font-family: "Sono", monospace;
   font-size: 1.5rem;
   font-optical-sizing: auto;
   font-weight: 600;
   font-style: normal;
   font-variation-settings:
     "MONO" 1;
}

.plan-price {
   font-family: "Sono", monospace;
   font-size: 2.25rem;
   font-optical-sizing: auto;
   font-weight: 700;
   font-style: normal;
   font-variation-settings:
     "MONO" 1;
}

.plan-features {
   font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
   font-size: 1.1rem;
   line-height: 2rem;
   list-style: none;
}

.plan-button {
   margin-top: 30px;
   padding: 8px 12px;
   border: 1px solid #888;
   border-radius: 10px;
   box-shadow: 3px 3px 10px #ccc;
   font-weight: 500;
   font-size: 1.05rem;
   background-color: brown;
   color: white;
}

.plan-button:hover {
   background-color: orangered;
   border: 1px solid #444;
   box-shadow: none;
}

.stuff {
   margin-top: 25px;
   font-size: .9rem;
   font-weight: 500;
   color: brown;
}


 /* Hint: What can you do with a media query and flexbox? */
 @media (max-width: 1100px) {
   .pricing-container {
      flex-direction: column;
      height: 100%;
   }
 }