/* grid container */
.grid {
    display:grid;
    grid-template-areas:
        'header'
        'left-sidebar'
        'right-sidebar'
        'main-content'
        'footer';
    text-align: justify;
}

/* general column padding */
.grid > * {
    padding:1rem;
}

/* assign columns to grid areas */
.grid > .header {
    grid-area:header;
    background:transparent;
}
.grid > .left-sidebar {
    grid-area:left-sidebar;
    background:transparent;
}
.grid > .right-sidebar {
    grid-area:right-sidebar;
    background:transparent;
}
.grid > .main-content {
    grid-area:main-content;
    background:transparent;
}
.grid > .footer {
    grid-area:footer;
    background:transparent;
}

/* tablet breakpoint */
/* at the min-width, the website turns into "mobile view" by collapsing the header, sidebars, and main contents into a vertical view*/
@media (min-width:768px) {
    .grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            'header header'
            'left-sidebar right-sidebar'
            'main-content main-content'
            'footer footer';
    }
}

/* desktop breakpoint */
@media (min-width:1024px) {
    .grid {
        /* to make website contents fit the full width of the page when on desktop, set the repeat value to (4, 1fr). to fill half of the page, set it to (8, 1fr).*/
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas:
            'header header header header'
            'left-sidebar main-content main-content right-sidebar'
            'footer footer footer footer';
    }
}

/* body */
body {
    /* sets the global background colour*/
    background-color: black;
    /* sets the global font colour*/
    color: white;
    /* sets global font*/
    font-family: Arial, sans-serif;
    /* sets the margin and padding for the edge of the website*/
    margin: 2;
    padding: 2;
}
/* link colours */
/* general link colour*/
a, a:link,
/* colour of a visited link */
a:visited,
/* colour of a link when on mouseover/hover */
a:hover,
/* colour of the link of the current page */
a:active {
    color: red;
}