@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

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

:root {
    /* Colors */
    
    --primary-light: hsl(45, 80%, 93%);
    --primary-bold: hsl(45, 80%, 50%);
    --primary-dark: hsl(45, 80%, 34%);
    
    --accent1-light: #ffe7db;
    --accent1-bold: #ff4d00;
    --accent1-dark: #ad3400;
    
    --accent2-light: hsl(200, 80%, 93%);
    --accent2-bold: hsl(200, 80%, 50%);
    --accent2-dark: hsl(200, 80%, 34%);
    
    
    /*--primary-light: hsl(48, 100%, 93%);
    --primary-bold: hsl(48, 100%, 50%);
    --primary-dark: hsl(48, 100%, 34%);*/

    --incorrect-light: #ffe7db;
    --incorrect-bold: #ad3400;

    --mixed-bold: hsl(50, 100%, 50%);

    --success-light: #dbfff4;
    --success-bold: #00cc8f;
    --success-dark: #007a56;

    --super-light: hsl(50, 100%, 93%);
    --super-bold: hsl(50, 100%, 50%);
    --super-dark: hsl(50, 100%, 25%);
    
    /* Grayscale: 1000 = white, 100 = darkest */
    --gray-1000: #fff;
    --gray-950: #fbfbfb;
    --gray-900: #eee;
    --gray-800: #ddd;
    --gray-700: #ccc;
    --gray-600: #b8b8b8;
    --gray-400: #7a7a7a;
    --gray-100: #555;
    
    /* Once tested neutral names (tan/brown scale) - commented out */
    /*--neutral-ultra-light: #ffffff;
    --neutral-very-light: hsl(36, 20%, 95%);
    --neutral-semilight: hsl(36, 18%, 90%);
    --neutral-mid-light: hsl(36, 16%, 85%);
    --neutral-mid: hsl(36, 20%, 75%);
    --neutral-dark: hsl(36, 25%, 45%);
    --neutral-half-dark: hsl(36, 30%, 35%);
    --neutral-quarter-dark: hsl(36, 35%, 25%);*/
    /* Sizes */
    --minor-spacing: 0.4rem;
}

body, button {
    /*font-size: 1.15rem;*/
    font-family: "Montserrat", sans-serif;
    /*line-height: 1.5;*/
}

.vcenter {
    display: flex;
    justify-content: center;
    align-items: center;
}