/*
    Standard Values v1.1 | 14.11.2022
    "standard-values.css"
    by Valentin Müller
*/

@import url("https://use.typekit.net/vba8sas.css");

/* CSS Properties [use in Stylesheet] */

:root {
    /* Colors:*/
    --c-primary-color: hsl(0, 0%, 100%); /* #FFFFFF */
    --c-secondary-color: hsl(189, 30%, 8%);   /* #0F1A1C */
    --c-accent-color: hsl(60, 100%, 85%); /* #FFFFB3 */

    --c-error-color: red;
    --c-warning-color: yellow;
    --c-success-color: green;

    /* Fonts */
    --ft-heading-1: 5rem;
    --ft-heading-2: 2.038rem;
    --ft-heading-3: 1.692rem;
    --ft-standard-text: 1.3rem;

    --standard-font: "ocr-a-std", monospace;

    font-family: var(--standard-font);
}

/* @media (prefers-color-scheme: light) {
    :root {
        --c-primary-color: hsl(145, 50%, 15%);
        --c-secondary-color: hsl(32, 52%, 95%);
        --c-accent-color: hsl(145, 50%, 45%);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --c-primary-color: hsl(32, 52%, 95%);
        --c-secondary-color: hsl(145, 50%, 5%);
        --c-accent-color: hsl(145, 50%, 65%);
    }
} */

* {
    font-family: var(--standard-font);
    font-size: var(--ft-standard-text);
}

body{
    font-family: "ocr-a-std", monospace;
    font-size: var(--ft-standard-text);
}
/* I want to center a div */

/* Font Weights [use as classes in HTML] */

.ft-light{
    font-weight: 300;
}

.ft-medium{
    font-weight: 500;
}

.ft-bold{
    font-weight: 700;
}

.ft-heading-1 {
    font-size: var(--ft-heading-1);
    line-height: normal;
}

.ft-heading-2 {
    font-size: var(--ft-heading-2);
    color: var(--c-accent-color);
    margin-bottom: 3rem;
    margin-top: 2rem;
}

.ft-heading-3 {
    font-size: var(--ft-heading-3);
}

.ft-standard-text {
    font-size: var(--ft-standard-text);
}

.ft-italic {
    font-style: italic;
}

.ft-center {
    text-align: center;
}

/* GOOGLE ICONS */

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48;
  user-select: none;
}

@media screen and (max-width: 768px) {
    :root {
        --ft-heading-1: 2rem;
        --ft-heading-2: 1.4rem;
        --ft-heading-3: 1.2rem;
        --ft-standard-text: 1rem;
    }
}
@media screen and (max-width: 300px) {
    :root {
        --ft-heading-1: 2rem;
        --ft-heading-2: 1.5rem;
        --ft-heading-3: 1.2rem;
        --ft-standard-text: 1rem;
    }
}