[data-tab-content] {
    display: none;
}

.active[data-tab-content] {
    display: block;
}


body{
    background-color: black;
    color: white;
}

footer{
    display: block;
    text-align: center;
    padding: 3px;
    background-color: #303030;
    color: gray;
    position: static;
    box-shadow: 0px 10px 10px rgb(22, 22, 22) inset;
}

/*tabs system*/
.tabs {
    display: flex;
    justify-content: space-around;
    list-style-type: none;
    margin: 0;
    padding: 0;
    border-bottom: 3px solid white;
}

.tab {
    cursor: pointer;
    padding: 10px;
    border: 1px solid white;
    border-radius: 10px 10px 0px 0px;
}

.tab.active {
    background-color: grey;
}

.tab:hover {
    background-color: darkgray;
}

/*image Pixelation*/
img.pixel{
    image-rendering: pixelated;
}
/*Game profile*/

div.games div img {
  background-color: black;
  margin-top: 16px;
  margin-bottom: -16px;
  margin-right: 16px;
  padding: 16px;
  border-radius: 32px;;
  border-top: 3px solid white;
  border-bottom: 3px solid white;
  height: 128px;
  width: 256px;
}

div.games div {
  margin-bottom: 64px;
}

div.games div a {
  color: white; text-decoration: none;
}

div.gtest div h3 {
  border: 1px solid wheat;
}

div.game{
  background-color: #2a2a2a;;
  padding: 16px;
  padding-left: 32px;
  border-radius: 32px;
  margin: 32px;
  margin-left: 64px;
  margin-right: 256px;

}

/*icons*/
.quote{
 margin-bottom: 90px; 
}

i{
  font-weight: bold;
}

.profile {
  width: 128px;
  border-radius: 32px;
  float: left;
  margin-right: 16px;
}

/*Blog*/

div.post{
  background-color: #2a2a2a;
  padding: 16px;
  padding-left: 32px;
  border-radius: 32px;
  margin: 32px;
  margin-left: 64px;
  margin-right: 256px;
  
}