@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import 'https://fonts.googleapis.com/css?family=Reem+Kufi';

@font-face {

    font-family: 'Gilroy-Light';
    src: url('/Arquivos/fontes/Gilroy-Light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {

    font-family: 'Gilroy-SemiBold';
    src: url('/Arquivos/fontes/Gilroy-SemiBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {

    font-family: 'Gilroy-ThinItalic';
    src: url('/Arquivos/fontes/Gilroy-ThinItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {

    font-family: 'Gilroy-Thin';
    src: url('/Arquivos/fontes/Gilroy-Thin.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: "Neue Montreal";
    font-weight: 200;
    src: url("/Arquivos/fontes/PPNeueMontreal-Thin.woff2") format("woff2")
    
}

@font-face {
    font-family: "Neue Montreal";
    font-weight: 400;
    src: url("/Arquivos/fontes/PPNeueMontreal-Book.woff2") format("woff2")
}

@font-face {
    font-family: "Neue Montreal";
    font-weight: 600;
    src: url("/Arquivos/fontes/PPNeueMontreal-SemiBold.woff2") format("woff2")
}

:root {

    /* Variáveis para fontes */

    --fonte00: "Neue Montreal";
    --fonte01: "Kanit", sans-serif;
    --fonte02: 'Gilroy-SemiBold', sans-serif;
    --fonte03: 'Gilroy-ThinItalic', sans-serif;
    --fonte04: 'Gilroy-Light', sans-serif;
    --fonte05: 'Gilroy-Thin', sans-serif;

    --fonteMusica: 'Reem Kufi', sans-serif;
      
    /* Variáveis para cores */

        /* cor claras */

        --corClaro01: #F9F1F0;
        --corClaro02:  #D8C9C7;
        --corClaro03:  white;
        --corClaro04:  #E4D2D0;
        --corClaro05: #D5C1B5;
        --corClaro06: #D8C9C7;

        /* cor escuras */

        --corEscuro01:  black;
        --corEscuro02:  #131112;
        --corEscuro03:  #3B3833;
        --corEscuro04: #2E2B26;
        --corEscuro05: #3a3633;
        --corEscuro06:  #020308;

        /* cor gradiente */

        --corEscuroGradiente01: linear-gradient(to bottom,

            var(--corClaro04), 
            var(--corClaro05), 
            var(--corClaro06)

        );

        --corEscuroGradiente02: linear-gradient(to bottom,

            var(--corEscuro06),
            var(--corEscuro04), 
            var(--corEscuro05), 
            var(--corEscuro04), 
            var(--corEscuro06)  

        );

        --corEscuroGradiente03: linear-gradient(to bottom,

            var(--corEscuro03),
            var(--corEscuro04), 
            var(--corEscuro05)

         );

       
        /* cor Global */

        --cor-destaque: #00B5DE;

         /* Outras Cores */

        --space: 1rem;
        --bg: #09090b;
        --fg: #e3e3e3;
        --surface-1: #101012;
        --surface-2: #27272a;
        --surface-3: #52525b;
        --ease-out: cubic-bezier(0.5, 1, 0.89, 1);
        --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

        --bg-gradient-onyx: linear-gradient(to bottom right, hsl(240, 1%, 25%) 3%, hsl(0, 0%, 19%) 97%);
    --bg-gradient-jet: linear-gradient(to bottom right, hsla(240, 1%, 18%, .251) 3%, hsla(240, 2%, 11%, 0) 100%), hsl(240, 2%, 13%);
    --bg-gradient-yellow1: linear-gradient(to bottom right, hsl(45, 100%, 71%) 0%, hsla(36, 100%, 69%, 0) 50%);
    --bg-gradient-yellow2: linear-gradient(135deg, hsla(45, 100%, 71%, .251) 0%, hsla(35, 100%, 68%, 0) 59.86%), hsl(240, 2%, 13%);
    --border-gradient-onyx: linear-gradient(to bottom right, hsl(0, 0%, 25%) 0%, hsla(0, 0%, 25%, 0) 50%);
    --text-gradient-yellow: linear-gradient(to right, hsl(45, 100%, 72%), hsl(35, 100%, 68%));

    --jet: hsl(0, 0%, 22%);
    --onyx: hsl(240, 1%, 17%);
    --eerie-black1: hsl(240, 2%, 13%);
    --eerie-black2: hsl(240, 2%, 12%);
    --smoky-black: hsl(0, 0%, 7%);
    --white1: hsl(0, 0%, 100%);
    --white2: hsl(0, 0%, 98%);
    --orange-yellow-crayola: hsl(45, 100%, 72%);
    --vegas-gold: hsl(45, 54%, 58%);
    --light-gray: hsl(0, 0%, 84%);
    --light-gray70: hsla(0, 0%, 84%, .7);
    --bittersweet-shimmer: hsl(0, 43%, 51%);

    --ff-poppins: 'Poppins', sans-serif;

    --fs1: 24px;
    --fs2: 18px;
    --fs3: 17px;
    --fs4: 16px;
    --fs5: 15px;
    --fs6: 14px;
    --fs7: 13px;
    --fs8: 12px;

    --fw300: 300;
    --fw400: 400;
    --fw500: 500;
    --fw600: 600;

    --shadow1: -4px 8px 24px hsla(0, 0%, 0%, .25);
    --shadow2: 0px 16px 30px hsla(0, 0%, 0%, .25);
    --shadow3: 0px 16px 40px hsla(0, 0%, 0%, .25);
    --shadow4: 0px 25px 50px hsla(0, 0%, 0%, .15);
    --shadow5: 0px 24px 80px hsla(0, 0%, 0%, .25);

    --transition1: .25s ease;
    --transition2: .5s ease-in-out;
                
}