@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap');
 body {
     background: url(images/pattern-background-desktop.svg) no-repeat;
     background-color: hsl(225, 100%, 94%);
     background-size: 100%;
     margin-bottom: 100px;
 }
 
 .attribution {
     font-size: 11px;
     text-align: center;
 }
 
 .attribution a {
     color: hsl(228, 45%, 44%);
 }
 
 .card_container {
     display: flex;
     justify-content: center;
     align-items: center;
 }
 
 .card {
     background: url(images/illustration-hero.svg) no-repeat;
     background-size: 100%;
     background-color: white;
     height: 600px;
     width: 380px;
     margin-top: 25vh;
     border-radius: 4%;
     text-align: center;
     font-family: 'Red Hat Display', sans-serif;
     font-weight: 900;
     color: hsl(223, 47%, 23%);
 }
 
 .head {
     background-image:
 }
 
 .title {
     margin-top: 240px;
 }
 
 .title h2 {
     font-weight: 900;
 }
 
 .main_text_block {
     width: 80%;
     text-align: center;
     margin-left: 40px;
 }
 
 .main_text p {
     font-weight: 500;
     font-size: 16px;
     opacity: .5;
 }
 
 .plan_block {
     display: flex;
     justify-content: space-around;
     margin-top: 40px;
     margin-right: 40px;
     margin-left: 40px;
 }
 
 .music img {
     height: 40px;
     width: 40px;
 }
 
 .plan_main p {
     margin-top: 0;
     margin-bottom: 0;
 }
 
 .plan_main {
     margin-right: 55px;
     height: 50px;
 }
 
 .up {
     font-weight: 700;
 }
 
 .bottom {
     opacity: .5;
     font-weight: 500;
 }
 
 .plan_change p {
     font-size: 16px;
     font-weight: 700;
     margin-top: 7px;
     margin-bottom: 0;
 }
 
 .plan_change:hover a {
     text-decoration: none;
     opacity: 0.6;
 }
 
 .btn {
     margin-top: 40px;
     font-family: 'Red Hat Display', sans-serif;
     font-weight: 700;
     background: hsl(245, 75%, 52%);
     color: white;
     border: none;
     border-radius: 10px;
     width: 80%;
     height: 45px;
     cursor: pointer;
 }
 
 .btn:hover {
     opacity: .7;
 }
 
 .cancel {
     margin-top: 20px;
 }
 
 .cancel a {
     font-size: 15px;
     text-decoration: none;
     opacity: .5;
     font-weight: 700;
 }
 
 .cancel:hover a {
     opacity: 1;
 }
 
 @media (max-width: 500px) {
     body {
         background: url(images/pattern-background-mobile.svg) no-repeat;
         background-size: 100%;
         background-color: hsl(225, 100%, 94%);
     }
     p {
         font-size: 14px;
     }
     .card {
         height: 600px;
         width: 320px;
     }
     .card_container {
         margin-bottom: 100px;
     }
     .plan_main {
         margin-top: 7px;
         margin-right: 25px;
     }
     .music img {
         width: 50px;
         height: 50px;
     }
     .plan_change {
         margin-top: 7px;
     }
 }