[Dúvida] As variáveis do css não estão funcionando no meu codigo.

e:root { --background-color: #00090e; --text-color: #e1e1e1; --primary-color: #81fe88; --secondary-color: #888888; --tag-color: #171d1f; --font-family: "Prompt", sans-serif; --itens-background: #171d1f; } * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: var(--background-color); color: var(--text-color); font-family: var(--font-family); display: flex; justify-content: center; align-items: start; height: 100vh; gap: 27px; padding: 56px 0; } aside { background-color: var(--itens-background); border-radius: 10px; height: 100%; padding: 40px 16px; text-align: center; }

Você linkou o css no arquivo html? Se não esse pode está sendo o problema

coloca no head, vou mandar um código de demonstração:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/styles.css">
    <title>Lista de Compras</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <h1>Lista de Compras</h1>
    <input type="text" id="input_item" placeholder="Digite um item">
    <button id="salvar_item">Salvar</button>
    <button id="adicionar_Button">Adicionar Filme</button>

    <h2>Lista de Tarefas</h2>
    <div id="tarefasListContainer"></div>
    
    <h2>Lista de Compras</h2>
    <ul id="mainListContainer"></ul>
    
    <h2>Lista de Filmes</h2>
    <ul id="lista_de_filmes"></ul>
<script src="./JS/scripts.js"></script>
</body>
</html>

Bem no ínicio você vai ver <link rel="stylesheet" href="./css/styles.css">, encaminha o href de acordo como está armazenado seu css no projeto. Mas se você estiver usando algum framework, por favor mandar o framework e a parte do código que está sendo importado o css.