@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&family=Roboto:wght@100;300;400;500;700;900&display=swap');

:root {
    --DARK_SEC: rgb(39, 40, 46);
    --DARK_TR: rgba(39, 40, 46, 0.849);
    --LIGHT_SEC: rgb(255, 255, 255);
    --LIGHT_TR: rgba(255, 255, 255, 0.849);
    --TEXT_LIGHTMODE: black;
    --TEXT_DARKMODE: white;
    
    --secondary: var(--LIGHT_SEC);
    --transparent: var(--LIGHT_TR);

    --textcolor: var(--TEXT_LIGHTMODE);

    --primary: #264ea5;

    --shadow: rgba(0, 0, 0, 0.247);
}

.dark-theme {
    --secondary: var(--DARK_SEC) !important;
    --textcolor: var(--TEXT_DARKMODE) !important;
    --transparent: var(--DARK_TR) !important;
}

html {
    scroll-behavior: smooth;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    transition: .1s all;
    -o-transition: .1s all;
    -moz-transition: .1s all;
    -webkit-transition: .1s all;
}

body {
    background-color: var(--secondary);
    overflow-y: overlay;
}