/*--------------------------------------------------------------
Basic responsive layout for all browsers:
--------------------------------------------------------------*/
.site {
    max-width: 2000px;
    margin: 0 auto;
  }

  /*--------------------------------------------------------------
CSS Grid layout for modern browsers:
--------------------------------------------------------------*/
@supports (grid-area: auto) {
    @media screen and (max-width: 609px) {
/*tablet and mobile*/
        .site {
            max-width: none;
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
        .topnav {
            grid-column: 1/3;
        }
        .topnav2 {
            grid-column: 1/3;
        }
        /* #resume {
            grid-column: 1/2;
        }
        #blog {
            grid-column: 2/3;
        } */
        header {
            grid-column: 1/3;
        }
        #websites h2,
        #p2 {
            grid-column: 1/3;
        }
        #websites, img {
            grid-column: 1/3;
        }
        #profile {
            grid-column: 1/3;
        }
        #couple {
            grid-column: 1/3;
        }
        #children {
            grid-column: 1/3;
        }
        #portrait {
            grid-column: 1/3;
        }
        #profile h2,
        #p1 #p2{
            grid-column: 1/2;
        }
        #profileDetails {
            grid-column: 1/3
        }
        #html {
            grid-column: 1/3;
        }
        #css {
            grid-column: 1/3;
        }
        #javascript {
            grid-column: 1/3;
        }
        #csharp {
            grid-column: 1/3;
        }
        #wordpress {
            grid-column: 1/3;
        }
        #github {
            grid-column: 1/3;
        }
        #oracle {
            grid-column: 1/3;
        }
        #php {
            grid-column: 1/3;
        }
        #mysql {
            grid-column: 1/3;
        }
        #projects {
            grid-column: 1/3;
        }
        #projects h2,
        #p2 {
           grid-column: 1/3;
        }
        #projects, img {
            grid-column: 1/3;
        }
        #word h2,
        #p2 {
            grid-column: 1/3;
        }
        #word, img {
            grid-column: 1/3;
        }
        #contact {
            grid-column: 1/3;
        }
        .contact-list {
            grid-column: 1/3;
        }
        #home h2 {
            grid-column: 1/4;
        }
        #home h3 {
            grid-column: 1/4;
        }
        .container {
            grid-column: 1/4;
        }
    }

    @media screen and (min-width: 914px) {

        .site {
            max-width: none;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
        }
        section {
            display: grid;
        }
        iframe {
            grid-column: 2/3;
        }
        #contact h2 {
            grid-column: 2/3;
        }
        .topnav {
            grid-column: 1/4;
            grid-row: 1/2;
        }
        header {
            grid-column: 1/4;
            grid-row: 2/3;
        }
        .topnav2 {
            grid-column: 1/4;
            grid-row: 3/4;
        }
        #websites {
            grid-column: 1/4;
            grid-row: 4/6;
        }
        #website1 {
            grid-column: 1/2;
            grid-row: 4/5;
        }
        #website2 {
            grid-column: 3/4;
            grid-row: 4/5;
        }
        #word1 {
            grid-column: 1/2;
            grid-row: 4/5;
        }
        #word2 {
            grid-column: 3/4;
            grid-row: 4/5;
        }
        /* #vcOver {
            grid-column: 1/2;
            grid-row: 4/5;
        }
        #biltmoreOver {
            grid-column: 3/4;
            grid-row: 4/5;
        } */
        #websites h2 {
            grid-column: 2/3;
            grid-row: 4/5;
            }
        #websiteDetails {
                grid-column: 1/4;
                grid-row: 5/6;
            }
        #profile {
                grid-column: 1/4;
                grid-row: 4/14;
            }
        #couple {
                grid-column: 1/2;
                grid-row: 4/5;
            }
        #children {
                grid-column: 2/3;
                grid-row: 5/6;
            }
        #portrait {
                grid-column: 3/4;
                grid-row: 4/5;
            }
        #profile h2, 
            #p1 {
                grid-column: 2/3;
                grid-row: 4/5;
            }
        #profileDetails {
                grid-column: 1/4;
                grid-row: 6/7;
            }
        #html {
            grid-column: 1/2;
            grid-row: 7/8;
        }  
        #javascript {
            grid-column: 2/3;
            grid-row: 8/9;
        }
        #css {
            grid-column: 3/4;
            grid-row: 7/8;
        }  
        /* #profile #p2 {
            grid-column: 2/3;
            grid-row:8/9;
        } */
        #csharp {
            grid-column: 1/2;
            grid-row: 9/10;
        }
        #github {
            grid-column: 2/3;
            grid-row: 10/11;
        }
        #wordpress {
            grid-column: 3/4;
            grid-row: 9/10;
        }
        #oracle {
            grid-column: 1/2;
            grid-row: 11/12;
        }
        #mysql {
            grid-column: 2/3;
            grid-row: 12/13;
        }
        #php {
            grid-column: 3/4;
            grid-row: 11/12;
        }
        #knowledgeDetails {
            grid-column: 1/4;
            grid-row: 13/14;
        }
        #projects {
            grid-column: 1/4;
            grid-row: 4/11;
			}
            #project1 {
                grid-column: 1/2;
                grid-row: 4/5;
            }
            #project3 {
                grid-column: 2/3;
                grid-row: 5/6;
            }
            #project2 {
                grid-column: 3/4;
                grid-row: 4/5;
            }
            #projects h2,
            #p2 {
                grid-column: 2/3;
                grid-row: 4/5;
            }
            #project4 {
                grid-column: 1/2;
                grid-row: 6/7;
            }
            #project6 {
                grid-column: 2/3;
                grid-row: 7/8;
            }
            #project5 {
                grid-column: 3/4;
                grid-row: 6/7;
            }
            #project7 {
                grid-column: 1/2;
                grid-row: 8/9;
            }
            #project8 {
                grid-column: 3/4;
                grid-row: 8/9;
            }
            
            /* #projectDetails {
                grid-column: 1/4;
                grid-row: 8/9;
            } */
            #word {
                grid-column: 1/4;
                grid-row: 4/6;
            }
            #word1 {
                grid-column: 1/2;
                grid-row: 3/4;
            }
            #word2 {
                grid-column: 3/4;
                grid-row: 3/4;
            }
            #word h2 {
                grid-column: 2/3;
                grid-row: 3/4;
                }
            #wordDetails {
                grid-column: 1/4;
                grid-row: 5/6;
                }
            #home h2 {
                grid-column: 2/3;
                grid-row: 3/4;
            }    
            #home h3 {
                grid-column: 2/3;
                grid-row: 4/5;
            }
            .container {
                grid-column: 1/4;
                grid-row: 4/5;
            }
            #contact {
            grid-column: 2/3;
            }
            .contact-list {
                grid-column: 2/3;
            }
        
        table {
            grid-column: 1/4;
            /* grid-row: 6/7;  */
        }
    }
}