/* 
Order summary
Dirk Vermeulen
(c) 2021
 */
 /* Variables */
 :root{
    /* primary */
    --pale-blue: hsl(225, 100%, 94%);
    --bright-blue: hsl(245, 75%, 52%);

    /* Neutral */
    --very-pale-blue: hsl(225, 100%, 98%);
    --desaturated-blue: hsl(224, 23%, 55%);
    --dark-blue: hsl(223, 47%, 23%);
    --overlay:hsl(245, 70%, 65%);


    /* Font */
    --font: 'Red Hat Display', sans-serif; /* 500, 700, 900 */
 }



/* General grid */
body{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient:vertical;
    -webkit-box-direction:normal;
        -ms-flex-direction:column;
            flex-direction:column;
    -ms-flex-line-pack: stretch;
        align-content: stretch;
    height:100vh;
}
main{
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -ms-flex-flow: column;
        flex-flow: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-line-pack:center;
        align-content:center;
    margin:auto;
    
}
footer{
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
}

/* ** Layout mobile ** */

/* Body */
body{
    background-color: var(--pale-blue) ;
    background-image: url(../images/pattern-background-mobile.svg);
    background-repeat: no-repeat;
    background-size: 100% 194px;
    font-family: var(--font);
    font-size: 16px;
}

/* Main */
main .container{
    width:280px;
    display: inline-block;
    background-color:white;
    background-image:url(../images/illustration-hero.svg);
    background-repeat:no-repeat;
    background-position-x: center;
    background-size: 100% auto;
    border-radius:20px;
    padding:195px 25px 35px 25px;
    box-shadow: 0 10px 20px hsl(224, 23%, 80%);
}
main .container h1{
    font-weight: 900;
    font-size: 1.4em;
    text-align:center;
    color: var(--dark-blue);
}

main .container .description{
    color:var(--desaturated-blue);
    text-align: center;
    padding: 25px 0px;
    line-height: 1.5em;
}

main .container .plan{
    background-color:var(--very-pale-blue);
    background-image:url('../images/icon-music.svg');
    background-repeat: no-repeat;
    background-position: 15px center;
    border-radius: 10px;
    height:80px;
    padding:0 15px 0 85px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient:horizontal;
    -webkit-box-direction:normal;
        -ms-flex-direction:row;
            flex-direction:row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

main .container .plan .choice{
    color:var(--desaturated-blue);
    line-height: 1.5em;
    font-size:0.9em;
    width:150px;
}

main .container .plan .choice .text{
    color:var(--dark-blue);
    font-weight: 900;
}
main .container .plan .change{
    font-size:0.9em;
    font-weight:700;
    text-align:right;
}
main .container .plan .change a{
    color:var(--bright-blue);
    -webkit-transition: all 0.5s ease-in-out;
    transition:all 0.5s ease-in-out;
}
main .container .plan .change a:hover,
main .container .plan .change a:focus{
    color:var(--overlay);
    text-decoration: none;
}
main .container .actions{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-line-pack: stretch;
        align-content: stretch;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
main .container .actions a{
    /* display:block; */
    text-align:center;
    text-decoration: none;
}
main .container .actions a.proceed{
    margin:24px 0px 25px;
    padding:18px 0;
    border-radius: 10px;
    background-color: var(--bright-blue);
    color:white;
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0px 20px 20px hsl(245, 40%, 90%);
    -webkit-transition: background-color 0.5s ease-in-out;
    transition:background-color 0.5s ease-in-out;
}
main .container .actions a.proceed:hover,
main .container .actions a.proceed:focus{
    background-color:var(--overlay);
}

main .container .actions a.cancel{
    color: var(--desaturated-blue);
    font-weight: 900;
    font-size:0.9em;
}
main .container .actions a.cancel:hover,
main .container .actions a.cancel:focus{
    color:var(--dark-blue);
}

/* Footer */
footer.attribution { font-size: 11px; text-align: center; }
footer.attribution a { color: hsl(228, 45%, 30%); }

/* Desktop layout */

@media screen and (min-width:537px) {
    main .container{
        width:350px;
        padding:272px 50px 50px 50px;
    }
    main .container h1{
        font-size: 1.7em;
    }
    main .container .description{
        font-size: 1.1em;
        padding: 20px 30px;
    }
  
    main .container .plan .choice{
        line-height: 1.5em;
        font-size:1.05em;
        width:150px;
    }
    main .container .plan{
        height:100px;
        padding: 0 15px 0 105px;

    }
    main .container .actions a.cancel{
        font-size:1em;
    }
}