@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

:root{
    /* primary */
    --lime-green:hsl(163, 72%, 41%);
    --bright-red: hsl(356, 69%, 56%);
    --face-color: hsl(208, 92%, 53%);
    --twitter-color:hsl(203, 89%, 53%);
    --instagram-color:linear-gradient(to right, hsl(37, 97%, 70%),hsl(329, 70%, 58%));
    --youtube-color:hsl(348, 97%, 39%);

    /* dark theme */
 
    --toggle-dark:linear-gradient(90deg, hsl(210, 78%, 56%), hsl(146, 68%, 55%));
    --dark-blue-bg:hsl(230, 17%, 14%);
    --dark-blue-topbg:hsl(232, 19%, 15%);
    --dark-blue-cardbg: hsl(228, 28%, 20%);
    --blue-text: hsl(228, 34%, 66%);
    --white-text: hsl(0, 0%, 100%);
    --dark-selected:#333a56;

    /* light theme */

    --white-bg: hsl(0, 0%, 100%);
    --top-header-bg:hsl(225, 100%, 98%);
    --cardbg:hsl(227, 47%, 96%);
    --darkGrayishBlue-text:hsl(228, 12%, 44%);
    --veryDarkBlue-text:hsl(230, 17%, 14%);
    --light-selected:#e1e3f0;
   
}

body{
    background-color: var(--dark-blue-bg);
    font-family: 'Inter', sans-serif;
    color: var(--blue-text);
}

.container{
    margin: auto;
    max-width: 1200px;
}