/* Style the header */
.header {
  background-color: #9acdee;
  padding: 1px;
  text-align: center;
}

.gridlayout {
  background-color: #c6e2f5;
  display: grid;
  grid-template-columns: 1fr 0.6fr 1.4fr;
  gap: 15px;
  padding: 15px;
}

/* Create three equal columns that floats next to each other */
.column {
  background-color: #c6e2f5;
  float: left;
  width: 33.33%;
  padding: 15px;
}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* Generic bar styles */

.barcontainer {
  position: relative;
  border: 3px solid black;
  border-radius: 5px 5px 0 0;
  width: 100%;
  margin: 0 auto;
  height: 100%;
  z-index: 1;
}

.barcontainerheader {
  display: inline;
  position: absolute;
  width: 100%;
  height: 10%;
  background: #261aaf;
  border-bottom: 3px solid black;
  font-size: 1.0em;
  color: white;
  text-align: center;
  z-index: 0;
}

/* XBOX bar styles */
.xboxbar {
  position: absolute;
  display: inline-block;
  bottom: 0;
  border: 1px solid black;
  border-radius: 6px 6px 0 0;
  background: #4089ef;
  width: 8%;
  text-align: center;
  color: white;
}

.xboxbarlabel {
  position: absolute;
  border-top: 2px solid black;
  background: #1e2469;
  bottom: 0;
  font-size: 1.0em;
  width: 100%;
  color: white;
}


/* XBOX 360 bar styles */

.xbox360bar {
  position: absolute;
  display: inline-block;
  bottom: 0;
  border: 1px solid black;
  border-radius: 6px 6px 0 0;
  background: #4089ef;
  width: 5%;
  text-align: center;
  color: white;
}

.xbox360barlabel {
  position: absolute;
  border-top: 2px solid black;
  background: #1e2469;
  bottom: 0;
  font-size: 0.8em;
  width: 100%;
  color: white;
}