@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;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%);
}
*,*::before,*::after {
    box-sizing: border-box;
}
body {
    background: var(--Pale-blue) url(images/pattern-background-desktop.svg) no-repeat scroll center;
    background-size: initial;
    font-family: 'Red Hat Display', sans-serif;
    
}
.card {
    border-radius: 15px;
    -webkit-border-radius: 15px;
    border: none;
    background: rgba(255,254,254,255);
    color: rgba(36,52,82,255);
    width: 65vw;
    margin: 20vh auto;
    height: 600px; 
    box-shadow: 0 4px 10px 1px rgba(0,0,0,0.2);
    transition: 0.3s;

}


  
  /* On mouse-over, add a deeper shadow */
  .card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
  
  /* Add some padding inside the card container */
  .img-div {
    overflow: hidden;

  }
 .img-div .responsive-img {
     max-width: 100%;
     height: auto;
     border-radius: 15px 15px 0 0;
 }
 .description {
     display: flex;
     flex-flow: column wrap;
     justify-content: center;
     align-items: center;
     
 }
 .description .order {
     
     display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    
    }
    .order h2 {
        font-weight: 900;
    }
    .order p {
        padding: 0 30px;
        align-items: center;
        text-align: center;
        font-size: 16px;
        font-weight: lighter;
        color: var(--Desaturated-blue);
        
    }
    .description .price {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-flow: row nowrap;
        width: 80%;
        background-color: var(--Very-pale-blue);
        margin-bottom: 20px;
        padding: 15px 10px;
        border-radius: 10px;
        
        
    }
  .price .price-plan-text {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
  }
  .price-plan-text * {
      display: inline;
      margin: 0;
      padding: 0;
      line-height: 25px;
      
  }
  .price-plan-text > p {
      font-size: 15px;
      font-weight: 100;
      color: var(--Desaturated-blue);
  }
  
  .price > .change-btn {
      color: var(--Bright-blue);
      font-weight: bold;
      font-size: 14px;
  }


  .price > .change-btn:hover {
    text-decoration: none;
    color: var(--Desaturated-blue);
    
    
}


  .card .payment {
      display: flex;
      align-items: center;
      flex-flow: column wrap;
      width: 100%;
     

  }
  .payment > * {
      margin-bottom: 10px;
      width: 80%;
      padding: 10px;
      border: none;
      border-radius: 10px;
      height: 70%;
      font-size: 16px;
      font-weight: bold;
      background: white;
  }
  .blue-bg {
      background-color: var(--Bright-blue);
      color: white;
  }
  .blue-bg:hover {
      filter: saturate(0.4);
  }
  .payment .cancel-btn {
    color:hsl(224, 23%, 55%);
  }
  .payment .cancel-btn:hover {
      color: black;
  }
  @media only screen and (max-width: 375px) 
  { 
    body {
        background: var(--Pale-blue) url(images/pattern-background-mobile.svg);
        }
        .card {
            
            width: 90vw;
        }
}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ 
    .card {
            
        width: 30vw;
    }
}