@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body { 
  font-family: 'Press Start 2P', cursive; 
  margin:0; padding:0; 
  background:white; 
  color:black;
}
header, footer { background:#87b1ff; color:white; padding:15px; text-align:center; }
header img { height:250px; vertical-align:middle; }
nav { margin-top:10px; }
nav a { 
  color:white; 
  margin:0 10px; 
  text-decoration:none; 
  padding:6px 12px; 
  background:#cc0000; 
  border-radius:0; 
  transition: background 0.3s, transform 0.2s; 
}
nav a:hover { background:#1E90FF; transform: scale(1.05); }
nav a.active { background:#660000; font-weight:bold; }

.container { padding:20px; text-align:center; }

.squares { display:flex; justify-content:center; gap:20px; margin:30px 0; flex-wrap:wrap; }
.square { 
  width:250px; height:150px; 
  background:red; 
  display:flex; align-items:center; justify-content:center; 
  text-decoration:none; 
  color:white; 
  font-weight:bold; 
  border:4px solid black;
  image-rendering: pixelated;
  transition: background 0.3s, transform 0.2s; 
}
.square:hover { background:#1E90FF; transform: scale(1.05); }

footer a { color:white; text-decoration:underline; transition: color 0.3s; }
footer a:hover { color:#1E90FF; }

@media (max-width: 600px) {
  .squares { flex-direction:column; align-items:center; }
  .square { width:80%; max-width:300px; height:100px; }
}
/* Textbox styling */
.textbox {
  margin:20px auto;
  max-width:600px;
  text-align:left;
  line-height:1.5;
}

/* Button grid (Home page) */
.button-grid {
  display:flex;
  justify-content:center;
  gap:15px;
  flex-wrap:wrap;
  margin:20px 0;
}
.button-grid a {
  background:#cc0000;
  color:white;
  text-decoration:none;
  padding:10px 20px;   /* smaller height than before */
  border:4px solid black;
  display:inline-block;
  min-width:150px;
}
.button-grid a:hover {
  background:#1E90FF;
  color:white;
}

/* om mig image placeholder */
.image-placeholder {
  width:100%;
  max-width:400px;
  aspect-ratio:1/1;  /* keeps it square */
  background:#ddd;
  margin:20px auto;
}

/* Shared wrapper for search and list */
#install-wrapper {
  width:65%;
  margin:20px auto;
}

#search {
  width:100%;
  padding:10px;
  margin-bottom:20px;
  font-family: inherit;
}

#gameList {
  list-style:none;
  padding:0;
  margin:0;
  text-align:left;
}

#gameList li {
  margin:5px 0;
}

#gameList li a {
  color:#cc0000;
  text-decoration:none;
}

#gameList li a:hover {
  color:#1E90FF;
}

@media (max-width: 600px) {
  #install-wrapper {
    width:95%;
  }
}