/* =========================
   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.
   ========================= */


body {
    margin-top:0px;
  background: #000;
  font-family: monospace;
  color: #00cc00;
  overflow-x: hidden;
}

.layout {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 25px;
  align-items: flex-start;
}

.directory.right {
  position: sticky;
  top: 20px;

  width: 118px;
  height: fit-content;

  background: #000;
  border: solid #0100ff;
  color: white;
  padding: 0px;
  border-radius: 50px;
  text-align: center;
}

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

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

.container {
  max-width: 1000px;
  margin: auto;
  margin-top: 50px;
  padding: 20px;
  background: url(images/bgs/pattern%20387.jpg);
  border: solid;
  border-color: #160b17;
  border-radius: 100px;
}

.name-bar {
  flex-wrap: wrap;
  justify-content: center;
  margin-top:25px;
  padding:0px;
}


.cell {
  background: #000;
  text-align: center;
  margin: 10px 10px 10px 10px;
  position: relative;
  border: solid;
  border-color: #09ff00;
  padding: 20px;
  border-radius: 100px;
}

img {
  max-width: 100%;
  height: auto;
}
footer {
  position: relative;
}
[class^="spin-overlay"] {
  position: relative;
  margin-inline: auto;
  transition: transform 0.6s;
}

[class^="spin-overlay"]:hover {
  transform: scale(1.3);
}
[class^="tv-gif"]:hover {
  transform: scale(1.3);
}

@media (max-width: 700px) {
  .grid {
    grid-template-columns: 1fr;
  }
}