main {
margin: auto;
}
body {
    display: flex;
    background-image: url(images/pattern-background-desktop.svg);
    background-color: hsl(225, 100%, 94%);
    background-repeat: repeat-x;
    font-family: 'Red Hat Display', sans-serif;
    
    
    
   
}

p {
    font-size: 16px;
    font-weight: 500;
    text-align: center;
}
.container {
    width: 450px;
    height: 690px;
    background-color: rgb(250, 254, 255);
    box-shadow: 0px 40px 40px -20px rgba(13, 48, 189, 0.151826); 
    margin: auto;
    position: relative;
    top : 80px;
    border-radius: 20px;
    
      
}
.img1 {
    position: absolute;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
   
}
.text {
    text-align: center;
    position: relative;
    top: 260px;
    font-weight: 900;
    
    
    
}
.payment-plan {
    margin: auto;
    width: 350px;
    height: 100px;
    background-color: hsl(225, 100%, 98%);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    
   
    
    
}
.payment-plan svg {
    position: relative;
    right: 60px;
    top: 25px;
}
.annual {
    position: relative;
    right: 45px;
    top: 10px;
    font-weight: 900;
   line-height: 1.625;
   

}
.pricing {
    display: block;
    position: relative;
    top: 10px;
    right: 45px;
    line-height: 1.625;
    font-weight: 500;
    
}

.change {
    
        font-size: 0.875rem;
        font-weight: 700;
        color: hsl(245, 75%, 52%);
       position: relative;
       top: 40px;
       left: 50px;
       font-weight: 700;
        
      }
       .change:hover {
        color:  hsl(245, 75%, 52%);
        text-decoration: none;
    
}
.button {
   margin: auto;
   position: relative;
   top: 20px;

}
.btn-payment {
    width: 75%;
    background-color: hsl(245, 75%, 52%);
    padding: 14px 0;
    margin: 25px auto;
    border-radius: 11px;
    box-shadow: 0px 20px 20px rgba(56, 42, 225, 0.190291);
    cursor: pointer;
    color: white;
    font-weight: 900;
    border: 0px ;
}
.btn-payment:hover {
    background-color:  hsl(224, 23%, 55%);
}

.btn-cancel {
   background-color: white;
   display: block;
   margin: auto;
   border: 0;
   font-weight: 900;
   color: hsl(224, 23%, 55%);
   position: relative;
   top: 15px;
   cursor: pointer;
}
.attribution {
    position: absolute;
    bottom: 0;
    left: 40%;
    font-weight: 900; 
}
