/*  
    Beñat Morisset de Pérdigo
    13/09/2018
*/

/*****************Body*******************/
body
{
  /*font: 20px/1.5 Consolas;/**/
  /*font: 20px/1.5 'Roboto', sans-serif;/**/
  font: 20px/1.5 'Source Code Pro', monospace;/**/
  
  padding:0;
  margin:0;
  
  background-color: #000000;
  color: #ffffff;
  
  /*
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-pixelated;
  image-rendering: pixelated;*/
}

/*****************General Links*******************/
a
{
  color:Purple;
  background-color: transparent;
  text-decoration:none; /*removes underline*/
}
a:hover
{
  color:Yellow;
  background-color: transparent;
  font-weight:bold;
}
/*
body p a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}
body p a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
*/

/*****************Gamebox content*******************/

/*****************Name Link*******************/

/*for the index, there is no link, and
it should be displayed centered and */
#indexheaderh1
{
  float:none;
  color:red;
}

/*should not react on hover*/
.name_link a
{
}
.name_link a
{
  color:Red;
  background-color: transparent;
  text-decoration:none; /*removes underline*/
}
.name_link a:hover
{
  color:Red;
  background-color: transparent;
  text-decoration:none; /*removes underline*/
}

/**********Border***************/
#chaosborder
{ 
  border: 10px solid transparent;
  padding: 45px;
  margin: 10px;
  border-color: rgb(0, 0, 0); /*rgb(0, 6, 238);*/
}

/***************Header******************/
header
{
  text-align: center;
}
header h1
{
  float:left;
}
/****************Nav*******************/
nav
{
  float:right;
}
nav ul
{
  float:right;
  padding-top:45px; /*to make it aligned with the h1*/
}
nav ul li
{
  display: inline-block; /*to avoid separating PIXEL ART*/
}
nav a
{
  color:#ffffff; /*white*/
  text-decoration:none; /*removes underline*/
  text-transform: uppercase;
  font-size:16px;
}
nav a:hover
{
  color:Yellow;
  font-weight:bold;
}
.highlight, .current a
{
  color:Yellow;
  font-weight:bold;
}

.secret a
{
  color:Black;
}

/***************Lists******************/
ul
{
  margin:0;
  padding:0;
  text-align: center;
}
li
{
  list-style: none; /* removes bullets */
  display:inline; /*displayed in line instead of column */
  padding:0 20px 0 0; /* top right bot left */
}

/******************Featured*******************/
.featured
{
}

.featured li div
{
  display: inline-block;
  width:29%;
  overflow: hidden;
}

.featured li a div
{
  display: inline-block;
  width: 40%;
  max-width: 256px;
}

.featured li a div
{
  width:calc(40% - 2*2px); /*padding is 2px*/
  padding:2px;
}
.featured li a div:hover
{
  border:2px solid yellow;
  padding:0px;
}

#AA_image
{ 
  width: 512px;
  height: 512px;
  max-width: 512px;
  max-height: 512px;
}

/*****************Container*******************/
.container
{
  width:90%; /*of window width*/
  margin:auto; /*to have it in the middle*/
  overflow:hidden; /* so whats outside is hidden */
  
  display: block; 
}

.container a p
{
  color:White;
  text-decoration:none;
}

.container a p, .container a p:hover, .container a p:link, .container a p:visited, .container a p:link:active, .container a p:visited:active
{
  color:White;
  background-color: transparent;
  text-decoration:none; /*removes underline*/
  font-weight:normal;
}


/**********************************************************/
/**                        Games                         **/
/**********************************************************/

/*****************GameBox*******************/

.container a .gamebox
{
  background-color: #000000;
  overflow:hidden; /* so whats outside is hidden */
  margin: 5px 0 5px 0; /* to have vertical separation between the games */
  border:2px solid #333333;
  padding:0;
}
.container a .gamebox:hover
{
  background-color: #000000;
  overflow:hidden; /* so whats outside is hidden */
  margin: 5px 0 5px 0; /* to have vertical separation between the games */
  border:2px solid yellow;
  padding:0;
}

