style.css

/* custom google fonts */
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap');
/* custom colors */
:root{
    --pale_blue:hsl(225, 100%, 94%);
    --very_pale:hsl(225, 100%, 98%);
    --desaturated_blue: hsl(224, 23%, 55%);
    --dark_blue: hsl(223, 47%, 23%);
    --Bright_blue: hsl(245, 75%, 52%);
    --light_blue_shad: hsla(223, 47%, 23%, 0.034);
    --light_blue_shads: hsla(223, 47%, 23%, 0.096);
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

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

.background{
    background-image: url(images/pattern-background-desktop.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: var(--pale_blue);
}
 /* main container */
.main-container{
    position: absolute;    
    background-color:var(--very_pale);
    border-radius: 20px;
    width: 375px;
    height: 560px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 18px 8px var( --light_blue_shads);  
}

.vibes-img {
    width: 375px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
}

/* content section */
.content{
    margin-top: 2rem;
    text-align: center;
    padding:5px;
}
.content h1{
    font-size:1.5rem;
    font-weight: 900;
}
.content p{
    margin-top: 0.5rem;
    padding:0 1.5rem;
    font-size: 0.9rem;
    color:var(--desaturated_blue);
}
 /* plans section styling */
.plan {
    margin: 10px 40px 0 40px;
    background-color:var( --light_blue_shad);
    display: flex;
    align-items: center;
    border-radius: 10px;
    color: var(--desaturated_blue);
    font-size: 0.8em;
}

.plan div {
    color:var(--dark_blue);
    padding-top: 1.3em;
    font-weight: 700;
}

.normal{
    padding-bottom: 1.3em;
    font-weight: normal;
    color:var(--desaturated_blue);
}



.plan a{
    text-decoration: underline;
    color:var(--Bright_blue );
    margin-top: 50px;
    margin-left: 85px;
    font-size: 0.9em;
    font-weight: 900;
}
.plan a:hover{
    text-decoration: none;
    opacity: 0.7;
}

.plan img{
    padding: 1.2em;
}

/* payment styling */
.payment-btn {
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 20px;
    padding: 1.1em;
    background-color:var(--Bright_blue);
    border-radius: 10px;
    color:var(--very_pale);
    font-size: 0.8em;
    font-weight: 700;
    text-align: center;
    box-shadow: 0px 20px 9px  var(--light_blue_shads); 
    cursor: pointer;  
}

.payment-btn:hover {
    opacity: 0.7;
    box-shadow: 0px 20px 9px  var(--pale_blue);
}

.cancel {
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 10px;
    padding: 1.1em;
    background-color: transparent;
    border-radius: 10px;
    color:var(--desaturated_blue);
    font-size: 0.8em;
    text-align: center;
}

.cancel a {
    text-decoration: none;
    color:var(--desaturated_blue);
    font-weight: 900;
}

.cancel a:hover {
    text-decoration: none;
    color: var(--dark_blue);
}

/*Desktop version width 1440px*/
@media screen and (min-width: 1440px) {
    .payment-btn:hover{
        cursor: pointer;
        transition: 0.3s ease-in-out;
        transform: scale(1.02);
        opacity: 0.8;
    }

    .cancel{
        font-size: 18px;
    }

    .cancel a:hover{
        cursor: pointer;
    }
}