@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');


.classCode {
   box-sizing: border-box;
   font-family: "Open Sans", sans-serif;
   background-color: #60a9ff;
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
}

h2 {
   font-family: "Open Sans", sans-serif;
   font-size: 22px;
}

ul {
   list-style: none;
}

/* Styling - Small to Large */
/* so set the styling for smaller screens */
.panel {
   background-color: #f4f4f4;
   border-radius: 15px;
   padding: 15px 25px;
   width: 100%;
   max-width: 960px;
   display: flex;
   flex-direction: column;
   text-align: center;
   text-transform: uppercase;
}

.pricing-plan {
   border-bottom: 3px solid #cbdae7;
}

.pricing-plan:last-child {
   border-bottom: none;
}

.pricing-img {
   margin-bottom: 25px;
   max-width: 100%;
}

.pricing-header {
   color: #888;
   font-weight: 600;
   letter-spacing: 1px;
}

.pricing-features {
   margin: 40px 0 25px;
   color: #016ff9;
}

.pricing-features-item {
   font-weight: 600;
   letter-spacing: 1px;
   font-size: 12px;
   line-height: 1.5;
   padding: 15px 0;
   border-top: 3px solid #cbdae7;
}

.pricing-features-item:last-child {
   border-bottom: 1px solid #cbdae7;
}

.pricing-price {
   color: #016ff9;
   display: block;
   font-size: 32px;
   font-weight: 700;
}

.pricing-button {
   border: 2px solid #9dd1ff;
   border-radius: 10px;
   color: #348efe;
   display: inline-block;
   padding: 15px 35px;
   text-decoration: none;
   margin: 25px 0;
   transition: background-color 200ms ease-in-out;
}

.pricing-button:hover,
.pricing-button:focus {
   background-color: #e1f1ff;
}


.pricing-button.is-featured {
   background-color: #48aaff;
   color: white;
}

.pricing-button.is-featured:hover,
.pricing-button.is-featured:focus {
   background-color: #137dda;
   color: white;
}


/* adding media breakpoints and styling */
/* for larger screens */
@media (min-width: 900px) {
   .panel {
      flex-direction: row;
   }

   .pricing-plan {
      border-bottom: none;
      border-right: 3px solid #cbdae7;
      padding: 25px 50px;
   }

   .pricing-plan:last-child {
      border-right: none;
   }
}