@import url("color-palette.css");
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders:opsz,wght@10..72,100..900&display=swap');
body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;/*reason why you could reposition the questions at the center of the page*/
    justify-content: center;
    align-items:center;

}
#card{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--primary);
    padding: 2rem;
    padding-bottom: 3rem;
    border-radius: .5rem;
    /* color: var(--background); */
    font-family:"Big Shoulders", sans-serif;
}
h1,p{
    text-align: center;
}
h1{
    margin-bottom: 0;
}
p{
    font-size: larger;
}
.buttonParent{
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}
button{
    font-family:"Big Shoulders", sans-serif;
    font-size: 2rem;
    border-radius:.25rem
}