html{
    height: 100%;
    font-family: 'Red Hat Display', sans-serif;
    font-size: 16px;

    /* Primary colours */
    --paleblue: hsl(225, 100%, 94%);
    --brightblue: hsl(245, 75%, 52%);

    /* Neutral colours */
    --verypaleblue: hsl(225, 100%, 98%);
    --desaturatedblue: hsl(224, 23%, 55%);
    --darkblue: hsl(223, 48%, 24%);
}
@media only screen and (min-width: 375px) {
    body{
        background-color: var(--paleblue);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
    }

    .container{
        margin: 15px;
    }

    .hero-image img{
        width: 100%;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

    main{
        background-color: white;
        border-radius: 20px;
        padding-bottom: 20px;
        box-shadow: 0px 10px 20px 5px rgba(56,41,224,0.1);
    }

    .header-wrapper{
        color: var(--darkblue);
        font-weight: 900;
        text-align: center;
        font-size: 1.3rem;
    }

    .paragraph-wrapper{
        color: var(--desaturatedblue);
        font-weight: 500;
        text-align: center;
        width: 84%;
        margin-left: auto;
        margin-right: auto;
    }

    .subscription-details{
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background-color: var(--verypaleblue);
        width: 85%;
        margin-left: auto;
        margin-right: auto;
        border-radius: 20px;
        color: var(--brightblue);
        font-size: 0.9rem;
        font-weight: 900;
        padding: 15px;
        margin-top: 30px;
    }

    .plan-wrapper{
        font-size: 0.9rem;
        color: var(--desaturatedblue);
        font-weight: 500;
    }
    .plan-wrapper h3{
        color: var(--darkblue);
        font-weight: 900;
    }
    .plan-wrapper h3, .plan-wrapper p, .proceed-btn p{
        margin: 0;
    }

    .change-link{
        margin-left: 20px;
    }

    .proceed-btn{
        text-align: center;
        background-color: var(--brightblue);
        width: 85%;
        margin-left: auto;
        margin-right: auto;
        color: var(--verypaleblue);
        font-weight: 700;
        border-radius: 10px;
        padding: 15px;
        margin-top: 20px;
        font-size: 0.9rem;
        box-shadow: 0px 10px 20px 5px rgba(56,41,224,0.2);
        box-sizing: border-box;
    }

    .cancel-btn{
        text-align: center;
        color: var(--desaturatedblue);
        font-weight: 900;
    }
}

@media only screen and (min-width: 1440px){
    body{
        background-image: url(/images/pattern-background-desktop.svg);
        background-repeat: no-repeat;
        background-size: contain;
    }

    .container{
        width: 35%;
    }
    main{
        width: 75%;
        margin-left: auto;
        margin-right: auto;
    }
}