/* =========================================================
   MY PLAYSTATION 3 SITE
   2008-2010 PS3 FANSITE STYLE
   ========================================================= */

* {
  box-sizing: border-box;
}

html {
  background: #05070a;
}

body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(circle at 50% 0%, #1b2b3b 0%, #0a1118 38%, #030508 100%);
  color: #c8d4df;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  min-height: 100vh;
}

/* =========================================================
   MAIN SITE
   ========================================================= */

#wrapper {
  width: 900px;
  max-width: 96%;
  margin: 18px auto;
  background: #0a1016;
  border: 1px solid #3c5061;
  box-shadow:
    0 0 0 1px #020305,
    0 0 25px rgba(0, 0, 0, 0.9);
}

/* =========================================================
   HEADER
   ========================================================= */

#header {
  min-height: 82px;
  padding: 15px 20px;

  background:
    linear-gradient(
      to bottom,
      #34495a 0%,
      #263a4b 38%,
      #152532 50%,
      #0b141d 51%,
      #182a38 100%
    );

  border-bottom: 1px solid #506679;
  box-shadow:
    inset 0 1px rgba(255,255,255,0.22),
    inset 0 -1px #05080b;
}

#header h1 {
  margin: 0;
  color: #edf6fc;
  font-size: 24px;
  font-weight: normal;
  letter-spacing: 1px;
  text-shadow:
    0 1px 2px #000,
    0 0 8px rgba(160, 200, 230, 0.15);
}

#header p {
  margin: 5px 0 0 2px;
  color: #91a7b9;
  font-size: 10px;
}

/* =========================================================
   NAVIGATION
   ========================================================= */

#nav {
  padding: 7px 10px;
  text-align: center;

  background:
    linear-gradient(#1c2b38, #080e14);

  border-bottom: 1px solid #334755;
}

#nav a {
  display: inline-block;

  margin: 0 2px;
  padding: 6px 16px;

  color: #d9e6ef;

  background:
    linear-gradient(
      to bottom,
      #3c566b 0%,
      #293e50 47%,
      #152532 48%,
      #0c151d 52%,
      #243b4c 100%
    );

  border: 1px solid #50687a;
  border-radius: 2px;

  text-decoration: none;
  font-size: 10px;
  font-weight: bold;

  text-shadow: 0 1px 2px #000;

  box-shadow:
    inset 0 1px rgba(255,255,255,0.2),
    0 1px 2px #000;
}

#nav a:hover {
  color: #ffffff;

  background:
    linear-gradient(
      #58748a,
      #334c60 48%,
      #1c2e3d 52%,
      #3d596e
    );

  border-color: #7891a4;
}

#nav a:active {
  background: #0b1218;
}

/* =========================================================
   NEWS BAR
   ========================================================= */

#news {
  height: 24px;
  line-height: 24px;

  overflow: hidden;

  background: #05090d;
  border-bottom: 1px solid #293b48;

  color: #8298aa;
  font-size: 10px;
}

#news strong {
  padding: 0 10px;
  color: #c4d4df;
}

/* =========================================================
   CONTENT
   ========================================================= */

#content {
  padding: 14px;
}

/* Main pages can use a full-width layout */
#main {
  width: 100%;
}

/* Sidebar */
#sidebar {
  width: 100%;
  margin-top: 14px;
}

/* =========================================================
   BOXES
   ========================================================= */

.box {
  margin-bottom: 14px;

  background:
    linear-gradient(#111b24, #090f15);

  border: 1px solid #354a59;

  box-shadow:
    inset 0 1px rgba(255,255,255,0.04),
    0 2px 5px #000;
}

.box-title {
  padding: 8px 11px;

  color: #e4edf3;

  background:
    linear-gradient(
      to bottom,
      #3a5265 0%,
      #2a4051 47%,
      #172733 48%,
      #0e1820 52%,
      #243b4b 100%
    );

  border-bottom: 1px solid #4b6375;

  font-size: 11px;
  font-weight: bold;

  text-shadow: 0 1px 2px #000;

  box-shadow:
    inset 0 1px rgba(255,255,255,0.18);
}

.box-content {
  padding: 12px;
  line-height: 1.55;
}

/* =========================================================
   HEADINGS / TEXT
   ========================================================= */

h1,
h2,
h3 {
  color: #e5eef5;
}

h2 {
  font-size: 17px;
}

h3 {
  font-size: 13px;
}

p {
  margin: 6px 0 11px;
}

small {
  color: #718798;
}

a {
  color: #8eafd0;
}

a:hover {
  color: #d9edff;
}

/* =========================================================
   GAME COLLECTION
   ========================================================= */

.game-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 14px;

  width: 100%;
}