.container a .gamebox img
{
  height:254px;/*254px;*/
  float:left;
  padding:2px;
}

/*****************Trailer*******************/
.trailer
{
  background-color: #000000;

  margin: 35px 0 15px 0;
  border:2px solid #333333;
  
  /*display: block; /*not sure if this is needed*/ 
}

.trailer iframe
{
  /*make video adjust to window size but dont get bigger than 480p*/
  width: 100%;
  height: calc(0.5*100vw);
  max-height: 480px;
  max-width: 640px;
  float: center;
  
  /*to make it centered*/
  display: block; 
  margin: auto;
  text-align: center
}

.trailer img
{
  /*make image adjust to window size but dont get bigger than 480p*/
  width: 100%;
  height: calc((9/16)*100vw);
  max-width: 640px;
  max-height: calc((9/16)*640px);
  
  float: center;
  
  /*to make it centered*/
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.trailer h3
{
  padding-top: 10px;
  /*color: yellow;*/
  background-color: transparent;
  /*text-decoration: underline;*/
}

.trailer div
{
  padding-top: 16px;
}

.trailer h5
{
  padding-left: 16px;
}

.trailer h5,
.trailer p.inl
{
  display: inline;
  
  /*vertical-align: top;*/
}

/**********************************************************/
/**                      Pixel Art                       **/
/**********************************************************/
/*not needded as chaos border sets pixelated the whole body*/
.pixelperfect
{
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-pixelated;
  image-rendering: pixelated;
}


/**********************************************************/
/**                        Mobile                        **/
/**********************************************************/

/* Media Querie used to change layout for mobiles (tablet width limit=768px)*/
@media(max-width:1000px) /*1000 for it to change before problems in Pixel Art*/
{
  /*4Dbug*/
  /*body
  {
    display:none;
  }*/
  
  /**********Background, body and border***************/
  #chaosborder { 
    border: 8px solid transparent;
    padding: 0;
    margin: 8;
    border-color: rgb(0, 0, 0);/*rgb(0, 6, 238);*/
  }
  
  /*******************Header*******************/
  header h1
  {
    float:none;
    color:red;
  }
  /*******************Nav*******************/
  nav
  {
    float:none;
  }
  nav ul
  {
    float:none;
    padding-top:auto;
  }

  /*****************Container*******************/
  .container
  {
    width:100%; /*of window width*/
    margin:none; /*to have it in the middle*/
    overflow:hidden; /* so whats outside is hidden */
  }

  /*****************PixelArt*******************/
  img /*should be only for pixelart images*/
  {
    height:256px;
    width:256px;
  }
  
  /******************Featured*******************/
  .featured
  {
  }
  
  .featured li div /*used for AA images*/
  {
    display: inline-block;
    width:256px;
    /*width: 29%*/
  }

  .featured li a div
  {
    display: inline-block;
    width:256px;
  }

  .featured li a div
  {
    display: inline-block;
    /*border:2px solid #333333;*/
  }
  
  #AA_image { 
    width: 256px;
    height: 256px;
  }
  
  /*****************GameBox*******************/
  .container a .gamebox
  {
    height:auto; /*to have the text wrap under the image if needed*/
  }
  .container a .gamebox img
  {
    width:254px;
    height:auto;
    float:center;
    padding:2px;
    display: block; 
  }

}

/* Media Querie used to change layout for mobiles */
@media(max-width:512px)
{
  
  /*****************GameBox*******************/
  
  /*
  For very narrow screens, there is no room after the image
  to have any text. So we make the image span the full div width
  and have the text at its bottom
  */
  .container a .gamebox img
  {
    width:calc(100% - 2*2px);
    height:auto;
    float:center;
    padding:2px;
    display: block; 
  }
  .container a .gamebox h3
  {
    clear: both; /*to make title be in new line */
    text-align: center;
  }
}