:root {

    --bodyPadding: 10px;
    --background: hsl(266, 26%, 63%);
    --background_dark: hsl(266, 26%, 70%);
}

body {

    padding: var(--bodyPadding);
    background-color: var(--background);
}

p {

    font-family: 'Comic Sans MS', sans-serif;
    font-size: 15px;
    font-weight:lighter;
}

h1, h2, h3, h4, h5, h6 {

    font-family: 'Consolas', serif;
}


button {

    background-color: var(--background);
    border: 4px outset var(--background_dark);

    font-size: medium;
    font-family: 'Comic Sans MS', sans-serif;
    padding: 5px;
    margin: 5px;
}
button:active {border: 4px inset black;}

/*GREEN BUTTON*/
button.greenButton {

    background-color: hsl(147, 35%, 45%);
    border-color: hsl(147, 35%, 35%)
}
button.greenButton:active {border-color: hsl(147, 35%, 20%);}

/*RED BUTTON*/
button.redButton {

    background-color: hsl(0, 49%, 52%);
    border-color: hsl(0, 49%, 45%);
}
button.redButton:active {border-color: hsl(0, 49%, 35%);}

/*GREY BUTTON*/
button.greyButton {

    background-color: hsl(0, 0%, 52%);
    border-color: hsl(0, 0%, 45%);
}
button.greyButton:active {border-color: hsl(0, 0%, 35%);}

.centered {
    text-align: center;
    align-content: center;
}