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

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

@font-face {
    font-family: "yapari";
    src: url(../fonts/Yapari-Variable-Trial.ttf);
}

/* CSS Properties [use in Stylesheet] */

:root {
    /* Colors:*/
    --l-primary-color: hsl(0, 0%, 9%);
    /* #133923 */
    --l-secondary-color: hsl(0, 0%, 90%);
    /* #f9f3ec */
    --l-accent-color: #e7104d;
    /* #39ac69 */
    --l-accent-color-dark: #640722;

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

    /* Fonts */
    --ft-heading-1: 4rem;
    --ft-heading-2: 2rem;
    --ft-heading-3: 1.4rem;
    --ft-standard-text: 1.2rem;
    --ft-small-text: 1rem;

    --ft-event-1: 3rem;

    --standard-font: "Noka", sans-serif;

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

    --cursor-opacity: 0;

    /* --gradient-1: 0%; */
    /* --gradient-2: 100%; */
}

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

* {
    font-family: var(--standard-font);
    font-size: var(--ft-standard-text);
    scroll-behavior: smooth;
    scroll-padding-top: 150px;
}

body {
    font-family: "acumin-pro-extra-condensed", sans-serif;
    font-size: var(--ft-standard-text);
    font-weight: 200;
    scroll-behavior: smooth;
    background-color: var(--l-primary-color);
    color: var(--l-secondary-color);
}

/* 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);
    color: var(--l-accent-color);
    font-family: "acumin-pro-extra-condensed", sans-serif;
    font-weight: 700;
    margin-block: 0.4em;
    line-height: 1;
}

.ft-heading-2 {
    font-size: var(--ft-heading-2);
    color: var(--l-secondary-color);
    margin-bottom: 0.4em;
    line-height: 1;
}

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

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

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

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

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

.ft-event-1 {
    font-family: Yapari;
    font-size: var(--ft-event-1);
    font-weight: 800;
}

/* 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: 3rem;
        --ft-heading-2: 1.6rem;
        --ft-heading-3: 1.4rem;
        --ft-standard-text: 1.3rem;
        --ft-event-1: 2.5rem;
        --ft-small-text: 0.9rem;
    }
}

@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;
        --ft-event-1: 1.5rem;
        --ft-small-text: 0.8rem;
    }
}

#cursor {
    width: 4rem;
    height: 4rem;
    background-color: var(--l-secondary-color);
    color: var(--l-primary-color);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms ease;
    mix-blend-mode: difference;
}

#cursor > span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
}

/* body:hover {
    --cursor-opacity: 1;
} */

/* if touch device */
@media (pointer: coarse) {
    #cursor {
        display: none;
    }
}