/*All code in this CSS file is from Mark Shufflebottom's Github. I have commented out things I did not need for my own design.*/

* {
    box-sizing: border-box; /*This is how you make the divs include the PADDING and the BORDER, but NOT THE MARGIN*/
}

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr); /*This is to repeat the columns x12, and make it 1 fractional width each*/
    grid-gap: 10px; /*Controls the margin/space between grid columns and rows*/
}

.cell {
    background-color: rgb(239, 228, 255); /*This changes full background colour ONLY*/
    /*height: 100px;*/
    color: #f236bf; /*This changes text colour ONLY*/
}

/*Small devices*/
[class*="col"] {
    grid-column-end: span 12; /*Makes it mobile first by spanning the full grid, making it a 1 column grid visually*/
}

nav {
    background: #999;
    /*padding: 5px;*/
    text-align: center;
}

nav ul {
    /*This is talking to the unoreder navigational list ONLY*/
    list-style-type: none;
    padding: 0;
    margin: 0;
}

nav li {
    /*This is talking to the nav list items ONLY*/
    display: inline-block;
    /*text-align: center; */
    /* ^--- This affects individual list items - THIS WAS ON IN OG DOC---------------------*/
}

nav a {
    /*This talks to the anchor tags (links) ONLY*/
    text-decoration: none;
    padding: 10px 20px;
    color: #000;
    /*background: rgb(136, 136, 136);*/
    display: inline-block;
    transition: all 0.7s;
}

nav a:hover {
    color: #fff;
    background: #333;
}

/*Below 601px width - typically mobile*/
@media only screen and (max-width: 600px) {
    .sm1 {
        grid-column-end: span 12;
    }
    .sm2 {
        grid-column-end: span 6;
    }
    .sm3 {
        grid-column-end: span 4;
    }
    .sm4 {
        grid-column-end: span 3;
    }
    .sm6 {
        grid-column-end: span 2;
    }
    .sm12 {
        grid-column-end: span 1;
    }
}

/*Above 601px width - typically tablet*/
@media only screen and (min-width: 601px) {
    .md1 {
        grid-column-end: span 12;
    }
    .md2 {
        grid-column-end: span 6;
    }
    .md3 {
        grid-column-end: span 4;
    }
    .md4 {
        grid-column-end: span 3;
    }
    .md6 {
        grid-column-end: span 2;
    }
    .md12 {
        grid-column-end: span 1;
    }
}

/*Above 1025px width - typically desktop*/
@media only screen and (min-width: 1025px) {
    .col1 {
        grid-column-end: span 12; /*This makes a single column grid row because the grid is set to 12 columns total*/
    }
    .col2 {
        grid-column-end: span 6; /*This makes a 2 column grid*/
    }
    .col3 {
        grid-column-end: span 4; /*This makes a 3 column grid*/
    }
    .col4 {
        grid-column-end: span 3; /*This makes a 4 column grid*/
    }
    .col6 {
        grid-column-end: span 2; /*This makes a 6 column grid*/
    }
    .col12 {
        grid-column-end: span 1; /*This makes a 12 column grid*/
    }
}