html, body, .grid-container { height: 100%; margin: 0;}

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 0.5fr 1fr);
  gap: 1px 1px;
  grid-template-areas:
    "MainTitle MainTitle MainTitle"
    "Character Blank-Space Artifacts"
    "Items Items Items"
    "Items-List Items-List Items-List";
  background-image: url('Background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.MainTitle { 
  grid-area: MainTitle; 
  text-align: left;
}

.MainButton {
  position:absolute;
  transition-duration: 0.4s;
  transition: .5s ease;
  top: 9%;
  left: 80%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #0A0A0B;
  color: white;
  padding: 20px 80px;
  cursor: pointer;
  border-style: groove;
  border-color: #C2C0C4;
  border-radius: 12px;
  border-width: 5px;
  font-size: 20px;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  font-weight: bold;
}

.MainButton:hover {
  background-color: #45474A;
}

.Button {
  transition-duration: 0.4s;
  padding: 6px 6px;
  cursor: pointer;
  background-color: #0A0A0B;
  color: white;
  border-style: groove;
  border-color: #C2C0C4;
  border-radius: 12px;
  border-width: 5px;
}

.Button:hover {
  background-color: #45474A;
}

.Button:active {
  background-color: #0A0A0B;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

.slider{
  -webkit-appearance: none;
  width: 80%;
  height: 10px;
  background: #FFFFFF;
  border-radius: 5px;
  outline: none;
  opacity: 0.95;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: yellow;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #4CAF50;
  cursor: pointer;
}

.Character {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 0.5fr 1.5fr repeat(2, 0.5fr);
  gap: 1px 1px;
  grid-template-areas:
    "Title Title"
    "Image Randomise"
    "Name Name"
    "Description Description";
  grid-area: Character;
  background-color: #45474A;
  color: white;
  border-style: groove;
  border-color: #C2C0C4;
  border-radius: 0px;
  border-width: 5px;
  height: 70vh;
  width: 40vw;
}

.Title { grid-area: Title; font-size: 20px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; text-align: center; text-decoration: underline; font-weight: bold;}

.Image { grid-area: Image; text-align: center;}

.Randomise { grid-area: Randomise; font-size: 10px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; text-align: center;}

.Name { grid-area: Name; font-size: 20px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; text-align: center; width: 40vw; font-weight: bold;}

.Description { grid-area: Description; font-size: 15px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; text-align: center;}

.Artifacts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 0.6fr 0.5fr 1.9fr 1fr;
  gap: 1px 1px;
  grid-template-areas:
    "TitleArtifacts TitleArtifacts TitleArtifacts"
    "Artifacts-Slider Artifacts-Slider Randomise-button"
    "ArtifactDisplay ArtifactDisplay ArtifactDisplay"
    "Command-Message Command-Message Command-Message";
  grid-area: Artifacts;
  background-color: #45474A;
  color: white;
  border-style: groove;
  border-color: #C2C0C4;
  border-radius: 0px;
  border-width: 5px;
  height: 70vh;
  width: 40vw;
}

.TitleArtifacts { grid-area: TitleArtifacts; font-size: 20px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;  text-align: center; text-decoration: underline; font-weight: bold;}

.Artifacts-Slider { grid-area: Artifacts-Slider; font-size: 15px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;  text-align: center;}

.Randomise-button { grid-area: Randomise-button; font-size: 10px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; text-align: center;}

.ArtifactDisplay { 
  grid-area: ArtifactDisplay; 
  font-size: 10px;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  text-align: center;}

.ArtifactRow {display: grid; grid-template-columns: repeat(auto-fill, 25%);}

.ArifactColumn {display: grid; grid-template-columns: repeat(auto-fill, 25%);}

.ArtifactDisplay img {
  display: block;
  margin-top: 8px;
  margin-left: auto;
  margin-right: auto;
  width: 50px;
  text-align: center;
}

.Command-Message { grid-area: Command-Message; font-size: 15px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; text-align: center;}

.Blank-Space { grid-area: Blank-Space; width: 15vw; height: 70vh;}

.Items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1px 1px;
  grid-template-areas:
    "CommonItemsSlider LengendaryItemsSlider EquipmentOptionsSlider LunarItemsSlider"
    "UncommonItemsSlider BossItemsSlider LunarEquipmentOptionSlider Randomise-Button";
  grid-area: Items;
  background-color: #45474A;
  color: white;
  border-style: groove;
  border-color: #C2C0C4;
  border-radius: 0px;
  border-width: 5px;
}

.CommonItemsSlider { grid-area: CommonItemsSlider; font-size: 15px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; text-align: center;}

.UncommonItemsSlider { grid-area: UncommonItemsSlider; font-size: 15px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; text-align: center;}

.LengendaryItemsSlider { grid-area: LengendaryItemsSlider; font-size: 15px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; text-align: center;}

.BossItemsSlider { grid-area: BossItemsSlider; font-size: 15px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; text-align: center;}

.EquipmentOptionsSlider { grid-area: EquipmentOptionsSlider; font-size: 15px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; text-align: center;}

.LunarEquipmentOptionSlider { grid-area: LunarEquipmentOptionSlider; font-size: 15px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; text-align: center;}

.LunarItemsSlider { grid-area: LunarItemsSlider; font-size: 15px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; text-align: center;}

.Randomise-Button { grid-area: Randomise-Button; font-size: 15px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; text-align: center;}

.Items-List { 
   grid-area: Items-List; 
   background: rgb(58,158,75);
   background: linear-gradient(45deg, rgba(58,158,75,1) 20%, rgba(7,25,184,1) 100%);
   font-size: 10px; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
   color: white;
   text-align: center;
}