* {
    box-sizing: border-box;
}
/*  body  */
body {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    margin: 0;    
    padding: 0;    
}
/*  Wrapper */
#wrapper {
    display: grid;
    grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr);
    grid-auto-rows: minmax(0px, auto);   
}
/*  header  */
header {
   background-color:  rgb(51, 47, 47);
   /*background-color: black;*/
    color: white;
    /*font-family: 'Eczar', serif; 
    font-family: 'Eczar', serif;
    font-family: 'Mogra', cursive;*/
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;   
    letter-spacing: 2px;
    grid-column: 4 / 9;
    grid-row: 1 / 2; 
}
/*  Nav */
nav {
    font-weight: 800;
    top: 0; 
    position: sticky;  
}
/*  nav ul  */
nav ul {
    list-style-type: none ;
    margin: 0;
    padding: 0;      
    display: flex;
    flex-flow: row nowrap;    
}
nav ul li {
   width: 100%;      
}
/*  nav ul a    */
nav ul li a {
    text-decoration: none;
    padding: 10px;
    margin: 10px;
    color: white; 
        
}
nav a {
    padding: 1rem;
    display: block;    
    text-align: center;   
}
/*     colored nav hover for each item  */
a.color1:hover {
    background-color: #155E9B;
    color: black;
    /*border-radius: 35%;*/
    padding: 1rem;
    /*transition: background-color 0.5s;*/ 
}
a.color2:hover {
    background-color: rgb(4, 249, 4);
    color: black;
     /*border-radius: 35%;*/
    padding: 1rem;
    /*transition: background-color 0.5s;*/ 
}
a.color3:hover {
    background-color: yellow;
    color: black;
     /*border-radius: 35%;*/
    padding: 1rem;
    /*transition: background-color 0.5s;*/ 
}
a.color4:hover {
    background-color: orange;
    color: black;
     /*border-radius: 35%;*/
    padding: 1rem;
    /*transition: background-color 0.5s;*/ 
}
a.color5:hover {
    background-color: red;
    color: black;
     /*border-radius: 35%;*/
    padding: 1rem;
    /*transition: background-color 0.5s;*/ 
}
/*  Eggland title below */


/*  this is for the word "Eggland" title below   */
.title {
    background-color: rgb(51, 47, 47);
    color:white;
    /*font-family: 'Eczar', serif;
    font-family: 'Mogra', cursive;*/
    font-family: Arial, Helvetica, sans-serif;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    grid-column: 1 / 4;
    grid-row: 1 / 2;
}
/*  this is for the word "Gaming" title below   
.title2 {
    background-color: rgb(75, 73, 73);
    color:white;
    font-family: 'Eczar', serif;
    font-family: 'Mogra', cursive;
    font-size: 40px;
    font-weight: bold;    
    grid-column: 3 / 4;
    grid-row: 1 / 2;
}
*/

/*  this is for the word "Eggland"  below  */
.name {
    margin: 0;
    padding: 0;
}
/*  this is for the word Gaming title below , to indent / tab */
.tab {
    margin-left: 40px;    
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
}
 /* side bars below  */
 /* this is for left side bar    */
