/* =========================
   Names may not match what is seen on the site, 
for example a "top left" grid might be in the middle.
This is because I've deleted and restarted so many times,
but kept the old names. Gonna clear that up so noone 
is confused by the terrible naming scheme.
   ========================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: hidden;
  background: #000;
  color: #fff;
  font-family: Arial, sans-serif;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

#clock {
  font-size: 2rem;
  color: #44ff00;
  text-shadow: 0 0 5px #00ff15aa;
}

.outer-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #61ff00;
}

.header,
.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  color: #ff0;
  padding: 5px;
}

.middle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "top-middle top-left";
  text-align: center;
  margin: 5px 0;
}

.cell {
  position: relative;
  padding: 1px;
  border: 5px solid #444;
  background: #222;
}

.top-right {
  grid-area: top-right;
  padding: 5px;
  background-color: #000000;
  border: 0px solid #000000;
}

.top-middle {
  grid-area: top-middle;
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 15px;
  border: solid;
  border-radius: 5px;
  border-color: #13ff00;
  margin: 5px 0;
  overflow: auto;
  height: 545px;
  width: 98%;
  box-sizing: border-box;
  background-color: #000000;
}

.top-left {
  grid-area: top-left;
  display: flex;
  justify-content: center;
  align-content: center;
  padding: 15px;
  border: solid;
  border-radius: 5px;
  border-color: #13ff00;
  margin: 5px 0;
  overflow: auto;
  height: 545px;
  width: 98%;
  box-sizing: border-box;
  background-color: #000000;
}

.box {
  position: relative;
  background: #000;
  border-radius: 0px;
  padding: 50px;
  margin-bottom: 50px;
  color: #00cc00;
  text-shadow: 1px 1px #7700ff;
  width: 450px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  overflow-x: hidden;
  text-align: left;
}

.grid-box {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  background: #000;
  overflow-x: hidden;
}

.directory {
  background-color: #666;
  background-image: url("images/stars.gif");
  padding: 5px;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;

  width: fit-content;
  margin: 0 auto;
}

.directory img {
  transition: transform 0.2s ease;
}

.directory img:hover {
  transform: scale(1.3);
}

@media (max-width: 817px) {
  .middle-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "top-right"
      "top-middle"
      "top-left";
  }
}