<section class="grid">
        <div class="full-row">
            <h1>CSS Variables</h1>
        </div>
        <div class="displaced">
            <p>Trying out CSS Variables for the first time. I've used and worked with SASS before, but I've never tried out CSS variables. I'm interested in how useful they could potentially be, and I've seen plenty of uses that make me think they are certainly worth using.</p>
            <p>I wish I could spend more time making this look nice, but I think an imperfect start is better than not starting at all. Don't you?</p>
        </div>
        <div class="number">
            <h2>001</h2>    
        </div>
    </section>

/* Trying out CSS Variables for the first time. I've used and worked with SASS before, but I've never tried out CSS variables. I'm interested in how useful 
        they could potentially be, and I've seen plenty of uses that make me think they are certainly worth using.*/
        :root {
            --main-bg-color: rgba(255,125,125, .75);
            --primary-bg-color: rgba(125, 125, 255, .50);
            --secondary-bg-color: rgba(125, 255, 125, .75);
            --main-text-color: #111111;
            --secondary-text-color: red;
            --tertiary-text-color: blue;
        }

        body section.grid {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            background-color: var(--main-bg-color, purple); /* You can provide a fallback value if the variable is not defined. That's pretty cool. */
        }

        section.grid {
            display: block;
        }

        @supports (display: grid) {

        section.grid {
            max-width: 75%;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: minmax(100px, 1fr);
            
        }

        div.full-row {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: var(--tertiary-text-color);
            grid-column: 1 / 4;
            background-color: var(--primary-bg-color, slateblue);
            padding: 0 1rem;
        }

        div.displaced {
            grid-row: 4 / 5;
            grid-column: 2 / 4;
        }

        div.displaced h1 {
            color: var(--main-text-color);
        }

        div.number {
            grid-row: 3 /4;
            background-color: var(--secondary-bg-color, black);
            display: flex;
            flex-direction: column;
            justify-content: start;
            align-items: flex-start;
        }

        div.number h2{
            writing-mode: vertical-lr;
            margin: 0;
            font-size: 3em;
            color: var(--secondary-text-color, white);
        }

    }