/* Individual game */
.game {
  min-width: 0;
  padding: 8px;

  background:
    linear-gradient(
      #182631,
      #0b1218
    );

  border: 1px solid #394f5f;

  box-shadow:
    inset 0 1px rgba(255,255,255,0.05),
    0 2px 4px #000;

  transition: border-color 0.15s;
}

.game:hover {
  border-color: #6b8598;

  background:
    linear-gradient(
      #203441,
      #0d161e
    );
}

/* Game covers */
.game img {
  display: block;

  width: 100%;
  height: 285px;

  object-fit: cover;

  background: #05080b;

  border: 1px solid #020405;

  box-shadow:
    0 2px 5px #000;
}

/* Game title */
.game-title {
  margin-top: 8px;

  color: #e2edf5;

  font-size: 11px;
  font-weight: bold;

  line-height: 1.3;
}

/* Publisher / genre */
.game-info {
  margin-top: 4px;

  color: #7f96a8;

  font-size: 9px;
  line-height: 1.45;
}

/* PLAYSTATION 3 label */
.ps3-label {
  margin-top: 7px;
  padding-top: 5px;

  border-top: 1px solid #293c49;

  color: #637c8e;

  font-size: 8px;
  letter-spacing: 1px;
}

/* =========================================================
   SIDEBAR LINKS
   ========================================================= */

#sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#sidebar li {
  margin-bottom: 5px;
}

#sidebar li a {
  display: block;

  padding: 6px 8px;

  color: #9db4c5;

  background:
    linear-gradient(#17242e, #0b1218);

  border: 1px solid #293e4b;

  text-decoration: none;

  font-size: 10px;
}

#sidebar li a:hover {
  color: #e4f2fc;

  background:
    linear-gradient(#253a49, #111c25);

  border-color: #536b7c;
}

/* =========================================================
   STATUS
   ========================================================= */

.status {
  color: #91a7b7;
  font-size: 10px;
}

.status strong {
  color: #d9e5ed;
}

.online {
  color: #82ad91;
}

.offline {
  color: #ad7777;
}

/* =========================================================
   NOTICES
   ========================================================= */

.notice {
  margin: 10px 0;
  padding: 9px;

  background: #080e14;

  border: 1px dashed #405766;

  color: #8da3b3;

  font-size: 10px;
}

.construction {
  padding: 8px;

  background: #0b1117;

  border: 1px dashed #536977;

  color: #aabac6;

  text-align: center;

  font-size: 10px;
}

/* =========================================================
   HORIZONTAL RULE
   ========================================================= */

hr {
  height: 1px;

  margin: 14px 0;

  background: #2b3c49;

  border: 0;
}

/* =========================================================
   WEB BUTTONS
   ========================================================= */

.web-buttons {
  text-align: center;
}

.web-button {
  display: inline-block;

  width: 88px;
  height: 31px;

  margin: 2px;

  line-height: 31px;

  color: #d9e5ed;

  background:
    linear-gradient(#3a5367, #101920);

  border: 1px solid #526b7d;

  text-decoration: none;

  font-size: 8px;
  font-weight: bold;

  text-shadow: 0 1px 2px #000;
}

.web-button:hover {
  background:
    linear-gradient(#526e83, #182936);

  color: #fff;
}

/* =========================================================
   IMAGES
   ========================================================= */

img {
  max-width: 100%;
}

.image-border {
  padding: 3px;

  background: #05080b;

  border: 1px solid #3d5262;
}

/* =========================================================
   FOOTER
   ========================================================= */

#footer {
  padding: 13px;

  background:
    linear-gradient(#17232d, #080d12);

  border-top: 1px solid #354b59;

  color: #61798a;

  text-align: center;

  font-size: 9px;
  line-height: 1.6;

  box-shadow:
    inset 0 1px rgba(255,255,255,0.04);
}

#footer a {
  color: #7894a8;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  #wrapper {
    width: 96%;
    max-width: none;
    margin: 8px auto;
  }

  #header h1 {
    font-size: 19px;
  }

  #nav a {
    padding: 5px 9px;
    margin-bottom: 3px;
  }

  .game-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .game img {
    height: 260px;
  }
}

@media (max-width: 430px) {

  #content {
    padding: 8px;
  }

  .game-grid {
    grid-template-columns: 1fr;
  }

  .game img {
    height: auto;
    max-height: none;
  }
}