styles.css

@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap");

:root {
  --Pale-blue: hsl(225, 100%, 94%);
  --Bright-blue: hsl(245, 75%, 52%);
  --Very-pale-blue: hsl(225, 100%, 98%);
  --Desaturated-blue: hsl(224, 23%, 55%);
  --Dark-blue: hsl(223, 47%, 23%);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* because of box sizing if we add some padding
       it will add that padding in the total size
       If you not add this element then the padding will
       add after the total width of card
    */
}

body {
  background-image: url(./images/pattern-background-desktop.svg);
  background-repeat: no-repeat;
  /* this will stop reapeating image after printing it once */
  background-size: cover;
  /* after this image will cover itself to the endings of the screen. */
  background-color: var(--Pale-blue);
  font-family: "Red Hat Display", sans-serif;
  font-size: 16px;
}

.card-container {
  padding: 0 20px;
}

.card {
  width: 450px;
  max-width: 100%;
  background-color: white;
  color: var(--Desaturated-blue);
  border-radius: 20px;
  overflow: hidden;
  /* This will hide the image part which is going 
       outside of the curved radius */
  margin: 50px auto;
}

.hero-image {
  width: 100%;
}

.title {
  color: var(--Dark-blue);
  font-weight: 900;
  font-size: 32px;
}

.container {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.container > * {
  /*  > * means please add this things to all the child classes
        which are in this parent class.
     */
  margin: 13px 0;
  /* 2 values meanse first 13 goes to top-bottom
        &  second 0 to left-right */
}

.order-description {
  line-height: 25px;
  max-width: 300px;
  margin: 0 auto;
  /* this indicates the spaces between each line. */
}

.plan-countainer {
  font-size: 16px;
  background-color: var(--Very-pale-blue);
  border-radius: 12px;
  padding: 25px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.plan-countainer strong {
  color: var(--Dark-blue);
}

.plan-countainer a {
  color: var(--Bright-blue);
  font-size: 13px;
  font-weight: 700;
}

.plan-countainer a:hover {
  opacity: 0.8;
  text-decoration: none;
}

.plan-description {
  line-height: 25px;
}

button {
  width: 100%;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
}

.proceed-button {
  background-color: var(--Bright-blue);
  padding: 1rem 0;
  color: white;
  box-shadow: 0 20px 30px -8px rgb(197, 189, 245);
}

.proceed-button:hover {
  opacity: 0.8;
  /* opacity meanse the transperancy of the element */
}

.cancel-button {
  background-color: white;
  /* same as the parent class card but button element have it's own color at the beginning
       so we have to specify it again.. */
  color: var(--Desaturated-blue);
  margin-top: 22px;
}

.cancel-button:hover {
  color: black;
}

.flex {
  display: flex;
  align-items: center;
  gap: 15px;
}