@import url('https://fonts.googleapis.com/css2?family=Poppins: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');

:root
{
    --menu-size: 10vh;

    --font: "Poppins", sans-serif;

    --headers-size: 2.4rem;

    --bg-color-first: hsl(0, 0%, 95%);
    --bg-color-second: hsl(0, 0%, 90%);
    --bg-color-third: hsl(0, 0%, 85%);

    --border-color: hsl(0, 0%, 55%);

    --text-color-first: hsl(0, 0%, 5%);
    --text-color-second: hsl(0, 0%, 10%);
    --text-color-third: hsl(0, 0%, 15%);

    --primary-color: hsl(210, 100%, 55%);

    --success: hsl(150, 60%, 45%);
    --gold: hsl(45, 70%, 35%);
}

body.dark-mode
{
    --bg-color-first: hsl(0, 0%, 5%);
    --bg-color-second: hsl(0, 0%, 10%);
    --bg-color-third: hsl(0, 0%, 15%);

    --border-color: hsl(0, 0%, 50%);

    --text-color-first: hsl(0, 0%, 95%);
    --text-color-second: hsl(0, 0%, 90%);
    --text-color-third: hsl(0, 0%, 85%);
}