body {
  background-color: #FFFFFF;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: small;
  margin: 0px;
}

header.top {
  background-color: #00A3E4;
  width: 100%;
  background-image: url(../Images/fortnite.jpg);



  height: 108px;
}

header #headerLogo {
  float: left;
  max-width: 100%;
  max-height: 100%;

}


#tableContainer {
  display: table;
  border-spacing: 10px;
}

#tableRow {

  display: table-row;
}

section#main {

  display: table-cell;
  background: #E5EDF1;
  font-size: 105%;
  padding: 15px;
  width: 60%;
  vertical-align: top;
}

section#blog {

  display: table-cell;
  background: #E5EDF1;
  font-size: 105%;
  padding: 15px;
  width: 20%;
  vertical-align: top;
}

section#Lofficial {
  align-content: flex-start;

  display: table-cell;
  background-color: #393D3E;
  width: 12%;
  padding: 5px;

  vertical-align: top;
  position: relative;


}

#Lofficial h3 {
  padding-left: 10px;
  text-transform: uppercase;
  font-size: 120%;
  padding-bottom: 15px;
  margin-bottom: 3px;
  color: #D511B3;
}

#Lofficial ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;

}

#Lofficial ul li {
  border-bottom: 1px dotted #00A5E5;
  font: 14px/1.5 helvetica, Verdana, sans-serif;

}

#Lofficial li {
  width: 100%;
  border-bottom: 1px solid #00A5E5;
  font: 14px/1.5 helvetica, Verdana, sans-serif;



}

#Lofficial li a:hover {
  width: 100%;
  border-bottom: 1px solid #FFFC4E;
  font: 14px/1.5 helvetica, Verdana, sans-serif;
  color: #B031BC;


}

#Lofficial ul li:last-child {
  border: none;
}



aside {
  display: table-cell;
  background: #ccf1ff;
  /*#fffcad*/
  font-size: 105%;
  width: 15%;
  padding: 15px;
  padding-top: 1px;
  vertical-align: top;

}

footer {
  background-color: #5E93AA;
  color: white;
  text-align: center;
  padding: 15px 0px;

  font-size: 90%;
  position: static;
  bottom: 0;
  width: 100%;
  height: 60px;


}

h1 {
  border-bottom: 5px solid #B031BC;
  font-size: 250%;
  color: black;

  /*text-decoration: underline #FFFB47 ;*/
  text-transform: uppercase;
  background-color: #E5EDF1;

}

h2 {
  font-size: 135%;
  color: #B031BC;
  text-transform: uppercase;
}


.slogan {
  color: #00A5E5;
}

.currentSeason {
  text-align: center;
  line-height: 1.8em;
}


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;

}

li {
  border-bottom: none;

  font: 14px/1.5 Helvetica, Verdana, sans-serif;
}

li:last-child {
  border: none;
}

#validator {
  float: right;
  padding-right: 0px;
}

#html5-validator {
  float: right;
  padding-right: 35px;
}

/*NAV STYLE*/
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  color: #FFFFFF;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
#navigation li a:hover {
  background-color: #C129B8;
  color: black;

}

.selected {
  background-color: #C129B8;

  color: black;
}

/*NAV STYLE END*/

a:link {
  font-weight: bold;
  color: #00A5E5;
  text-decoration: none;
  border-bottom: none;
}

a:visited {
  color: #954b4b;
  text-decoration: none;
  border-bottom: thin dotted #675c47;
}

#Lofficial a {
  color: white;
  border-bottom: thin dotted #00A5E5;

}

#navigation a {

  color: white;
}

#navigation .selected a {

  color: black;
}

ol {
  display: block;
  list-style-type: decimal;
  overflow: hidden;

  color: black;
}

.liSeasons li {
  background-color: red;
}

#seasonDiv {
  width: auto;
  border-top: solid white;
  border-bottom: solid white;
  text-align: center;

}

#countBut {
  background-color: #393D3E;
}

.imgSeasons {
  padding-top: 5px;
  padding-bottom: 5px;
  width: 200px;
  height: 200px;
  text-align: left;

}

.battleSkins {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.FlexDiv {
  width: 210px;
  height: 295px;
  /*border-style: solid;*/
  margin: 5px;
  overflow: hidden;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}





a:link {
  color: #4793AA;
  text-decoration: none;
  border-bottom: thin dotted #b76666;
}

a:visited {
  color: #4793AA;
  text-decoration: none;
  border-bottom: thin solid #675c47;
}

a:hover {
  color: #FFFD54;
  text-decoration: none;
  border-bottom: thin dotted #b76666;
}

.cardContainer {
  display: flex;
  flex-direction: column;
  /* This creates the space between the top text and the bottom price */
  justify-content: space-between;

  /* Increased height and padding to stop text from touching the edge */
  min-height: 110px;
  padding: 15px 10px 20px 10px;
  /* Top, Right, Bottom, Left */

  box-sizing: border-box;
  /* Important: keeps padding inside the height calculation */
  text-align: center;
}

.asideImg {
  max-width: 100%;
  opacity: 0.8;
}

/* loffical was at 20 and aside was at 12%*/


/* added */
/* Animated Rainbow for Icon Rarity */
.rarity-icon {
  background: linear-gradient(45deg,
      #31f7ff, #ff31ad, #ff31a2, #ff3153) !important;
  background-size: 400% 400% !important;
  animation: rainbowShift 8s ease infinite !important;
}

@keyframes rainbowShift {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Rarity Backgrounds - This fills the whole box  */
.rarity-common {
  background-color: #bebebe !important;
}

/* Grey */
.rarity-uncommon {
  background-color: #319236 !important;
}

/* Green */
.rarity-rare {
  background-color: #0070e2 !important;
}

/* Blue */
.rarity-epic {
  background-color: #9d4dbb !important;
}

/* Purple */
.rarity-legendary {
  background-color: #d37841 !important;
}

/* Orange */

/* Make sure the text is readable on the dark colors */
.FlexDiv[class*="rarity-"] .cardContainer {
  background-color: rgba(255, 255, 255, 0.8);
  /* Light overlay for the text area */
  color: black;
}

/* Ensure images don't have their own background blocking the card color */
.imgSeasons {
  background: transparent !important;
}

/* Section Header styling */
.shop-header {
  width: 100%;
  margin: 40px 0 20px 0;
  padding-bottom: 10px;
  border-bottom: 5px solid #B031BC;
  font-family: 'Luckiest Guy';
  color: black;
  text-transform: uppercase;
}

/* Center the text inside the card info area */
.cardContainer {
  padding: 10px 5px;
  text-align: center;
  /* Centers the "Name, Rarity, Price" text */
  line-height: 1.4;

}

/* Center the section headers */
.shop-header {
  text-align: center;
  width: 100%;
  margin: 40px auto 20px auto;
  display: block;
  color: black;
}

/* Ensure the images don't lean to one side */
.imgSeasons {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#countdown {
  color: #FFFC4E;
  /* Bright yellow like your hover state */
  font-family: 'Courier New', Courier, monospace;
  /* Digital look */
  text-shadow: 0 0 10px rgba(255, 252, 78, 0.7);
  padding-left: 10px;
  font-size: 2rem;


}

.item-name {

  font-size: 1.1em;
  margin-bottom: 5px;
  /* Truncates long Nike names after 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-price {
  font-weight: 900;
  font-size: 1.2em;
  color: #ffd700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  margin-top: 10px;
}