:root {
    --bg-color: #fdb;
}

* {
    box-sizing: border-box;
}


body {
    background-color: var(--bg-color);
    /* background-color: wh; */
}


/* 
    below is the defualt column layout of one column, this is assuming that default is mobile screen. Then comes the media query that checks if the screen is bigger than 600px and splits the column into 2
*/
.grid-outer {
    display: grid;

    grid-template-columns: 1fr;

    /* padding: 2rem; */
}


@media (min-width: 600px) {
    .grid-outer {grid-template-columns: 1fr 1fr;}
}


.inner {
    /* background-color: #69f; */
    background-image: linear-gradient(to top, green 0%, transparent 2%, transparent 96%, green 100%);

    border: 2px solid green;

    margin: .8rem .4rem;
    padding: 1rem 1.2rem;

    border-radius: 2rem;
}

body {
    font-size: 1.2rem;

    line-height: 2.2rem;

    /* prioritize ease of reading, but still allow user to make their reading style choice. */
}

@media (min-width:600px) {
    /* .inner {
    } */
    body {
        font-size: 1.6rem;
        line-height: 2.8rem;
        margin: .8rem 4rem;
        padding: 1rem 4rem;
    }
}