:root {

    --1px: 0.06rem;
    --4px: 0.25rem;
    --8px: 0.5rem;
    --12px: 0.75rem;
    --16px: 1rem;
    --24px: 1.5rem;
    --32px: 2rem;
    --40px: 2.5rem;
    --100px: 6.25rem;
    --256px: 16.00rem;
    --300px: 18.75rem;
    --400px: 25rem;
    --600px: 37.5rem;
    --768px: 48rem;
    --1000px: 62.5rem;

    --hue: 210;
    --saturation: 3%;
    --lightness: 13%;

    --background-color: hsl(var(--hue), var(--saturation), var(--lightness));
    --primary-color: #4CAF50;
    --primary-color-hover: #45a049;
    --secondary-color: #007bff;
    --secondary-color-hover: #0056b3;
    --danger-color: #ff0000;
    --danger-color-hover: #cc0000;
    --text-color: #E0E0E0;
    --border-color: #ddd;
    --button-border-radius: var(--4px);
    --font-size: var(--16px);
    --padding: var(--16px);
    --margin-bottom: var(--24px);
    --font-family: 'Verdana', Geneva, sans-serif;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    border: none;
}

html, body {
    height: calc(100% - var(--100px)); /* Sørg for at HTML og body har fuld højde */
    margin: 0;
    padding: 0;
}
  
body {
    font-family: var(--font-family);
    background-color: var(--background-color);
    margin: 0;
}