html{
    box-sizing: border-box; 
    font-size: 100%;
    height:100%;

}

*{
    box-sizing: inherit; 

}

body{
    font-family: 'Karla', sans-serif;   
    line-height: 1.3;
    color:var(--grayblue);
    background-color: var(--ltgray);
    padding:70px var(--paddingX) 77px var(--paddingX) ;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin:0;
   
    
}

:root{
    --white:hsl(0, 0%, 100%);
    --cyan:hsl(179, 62%, 40%);
    --ltcyan:hsl(179, 62%, 45%);
    --yellow:hsl(71, 73%, 54%);
    --dkyellow:hsl(71, 73%, 48%);
    --ltgray:hsl(204, 43%, 93%);
    --grayblue:hsl(218, 22%, 67%);
    --paddingX:40px;
    --paddingY:40px;
}

a{
    text-decoration: none;
}

h1, h2, h3{
    font-weight: bold;
    margin-top:0;
    line-height: 1.1;
}

h2{
    margin-bottom: 1.25rem;
}

h3{
    font-size:1.1rem;
}

p{
    margin-top:0;

}
.price{
    border-radius:0.5rem;
    overflow:hidden;
    margin:auto;
    max-width:40rem;
    height:100%;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}
   

.price >*{
    padding-left:24px;
    padding-right:24px;
    padding-top:40px;
    
}
.community {   
    background-color:var(--white);
    padding-bottom:35px;
}

.community h2{
    color:var(--cyan);
    font-weight: bold;
    font-size:1.25rem;
}

.community .subtitle{
    color:var(--yellow);
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 1rem;
}

.community p{
    font-size:0.8rem;
    line-height: 1.75;
    margin-bottom: 0;
}

.subscription, .why{
    color:var(--ltgray); 
    padding:25px 20px;
}

.subscription {
    background-color: var(--cyan);
}

.subscription__price{
    display:flex;
    align-items:center;
    font-size:2rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
    
}

.subscription__price span{
    font-size:1rem;
    margin-left: 0.8rem;
    font-weight: normal;
    opacity: 0.7;
 
}

.subscription p{
    margin-bottom: 1.75rem;
    font-size:0.9rem;
    opacity: 90%;
}

.subscription a {
    display:block;
    background-color: var(--yellow);
    color:var(--white);
    padding:0.75rem;
    text-align: center;
    border-radius: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
    transition:background-color 200ms ease;

}

.subscription a:hover{
    background-color: var(--dkyellow);
    
    
}
.why{
    background-color: var(--ltcyan);

}

.why ul{
    margin:0;
    padding:0;

}

.why ul li{
    list-style-type: none;
    font-size: 0.85rem;
    margin-top: 0.2rem;
    opacity:90%;
}


@media only screen and (min-width:1000px){  
   
    body{
        height:100%;
        padding:0;
    }
    .price{   
        display:grid;
        grid-template-columns:repeat(2, 1fr);
        grid-template-rows:repeat(2, auto);
        height:470px;
    }

    .community{
       grid-column:1/3;
    }
    .community p{
        font-size:16px;
    }

    .price >*{
        padding-left:40px;
        padding-right: 40px;
        padding-top:40px;
    }

    .subscription .why{
        padding-bottom:30px;
    }
}