/* You can add global styles to this file, and also import other style files */
@tailwind base;
@tailwind components;
@tailwind utilities;

@import "./css/variables.scss";

@font-face {
    font-family: "Agustina Regular";
    font-style: normal;
    font-weight: normal;
    src: local("Agustina Regular"),
        url("/assets/fonts/Agustina.woff") format("woff");
}

@font-face {
    font-family: "Montserrat";
    src: local("Montserrat"),
        url("/assets/fonts/Montserrat-Regular.ttf") format("woff");
}

@font-face {
    font-family: "Google Sans Bold";
    src: local("Google Sans Bold"),
        url("/assets/fonts/GoogleSans-Bold.ttf") format("woff");
}

@font-face {
    font-family: "Google Sans Bold Italic";
    src: local("Google Sans Bold Italic"),
        url("/assets/fonts/GoogleSans-BoldItalic.ttf") format("woff");
}

@font-face {
    font-family: "Google Sans Italic";
    src: local("Google Sans Italic"),
        url("/assets/fonts/GoogleSans-Italic.ttf") format("woff");
}

@font-face {
    font-family: "Google Sans Medium";
    src: local("Google Sans Medium"),
        url("/assets/fonts/GoogleSans-Medium.ttf") format("woff");
}

@font-face {
    font-family: "Google Sans Medium Italic";
    src: local("Google Sans Medium Italic"),
        url("/assets/fonts/GoogleSans-MediumItalic.ttf") format("woff");
}

@font-face {
    font-family: "Google Sans Regular";
    src: local("Google Sans Regular"),
        url("/assets/fonts/GoogleSans-Regular.ttf") format("woff");
}

code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
        monospace;
}

html,
body {
    scroll-behavior: smooth;
    overflow-x: hidden;
    background-color: rgb(237, 249, 254);
}

body {
    margin: 0;
    font: 19px Montserrat, "Montserrat", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Media Query */
@media (max-width: 1380px) {

    html,
    body {
        font-size: 16px;
        line-height: normal;
    }
}

.general-button {
    padding: 1rem;
    display: flex;
    width: fit-content;
    justify-content: center;
    gap: 12px;
    border: 1px solid $theme-blue;
    border-radius: 20rem;
    height: fit-content;
    align-items: center;
    text-decoration: none;
    transition: all 200ms;
    text-align: center;

    &:hover {
        background-color: $theme-blue;
        color: white;
        cursor: pointer;
    }
}