.grid-container > .summonerSpellOneGrid { 
  grid-area: summonerSpellOne; 
  position: relative;
}
.summonerNineGrid { grid-area: summonerNine; }
.summonerSpellTwoGrid { grid-area: summonerSpellTwo; }
.grid-container > .daysAgoGrid { 
  grid-area: daysAgo; 
  font-size: 11px;
}
.barGrid { grid-area: bar; }
.winOrLossGrid { grid-area: winOrLoss; }
.summonerTenGrid {grid-area: summonerTen; }
.summonerEightGrid {grid-area: summonerEight;}
.summonerSevenGrid {grid-area: summonerSeven;}
.summonerSixGrid {grid-area: summonerSix;}
.summonerFiveGrid {grid-area: summonerFive;}
.summonerFourGrid {grid-area: summonerFour;}
.summonerThreeGrid {grid-area: summonerThree;}
.summonerTwoGrid {grid-area: summonerTwo;}
.summonerOneGrid {grid-area: summonerOne;}
.grid-container > .portraitOneGrid {
  grid-area: portraitOne;
  position:relative;
}
.grid-container > .portraitTwoGrid {
  grid-area: portraitTwo;
  position:relative;
}
.grid-container > .portraitThreeGrid {
  grid-area: portraitThree;
  position:relative;
}
.grid-container > .portraitFourGrid {
  grid-area: portraitFour;
  position:relative;
}
.grid-container > .portraitFiveGrid {
  grid-area: portraitFive;
  position:relative;
}
.grid-container > .portraitSixGrid {
  grid-area: portraitSix;
  position:relative;
}
.grid-container > .portraitSevenGrid {
  grid-area: portraitSeven;
  position:relative;
}
.grid-container > .portraitEightGrid {
  grid-area: portraitEight;
  position:relative;
}
.grid-container > .portraitNineGrid {
  grid-area: portraitNine;
  position:relative;
}
.grid-container > .portraitTenGrid {
  grid-area: portraitTen;
  position:relative;
}
.grid-container > .itemOneGrid {
  grid-area: itemOne;
  position: relative;
}
.grid-container > .itemTwoGrid {
  grid-area: itemTwo;
  position: relative;
}
.grid-container > .itemThreeGrid {
  grid-area: itemThree;
  position: relative;
}
.itemFourGrid {grid-area: itemFour;}
.itemFiveGrid {grid-area: itemFive;}
.itemSixGrid {grid-area: itemSix;}
.grid-container > .trinketGrid {
  grid-area: trinket;
  position: relative;
}
.buildsGrid {grid-area: builds;}
.minutesGrid {grid-area: minutes;}
.grid-container > .playedPortraitGrid {
  grid-area: playedPortrait;
  position: relative;
}
.playedNameGrid {grid-area: playedName;}
.emptySpaceGrid {grid-area: emptySpace;}
.keystoneGrid {
  grid-area: keystone;
  position: relative;
}
.secondaryKeystoneGrid {grid-area: secondaryKeystone;}
.grid-container > .KDAGrid {
  grid-area: KDA;
  font-size: 15px;
  font-weight: bold;
  position: relative;
}
.KDAGridContent{
  position: absolute;
  bottom: 0;
  color: rgb(255, 255, 255);
  font-size: 15px;
}
.grid-container > .KDARatioGrid {
  grid-area: KDARatio;
  position: relative;
}
.emptySpaceTwoGrid {grid-area: emptySpaceTwo;}
.tierAVGNumberGrid {grid-area: tierAVGNumber;}
.CSPerMinuteGrid {grid-area: CSPerMinute;}
.killParticipationGrid {grid-area: killParticipation;}
.CSGrid {grid-area: CS;}
.levelGrid {grid-area: level;}





.grid-container {
  display: grid;
  grid-template-areas:
    'gameType gameType playedPortrait playedPortrait summonerSpellOne keystone KDA KDA level level itemOne itemTwo itemThree trinket portraitOne summonerOne summonerOne portraitSix summonerSix summonerSix'
    'daysAgo daysAgo playedPortrait playedPortrait summonerSpellOne keystone KDA KDA CS CS itemOne itemTwo itemThree trinket portraitTwo summonerTwo summonerTwo portraitSeven summonerSeven summonerSeven'
    'bar bar playedPortrait playedPortrait summonerSpellTwo secondaryKeystone KDARatio KDARatio CSPerMinute CSPerMinute  itemFour itemFive itemSix builds portraitThree summonerThree summonerThree portraitEight summonerEight summonerEight'
    'winOrLoss winOrLoss playedPortrait playedPortrait summonerSpellTwo secondaryKeystone KDARatio KDARatio killParticipation killParticipation itemFour itemFive itemSix builds portraitFour summonerFour summonerFour portraitNine summonerNine summonerNine'
    'minutes minutes playedName playedName playedName playedName emptySpaceTwo emptySpaceTwo tierAVGNumber tierAVGNumber emptySpace emptySpace emptySpace emptySpace portraitFive summonerFive summonerFive portraitTen summonerTen summonerTen';
  gap: 5px;
  background-color: #063153;
  padding: 10px;
 
  /*grid-template-rows: repeat(5, 1fr);*/
  /*grid-template-rows: 50px;*/
  /*grid-template-columns: repeat(10, 1fr);*/
 
  height: 175px;
  width: 900px;
  margin: auto;
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr;  
}

.grid-container > div {
  text-align: center;
  padding: 0px;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  color: rgb(255, 255, 255);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /*grid-template-rows: repeat(16, 1fr);
  grid-template-columns: repeat(5, 1fr);*/
}

.grid-container > .gameTypeGrid { grid-area: gameType;
  font-size: 15px;
}

.header-container > .headerSummonerNameGrid{
  grid-area: name;
  font-size: 60px;
  font-weight: bold;
  color: rgb(255, 255, 255);
  text-align: center;
  position: relative;
}

.header-container > .headerSummonerIconGrid{
  grid-area: summonerIcon;
  position: relative;
}


.header-container{
  display: grid;
  grid-template-areas:
  'name name name summonerIcon summonerIcon summonerIcon';
  height: 175px;
  width: 900px;
  gap: 5px;
  padding: 10px;
  grid-auto-rows: 1fr;
  grid-auto-columns: 1fr; 
  margin: auto;
  position: relative; 
}

.header-container > div{
  text-align: center;
  padding: 0px;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}