* {
    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-size: 25px;   
    letter-spacing: 2px;
    grid-column: 4 / 8;
    grid-row: 1 / 2; 
}
/*  Nav */
nav {
    font-weight: 500;
    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-size: 40px;
    font-weight: bold;
    grid-column: 2 / 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: 1 / 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: 1 / 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;
}