main  {
    grid-area: main;
    text-align: center;
    display: grid;
    height: 100%;
    width: 100%;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: 0.75fr 0.5fr 2.5fr 0.25fr;
    grid-template-areas:
        "blog-title"
        "runningcode"
        "codebox"
        "more"
    
}

.blog-title  {
    grid-area: blog-title;
    align-content: center;
}

.runningcode  {
    grid-area: runningcode;
    text-align: center;
}


.more  {
    grid-area: more;
    align-content: center;
}



.codebox {
    grid-area: codebox;
    display: grid;
    height: 100%;
    width: 100%;
    justify-content: space-evenly;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 100%;
    grid-template-areas:
        "section1 section2 section3"
}

.codebox .section1  {
    grid-area: section1;
    height: auto;
    align-content: center;
}

.codebox .section2 {
    grid-area: section2;
    height: auto;
    text-align: left;
}

.codebox h4  {
    text-align: center;
}