@import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap');

/* -- Basic Styling -- */

:root {
    /* setting base to 20px to make my life nicer working with rem */
    font-size: 20px;
    /* primary site colours */
    --site-cyan: hsl(179, 62%, 43%);
    --site-bright-yellow: hsl(71, 73%, 54%);
    /* secondary colours, not defined in style guide */
    --site-greener-cyan: rgb(0, 195, 192);
    /* neutral site colours */
    --site-light-gray: hsl(204, 43%, 93%);
    --site-grayish-blue: hsl(218, 22%, 67%);
    --box-border-radius: 8px;
    font-weight: 400;

}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* -- General Styling -- */

body {
    /* per the style guide, the body copy is 16px */
    font-size: 16px;
    font-family: 'Karla', sans-serif;
    width: 85vw;
    height: 100vh;
    margin: 0 auto;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    /* align-items: center; */

    background-color: var(--site-light-gray);
}

.container {
    box-shadow: 2px 10px 25px -12px rgba(0,0,0,0.5);
}

.box {
    padding-left: 2.3rem;
    padding-right: 2.3rem;
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
}

.heading {
    /* margin-top: 1.5rem;  */
    color: white;
    font-size: 0.95rem;
    /* font-weight: 700; */

}

/* Specific stylings */

.topRow {
    padding-top: 2.1rem;
    padding-bottom: 2.4rem;
    background-color: white;
    border-top-left-radius: var(--box-border-radius);
    border-top-right-radius: var(--box-border-radius);
}

.topRow .heading {
    color: var(--site-cyan);
    font-size: 1.20rem;
}

.quickSell {
    margin-top: 0.7rem;
    color: var(--site-bright-yellow);
    font-size: 0.9rem;
}
.sellBlurb {
    margin-top: 0.75rem;
    color: gray;
    font-size: 0.75rem;
    line-height: 1.2rem;
}
.bottomRow {
    display: flex;
    flex-direction: column;

}
.pricingBox {
    background-color: var(--site-cyan);    
}
.priceRow {
    display: flex;
    align-items: center;
    margin-top: 1rem;
}
.price {
    color: white;
    font-size: 1.5rem;

}
.pricePeriod {
    color: var(--site-greener-cyan);
    font-size: 1rem;
    margin-left: 0.5rem;
}
.sell {
    margin-top: 0.5rem;
    color: white;
}
.signupButton {
    text-align: center;
    display: block;
    margin-top: 1.5rem;
    background-color: var(--site-bright-yellow);
    color: white;
    /* width: 85%; */
    /* height: 20%; */
    padding: 13px 3.25rem; 
    /* margin-left: auto; */
    /* margin-right: auto; */
    /* align-self: center; */
    justify-content: center;
    border-radius: 5px;
    font-weight: 700;


}
.whyUsBox {
    background-color: var(--site-greener-cyan);
    border-bottom-left-radius: var(--box-border-radius);
    border-bottom-right-radius: var(--box-border-radius);

}
.blurb {
    margin-top: 0.75rem;
}

.blurb .unstyledList {
    list-style: none;
    font-size: 16px;
    color: var(--site-light-gray);
    line-height: 1rem;
}

footer {
    text-align: center;
    position: fixed;
    bottom: 0;
    /* margin-top: auto; */
}

/* Feel free to remove these styles or customise in your own stylesheet 👍 */
    .attribution { font-size: 11px; text-align: center; 
        /* visibility: hidden; */
    }
    .attribution a { color: hsl(228, 45%, 44%); }

/** 
* * style guide has 2 designs, one aimed for 375x870, and the other 1440x800
* TODO: Tweak transition point later
*/ 
@media screen and (max-width: 500px) {
    .topRow {
    }

    .topRow .heading {
        margin-top: 0.4rem;
        font-size: 1.05rem;
    }

    .box {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }

    .topRow.box {
        padding-top: 0.6rem;
        padding-bottom: 1.95rem;
    }

    .quickSell {
        margin-top: 1.20rem;
        font-size: 0.8rem;
    }

    .sellBlurb {
        margin-top: 0.9rem;
        font-size: 0.65rem;
    }

    .pricingBox.box {
        padding-bottom: 1.25rem;
    }

    .pricingBox .heading {
        font-size: 0.9rem;
    }

    .priceRow {
        display: flex;
        align-items: center;
        margin-top: 0.8rem;
    }
    .price {
    }
    .pricePeriod {
    }
    .sell {
        margin-top: 0.35rem;
    }
    .signupButton {
        margin-top: 1.5rem;
        padding: 13px 3.25rem; 
    
    }
    .whyUsBox {
    }
    .blurb {
        margin-top: 0.75rem;
    }
    
    .blurb .unstyledList {
        font-size: 14px;
    }
    
    footer {
    }

}

@media screen and (min-width: 500px) and (max-width: 800px) {
    body {
        /* roughly half way, arbitrary for the moment */
        width: 65vw;
    }

    .signupButton {
        font-size: 0.90rem;
    }
}

@media screen and (min-width: 800px) {
    body {
        width: 45vw;
    }

    .bottomRow {
        flex-direction: row;
        /* flex: 0 50%; */
    }
    .pricingBox {
        width: 50%;
        border-bottom-left-radius: var(--box-border-radius);
    
    }
    .signupButton {
    }
    .whyUsBox {
        width: 50%;
        border-bottom-left-radius: 0px;
    }
}