html {
    font-size: 16px;
}

.grid{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 10px;
}
article, aside{
    
     font-family: "Source Sans 3", sans-serif;
  font-weight: <weight>;
  font-style: normal;
}
.cell{
    background-color: rgb(225, 246, 255);
    min-height: 50px;
    font-family: "Amarante", serif;
  font-style: normal;
}
.calendar{
    
    min-height: 50px;
}
.cellheader{
    background-color: rgb(181, 225, 246);
    min-height: 25px;
    font-size: 24px;
    font-family: "Amarante", serif;
  font-style: normal;
}
.cellnav{
    background-color: rgb(225, 246, 255);
    padding: 5px;
    text-align: center;
    display: inline-block; 
    font-family: "Amarante", serif;
}

nav ul{
    list-style-type: none;
    padding: 0;
    display: inline-block; 
}
nav li{
    display: inline;
    text-align: center;
}
nav a.current{
    color: #fff;
    background: #333;
    cursor: default;
}
a{
    text-decoration: none;
    padding: 5px 10px;
    color: #000;
    display: inline-block;
    width: 100px;
    font-family: "Amarante", serif;
}
a:hover{
    color: #fff;
    background: #333;
}

.logo{
    width: =50px;
    border-radius: 50%;
}
/* TCG and Merch */
.ming{
    max-width: 30%;
    align-items: left;
}
.ming2{
    max-width: 30%;
    align-items: right;
}
.callayout{
    
    min-height: 100px;
}

img{
    max-width: 100%;
    height: auto;
}
.miniimage{
    max-width: 40px;
}
h4, h2, .pkmngi{
    text-align: center;
    font-family: "Amarante", serif;
  font-style: normal;
}

.mainpkm, .otherpkm, .TCGintro, .home, .home2{
    
    font-family: "Source Sans 3", sans-serif;
  font-weight: <weight>;
  font-style: normal;
}
.TCGintro, .clubnews, .pkmngi{
    background: rgb(255, 162, 162);
}

.news1{
    background: rgb(255, 255, 255);
}
  
li{
   list-style-type:square
}
.compimg{
    max-height: 200px;
}
.hheader{
    grid-column: 1 / 13;
    font-size: 32px;
    font-family: "Amarante", serif;
  font-style: normal;
}
.banner{
    max-height: 300px;
}



/* default - small devices 
[class*="col"]{
    grid-column-end: span 12;
}

/* below 600px typically mobile */
@media only screen and (max-width: 601px) {
    
 header, footer, nav , .banner, .pkmngi { grid-column-end: span 12; 
    }
    
    aside, article{
        grid-column: 1 /13;
    }
   
    .m1{
        grid-row: 7;
    }
   
    .o1{
       height: 200px;
        grid-column: 1 / 13;
        grid-row: span 2;
        margin-left: 120px
    }
    .calendar{
        grid-row: 3;
    }
    .pheader{
        grid-column-end: span 12;
    }
    .oimg, .simg, .himg, .home2{
        grid-column: 1 / 7;
    }
    .october, .september, .limg, .home{
        grid-column: 7 / 13;
    }
    
    
    .upevents, .mainpokemonheader, .clubnews{
        grid-column: 1 / 13;
    }
     
     
     .home2{
         font-size: 16px;
        grid-column: 1 / 7;
         grid-row: 6;
    }
     .home{
         font-size: 16px;
        grid-column: 7 / 13;
    }
    .banner{
        width: 600px;
    }
}

/* above 601px typically tablet */
@media only screen and (min-width: 601px) {
header , nav , footer , .TCGintro , .banner, .pkmngi{ grid-column-end: span 12; 
    }
    aside{
        grid-column: 1 / 7;
        grid-row: span 5;
    }
   
    .mainpokemonheader, .mainpkm, .officialppost, .himg, .calendar{
        grid-column: 1 / 7;
    }
   
     .TCGintro{
        grid-column-end: span 12;
    }
    .clubnews{
        grid-column: 1 / 7;
        grid-row: span 4
    }
    .upcoming{
        grid-column: 7 / 13;
        grid-row: span 8;
    }
    .m1{
        grid-column: 7 / 13;
        grid-row: span 3;
        
    }
    .o1{
        grid-column: 1 / 7;
        height: 300px;
        
    }
    .upevents, .tournreg, .pheader, .limg, .cellgrid,  .otherpkm , .merchgrid{
        grid-column: 7 / 13;
    }
    
   
    .oimg, .simg{
        grid-column: 7 / 10;
    }
    .october, .september{
        grid-column: 10 / 13;
    }
    .home2{
        font-size: 23px;
        grid-column: 1 / 7;
         grid-row: 6;
    }
     .home{
         font-size: 23px;
        grid-column: 7 / 13;
    }
    .banner{
        width:800px;
    }
 }

/* above 1025px typically desktop */
@media only screen and (min-width: 1025px) {
   header , nav , footer{ grid-column-end: span 12; 
    }
    .banner, .pkmngi, .TCGintro{
        grid-column: 2 / 12;
    }
   .mainpkm,{
        grid-column: 1 / 7;
    }
     .otherpkm{
        grid-column: 7 / 13;
    }
    .m1{
        grid-column: 7 / 12;
        grid-row: span 2;
        max-height: 600px;
        margin-left: 100px;
    }
    .o1{
        grid-column: 2 / 7;
        grid-row: span 2;
        height: 400px;
        margin-left: 100px;
    }
     .tournreg{
        max-width: 100%;
        grid-row: span 1;
    }
    .himg, .calendar, .mainpkm, .clubnews{
        grid-column: 2 / 7;
    }
    .clubnews{
        font-size: 20px;
    }
    .october, .september{
        grid-column: 9 / 12;
    }
    
    .oimg, .simg{
        grid-column: 7 / 9;
    }
    .cellgrid, .upevents{
        grid-column: 7 / 12;
    }
  .home2{
      font-size: 23px;
        grid-column: 2 / 7;
         grid-row: 6;
    }
     .home{
         font-size: 23px;
        grid-column: 7 / 12;
    }
    .banner{
        width: 2024px;
    }
    
}