:root {
    --clr-text: hsl(216, 83%, 7%);
    --clr-background: hsl(210, 80%, 98%);
    --clr-primary: hsl(214, 85%, 53%);
    --clr-secondary: hsl(0, 0%, 50%);
    --clr-accent: hsl(214, 60%, 70%);


    --ff-base: "Karla", sans-serif;
    --ff-accent: "Inconsolata", monospace;

    /* for fonts sizes use: https://utopia.fyi/type/calculator*/
    --fs-300: clamp(1rem, 0.8696rem + 0.6522vw, 1.375rem);
    --fs-400: clamp(1.2rem, 1.0196rem + 0.9022vw, 1.7188rem);
    --fs-500: clamp(1.44rem, 1.1936rem + 1.2321vw, 2.1484rem);
    --fs-600: clamp(1.728rem, 1.3949rem + 1.6653vw, 2.6855rem);
    --fs-700: clamp(2.0736rem, 1.6272rem + 2.2319vw, 3.3569rem);
    --fs-800: clamp(2.4883rem, 1.8943rem + 2.9702vw, 4.1962rem);

}

@media (prefers-color-scheme: dark) {
    :root {
        --clr-text: hsl(216, 83%, 93%);
        --clr-background: hsl(210, 80%, 2%);
        --clr-primary: hsl(214, 85%, 47%);
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    color-scheme: light dark;
}


body {
    font-family: var(--ff-base);
    font-size: var(--fs-400);
    line-height: 1.5;
    color:var(--clr-body);
    background-color: var(--clr-background);
}

.flex-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 1rem;
    margin-inline: auto;
    
}
/* MAIN */
main{
    flex: 1;
}

.calculator {
    display: grid;
    gap: 1rem;
    background-color: var(--clr-secondary);
    border: 2px solid var(--clr-primary);
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.08);
}

.calculator-display {
    display: flex;
    flex-direction: column;
    text-align: right;
    padding: 0.5rem;
    background-color: var(--clr-accent);
    border: 2px solid var(--clr-primary);
    border-radius: 1rem;
    color: var(--clr-text);
    
}

.calculator-buttons {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(4, 1fr);
    place-content: center;
    
}

.calculator-buttons button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    background-color: silver;
    color: lightgray;
    border: 2px solid var(--clr-primary);
    border-radius: 1rem;
    font-size: var(--fs-400);
    color: var(--clr-primary);
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.05);
    
}

.calculator-buttons button:hover {
    background-color: var(--clr-primary);
    color: var(--clr-text);
}

.calculator-buttons button:last-child{
    grid-column: span 2;
}

/* FOOTER */
footer {
    margin-top: auto;
}

footer a {
    text-decoration: none;
    color: inherit;
}