/* variables for css */

:root {

    /* colors */
    --color-primary-title: rgb(0, 17, 34);
    --color-catch-title: rgb(51, 51, 51);
    --color-catch-text: rgb(102, 102, 102);
    --color-info-text: rgb(49 57 66);

    --color-white: white;
    --color-black: black;

    --color-primary-background: var(--color-white);
    --color-secondary-background: #f7f7f7;
    --color-catch-background: rgb(23, 24, 28);
    --color-navbar-background: rgb(23, 24, 28);
    --color-footer-background: rgb(34, 34, 34);

    --color-button: rgb(34, 34, 34);

    --color-email: #e70101;

    /* colors for aspect */
    --text: #020a15;
    --background: #f9fcfe;
    --primary-blue: #6bafff;  
    --secondary: #ffa49f;
    --accent-red:  #ff6b6b;  
    --accent-light: #ECF0F2;
    --accent: #f26172;
    --primary: #4690f0;

    /* colors for cards*/
    --purple: #F1EBFF;
    --red: #ffebf2;
    --blue: #ebefff;
    --green: #EDF9F2;

    /* Box-Shadow */
    --shadow-for-box:   rgba(0, 0, 0, 0.05) 0px 0.8px 2.4px -0.6px,
                        rgba(0, 0, 0, 0.05) 0px 2.4px 7.2px -1.3px,
                        rgba(0, 0, 0, 0.05) 0px 6.4px 19.1px -1.9px,
                        rgba(0, 0, 0, 0.05) 0px 20px 60px -2.5px;



    /* fonts */
    --font-family-primary: "Inter",  "Arial" , sans-serif;
    --font-family-body: var(--font-family-primary);
    --font-family-heading: var(--font-family-primary);

    --font-family-example-1: "LoveLive";
    --font-family-example-2: "YourMurdererBB";
    --font-family-example-3: "Orbitron";
    --font-family-example-4: "Righteous";


    /* font weight */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;


    /* font size */
    --font-size-base: 1rem;
    --font-size-xs: 0.938rem;
    --font-size-s: 1.5rem;  
    --font-size-m: 3.125rem;  
    --font-size-l: 3.5rem;  
    --font-size-xl: 6.25rem; 

    --font-size-title-text: 2.188rem;
    --font-size-aspect-title: 5rem;
    --font-size-info-title: 3.125rem;

    --font-size-title: 2rem;
    --font-size-text: clamp(1.1875rem, 0.875rem + 0.5vw, 1.375rem);

    --font-size-link-card-top: 2.063rem;
    --font-size-link-card-bottom: 1.25rem;

    --font-size-code-snippet: .875rem;



    /* font sizes for the examples in intro card */
    --font-size-example-1: 2.5rem;
    --font-size-example-2: 3.6rem;
    --font-size-example-3: 2.188rem;
    --font-size-example-4: 2.6rem;
   

    /* letter spacing */
    --catch-title-spacing: -2px;
    --catch-text-spacing: -0,5px;
    --h4-header-spacing: -2.1px;

    /* line height */
    --catch-title-line-height: 1.2em;
    --catch-text-line-height: 1.5em;
    
}

@media (max-width: 1400px) {
    :root {
        --font-size-aspect-title: 3.30rem;
    }
}



/* font sizes for smaller screens*/
@media (max-width: 1000px) {
    :root {
        --font-size-xs: 0.938rem; 
        --font-size-s: 1.5rem;  
        --font-size-m: 3.125rem;  
        --font-size-l: 3.125rem;  
        --font-size-xl: 3.75rem;
        --font-size-title-text: 1.563rem;
        --font-size-info-title: 2.5rem;
        --font-size-code-snippet: 0.813rem;
    }
}