import { createGlobalStyle } from 'styled-components';
export const GlobalStyles = createGlobalStyle`
    @font-face {
        font-family: "Gilroy-Bold";
        src: url("/font/Gilroy-Bold.ttf") format("woff");
        font-style: normal;
        font-weight: 700;
    }
    @font-face {
        font-family: "Gilroy-SemiBold";
        src: url("/font/Gilroy-SemiBold.ttf") format("woff");
        font-style: normal;
        font-weight: 600;
    }
    @font-face {
        font-family: "Gilroy-Medium";
        src: url("/font/Gilroy-Medium.ttf") format("woff");
        font-style: normal;
        font-weight: 500;
    }
    @font-face {
        font-family: "Gilroy-Regular";
        src: url("/font/Gilroy-Regular.ttf") format("woff");
        font-style: normal;
        font-weight: 400;
    }


    html {
        font-size: 10px;
        --ff-body: "Gilroy-Regular";
        --ff-heading: "Gilroy-Bold";
        --ff-medium: "Gilroy-Medium";
        --ff-sbold: "Gilroy-SemiBold";
        --co-head: #0A1045;
        --co-body:  #61677C;
        --co-grey: #C5C9DA;
        --main-background:  #F6F8FF;
        --co-primary: #004BFF;
        --co-error: #D50033;
        --shadow:  0px 10px 70px rgba(224, 228, 237, 0.7);
        --border-radius: 8px;
        --font-24: 2.4rem;
        --font-20: 2rem ;
        --font-18: 1.8rem ;
        --font-16: 1.6rem;
        --font-14: 1.4rem ;
        scroll-behavior: smooth;
       
        
    }
    *, ::before, ::after{
        margin: 0;
        padding: 0;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        box-sizing: border-box;
    }
    

    body{
        font-family: var(--ff-body);
        font-size: var(--font-14);
        color: var(--co-body);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        box-sizing: border-box;
        line-height: 1.6;
    }
    h1,h2{
        font-family: var(--ff-heading);
        font-size: var(--font-24);
        color: var(--co-head);
        font-weight: 700;
    }
    h3,h4{
        font-family: var(--ff-sbold);
        font-size: var(--font-18);
        font-weight: 600;
    }
    a{
        color: var(--co-primary);
        font-family: var(--ff-medium);
        font-weight: 500;
        text-decoration: none;
    }
    button{
        background:     transparent;
        outline:        none;
        border:         none;
        font-size:      var(--font-14);
        text-transform: capitalize;
        letter-spacing: 0.2px;
        font-family: var(--ff-heading);
        cursor: pointer;
        
    }
    input,textarea{
        background: transparent;
        border: none;
        outline: none;
        font-family: var(--ff-body);
        font-size: var(--font-16);
        color: var(--co-head);
        line-height: 1.1;
        width: 70%;

    }
    input::placeholder{
        color: var(--co-body);
    }
    ul{
        list-style: none;
        
    }
    input[type="search"]::-webkit-search-decoration,
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-results-button,
    input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance:none;
    }
    .co-error{
        color: var(--co-error); 
    }
    .co-primary{
        color: var(--co-primary); 
    }
    }
`;
