CSS Variables course - drafts

A full course on CSS Variables
    html, body {
        background: #ffeead; /* beige */
        color: #ff6f69; /* red */
    }
    
    #navbar {
        background: #ff6f69;
    }
    
    #navbar a {
        color: #ffeead;
    
    }
    
    :root {
        --text-color: #96ceb4;
        --bg-color: #ffeead;
    }
    
    html, body {
        background: var(--bg-color); /* beige */
        color: var(--text-color); /* red */
    }
    
    #navbar {
        background: var(--text-color);
    }
    
    :root {
        --red: #ff6f69;
        --beige: #ffeead;
        --yellow: #ffcc5c;
    }
    
    html, body {
        background: var(--beige);
        color: var(--red);
    }
    
    #navbar {
        
    }
    :root {
        --text-color: #ff6f69;
        --bg-color: #ffeead;
    }
    
    html, body {
        background: var(--bg-color);
        color: var(--text-color);
    }
    
    #navbar {
        background: var(--text-color);
        --navbar-color: blue;
    }
    /* variable declarations */
    :root {
        --text-color: #ff6f69;
        --bg-color: #ffeead;
    }
    
    .grid {
        --column-layout: 200px 200px;
    }
    
    .item {
        --item-border: 10px solid #ffcc5c;
    }
    
    var root = document.querySelector(':root');
    var rootStyles = getComputedStyle(root);
    var bgColor = rootStyles.getPropertyValue('--bg-color')
    console.log('bgColor: ', bgColor);
    
    root.style.setProperty('--bg-color', '#88d8b0')
    
    
    /* declaring variables */
    :root {
        --text-color: #ff6f69;
        --bg-color: #ffeead;
        --base-font-size: 12;
    }
    
    /* setting font sizes */
    footer > p {
        font-size: calc(var(--base-font-size) * 1px);
    }
    
    h1 {
        font-size: calc(var(--base-font-size) * 3px);