@import url("main.css");

/* Headers */
h1 {
    margin: 0;
}

h2 {
    font-size: 1.9375rem;
}

.header {
    text-align: center;
}

.subheader {
    margin-bottom: 3.5rem;

    color: var(--subheading-color);
    font-size: 1.3rem;
    font-weight: 500;
    text-align: center;
}

/* Pricing grid */
#pricing-grid {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

#best-tier {
    --background-gradient: linear-gradient(145deg, hsl(190 100% 50%) 0%, hsl(290 100% 50%) 100%);
    --font-color: hsl(0 0% 100%);

    /* margin-left: 0em;
    margin-right: 0em; */

    padding-top: 2.375em;
    padding-bottom: 2.375em;

    background-image: var(--background-gradient);
    background-size: 300%;

    -webkit-box-shadow: 0px 0px 167px -30px var(--background-color);
    -moz-box-shadow: 0px 0px 167px -30px var(--background-color);
    box-shadow: 0px 0px 167px -30px var(--background-color);

    z-index: 100;

    animation: background-animation 5s infinite alternate;
}

#most-popular {
    display: flex;
    align-items: center;

    margin-bottom: 1em;
    border-radius: 100vmax;
    padding: 0.75em 1.5em;

    background-color: hsl(220, 100%, 50%);
    font-weight: 500;
    text-align: center;
}

#most-popular svg {
    margin-left: 0.375rem;
}

.price {
    --background-color: hsl(181 100% 50%);
    --background-gradient: linear-gradient(145deg, hsl(181 100% 50%) 0%, hsl(286 100% 50%) 100%);
    --font-color: hsl(0 0% 100%);

    background-color: var(--background-color);
    background-image: var(--background-gradient);

    border-radius: 100vmax;

    padding: 0.625em 1.625em;
    
    font-weight: 600;
    font-size: 1.25rem;
    text-align: center;
}

#best-tier > .price {
    --background-color: hsl(0 0% 100% / 0.25);
    --background-gradient: none;
}

.benefits {
    margin: 1em auto;
}

.purchase-button {
    position: relative;
    margin: 1em auto;
    bottom: 0;

    display: flex;
    align-items: center;
}

.tier {
    --font-color: hsl(0 0% 0%);
    
    display: flex;
    flex-direction: column;
    align-items: center;

    aspect-ratio: 6 / 1;

    width: 100%;
    height: 100%;

    border-radius: var(--border-radius);

    margin: 0.625em;
    padding: 2em;

    background-color: white;
}

.tier > h2, h3 {
    margin: 0;
    text-align: center;
}

.tier > h2 {
    font-weight: 700;
}

.tier > h3 {
    margin-bottom: 1em;
}

.check {
    --fill-color: hsl(160 80% 50%);
    /* --check-color: linear-gradient(145deg, hsl(148 100% 50%) 0%, hsl(184 100% 50%) 100%); */
    fill: var(--fill-color);
    padding: 0.5em;
    width: 1.8em;
    height: 1.8em;
}

.point {
    display: flex;
    align-items: center;
}

/* Mobile responsiveness */
/* @media screen and (max-width: 80em) {
    #pricing-grid {
        flex-direction: column;
    }
} */