Hover is not working on navbar items and the cursor is changing to hand when we hover beside text and not when we hover on text
According to your code :
.navbar li a:hover {
    color: var(--main-color);
    transition: .4s;
}

you tried to give hover effect on anchor tag as  class navbar > li > a.
Look at this your html code now:
<ul class="navbar">
            <li><a href="#Home"></a>Home</li>
            <li><a href="#About"></a>About</li>
            <li><a href="#Menu"></a>Menu</li>
            <li><a href="#Service"></a>Service</li>
            <li><a href="#Contact"></a>Contact</li>
        </ul>

<a href="#Home"></a>

There is nothing to show inside anchor tag. Hope you understand this problem. Put all the menu texts Home about menu service contact inside anchor tag. like this:
<a href="#Home">Home</a>


The hover effect is not working in my code. Can someone help?When I run this code there is navbar present but is not clickable whereas the empty space on it's left side is clickable nor are my css hover effect working on it.


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: 'Poppins', sans-serif;
    list-style: none;
    text-decoration: none;
}

:root {
    /* global variables */
    --main-color: #ff702a;
    --text-color: #fff;
    --background-color: #1e1c2a;
    --big-font: 5rem;
    --h2-font: 2.25rem;
    --p-font: 0.9rem;
}

*::selection {
    background: var(--main-color);
    color: #fff;
}

body {
    color: var(--text-color);
    background: var(--background-color);
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    /*z-index defines stack order of element*/
    display: flex;
    align-items: center;
    /*controls space around cross axis*/
    justify-content: space-between;
    /*controls space around main axis*/
    padding: 30px 170px;
    background: var(--background-color);
}

.logo {
    color: var(--main-color);
    font-weight: 600;
    font-size: 2.4rem;
}

.navbar {
    display: flex;
}

.navbar li a {
    color: var(--text-color);
    font-size: 1.1rem;
    padding: 10px 20px;
    font-weight: 500;
}

.navbar li a:hover {
    color: var(--main-color);
    transition: .4s;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Website for Foodies!</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;800&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
        rel="stylesheet">
</head>

<body>
    <header>
        <a href="#" class="logo">Foods</a>
        <div class="bx bx-menu" id="menu-icon"></div>
        <!--class=" bx bx-menu" is responsible for icon from boxicon-->
        <ul class="navbar">
            <li><a href="#Home"></a>Home</li>
            <li><a href="#About"></a>About</li>
            <li><a href="#Menu"></a>Menu</li>
            <li><a href="#Service"></a>Service</li>
            <li><a href="#Contact"></a>Contact</li>
        </ul>
    </header>
</body>
</html>



I was trying to make a responsive website and I was expecting the text in my navbar to change color when i hover on it