.sidebar {
    background-image: url(vertrainbowcompress.jpg);
    background-size: cover;
    background-position: center;
   /* background-repeat:repeat-y;*/
    opacity: 1;
    margin: 0;
    padding: 0;
    top: 0;
    bottom: 0;
    grid-column: 1 / 2;
    grid-row: 2 / 8;
}
/*  this is for right side bar   */
.sidebar2 {
    background-image: url(vertrainbowcompress.jpg);
    background-size: cover;
    background-position: center;
    /*background-repeat:repeat-y;*/
    opacity: 1;
    margin: 0;
    padding: 0;
    top: 0;
    bottom: 0; 
    grid-column: 8 / 9;
    grid-row: 2 / 8;
}
/*  Home Page main below */
.heropic {
    height: 300px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(pexels-onurhan-ke\ compress-min.jpg);
    grid-column: 2 / 8;
    grid-row: 2 / 3;     
}
/*   Welcome to Eggland Gaming intro    */
.welcome {
    background-color: black;
   /* height: 50px;*/
    font-size: 2rem;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: skyblue;
    /*text-decoration-thickness: 5px; */
    text-decoration: underline solid rgb(5, 177, 245) 15%;
    grid-column: 2 / 8;
    grid-row: 3 / 4;
} 
/*  for written paragraph on home page  */
.words { 
    background-color: rgb(14, 14, 14);    
    grid-column: 2 / 8;
    grid-row: 4 / 5;
}
.speak {
    font-size: 20px;
    text-indent: 70px;
    line-height: 1.8;
    margin: 40px; 
    
}
/*  for pictures at bottom of home page ;*/
.pictures {
    background-color: black;     
    font-size: 1.5rem;    
    text-align: center;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    grid-column: 2 / 8;
    grid-row: 5 / 6;
}
.VRcaption  {
    margin-bottom: 20px;
}
.vrglass {
    resize: both;
    width: 300px;
    height: 300px;
    margin-left: 10px;
    margin-right: 0;
}
.ramcaption {
    margin-bottom: 20px;
}
.ram {
    resize: both;
    width: 300px;
    height: 300px;
    margin: 0;
    padding: 0;
   /* margin: 5px 5px 5px 5px;
    padding: 5px 5px 5px 5px;*/

  /*  grid-column: 4 / 5;
    grid-row: 4 / 5;*/
}
.tournament {
    resize: both;
    width: 300px;
    height: 300px;
    margin-right: 10px;
    margin-left: 0; 

   /* grid-column: 7 / 8;
    grid-row: 4 / 5;*/
}
footer {
    background-color: black;
    font-size: 1.5rem;
    font-weight: 500;
    padding: 20px 20px 20px 20px;
    display: flex;
    justify-content: space-evenly;
    grid-column: 2 / 8;
    grid-row: auto;    
}
.email {
    color: rgb(5, 177, 245);
    display: flex;
    justify-content: center;
    align-items: center;
}


@media only screen and (max-width: 992px){

        .title {
            background-color: black;
            flex-flow: column nowrap;
            grid-column: 2 / 8;
            grid-row: 1 / 2;
        }

        header {
            background-color:  rgb(51, 47, 47);     
            grid-column: 2 / 8;
            grid-row: 2 / 3; 
        }

        nav ul {
            flex-flow: column nowrap;
        }
         
        li {
            border: solid black 1px;
        }         

        a.color1:hover {             
            border-radius: 0;            
            /*transition: background-color 0.5s;*/ 
        }

        a.color2:hover {           
            border-radius: 0;            
            /*transition: background-color 0.5s;*/ 
        }

        a.color3:hover {            
            border-radius: 0;           
            /*transition: background-color 0.5s;*/ 
        }

        a.color4:hover {            
            border-radius: 0;            
            /*transition: background-color 0.5s;*/ 
        }

        a.color5:hover {                
            border-radius: 0;            
            /*transition: background-color 0.5s;*/ 
        }

         /* home Page below */

         .sidebar {
            display: none;
        }

        .sidebar2 {
            display: none;
        }

        .heropic {
            grid-column: 2 / 8;
            grid-row: 3 / 4;
        }

        .welcome {
            grid-column: 2 / 8;
            grid-row: 4 / 5;
        }

        .words {            
            padding-bottom: 50px;
            grid-column: 2 / 8;
            grid-row: 5 / 6;
        }

        .pictures {
            grid-column: 2 / 8;
            grid-row: 6 / 7;
        }

}


@media only screen and (max-width: 768px){

        header {
            text-align: center; 
           /* margin-top: 30px;  */         
            grid-column: 1 / 9;
            grid-row: 2 / 3;
        }

        .title{
            text-align: center;
            top: 0;
            width: 100%; /* Full width */         
           /* position: sticky;*/
           /* z-index: 1;*/

            grid-column: 1 / 9;
            grid-row: 1 / 2;
        }

        /*.sidebar {
            display: none;
        }

        .sidebar2 {
            display: none;
        }*/


        /*  home Page below */

        .heropic {
            display: none;           
        }

        .welcome {
            background-color:  rgb(75, 73, 73);
            height: 100px;
            display: flex;
            align-items: center;
            
            grid-column: 1 / 9;
            grid-row: 3 / 4;
        }

        .intro {
            margin: 15px;
            text-align: center;
        }

        .words {
            grid-column: 1 / 9;
            grid-row: 4 / 5;
        }

        /*.pictures {
            display: none;
        }*/
        
        /*  footer below    */       

        footer {
            grid-column: 1 / 9;           
           grid-row: 7 / 8;
        }



}






/*  The End */