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

body {
  background-color: #000000;
  color: #ccc;
  font-family: 'Courier New', monospace;
  background-image: url('https://i.pinimg.com/736x/da/ee/3c/daee3caef906cf9b8782aefbb975764a.jpg');
  background-size: 50px 50px; /*cover;*/ /*80px 80px;*/
  background-repeat: repeat;
  background-attachment: fixed;

  cursor: url('https://cur.cursors-4u.net/games/gam-14/gam1391.ani'), 
          url('https://cur.cursors-4u.net/games/gam-14/gam1391.png'), 
            pointer;
            
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

body:active {
  cursor: url('https://cur.cursors-4u.net/games/gam-14/gam1392.png'), auto;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.15) 2px,
    transparent 4px
  );
  z-index: 0;
  pointer-events: none;
}

@keyframes flicker {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  52% {
    opacity: 0.85;
  }
}
.container {
  display: grid;
  grid-template-areas: 
  "header header header"
  "menu menu menu" 
  "left main main" 
  "footer footer footer";
  grid-template-columns: 1fr 4fr 2fr;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
  width: 900px;
  max-width: 100%;
  margin: 20px auto;
  padding: 8px;
}

.menu {
  grid-area: menu;
  background: #000;
  border: 1px solid #000;
  box-shadow: 0 0 8px rgba(255,255,255,0.05);
  text-align: center;
  height: 125px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu img {
  width: 100%; height: 100%; object-fit: cover;
}

header {
  grid-area: header;
  text-align: center;
  justify-content: center;
  align-items: center;
  padding: 0px;
  background-color: #1a1a1a;
  border: 1px solid #666;
  font-size: 13px;
  display: flex;
  height: 40px
}

.left {
  grid-area: left;
  padding: 6px;
  background: #1a1a1a;
  color: #ccc;
  font-size: 13px;
  border: 1px solid #555;
  font-family: 'UnifrakturCook', cursive;
  width: 133px;
}

.btn {
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  color: #ccc;
  background-color: #000;
  padding: 5px 0;
  width: 100%;
  border: 2px solid #2e2e2e;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all 0.3s ease;
  text-align: center;
  text-shadow: 1px 1px 2px #000;
  text-decoration: none;
}

.btn:hover {
  background: #141414;
  color: #fff;
  border-color: #ccc;
  box-shadow: 0 0 8px #ccc, inset 0 0 4px #000;
  text-shadow: 1px 1px 4px #ccc;
}

.btn:active, a.btn:active {
  transform: scale(0.98);
  box-shadow: inset 0 0 10px #2e2e2e;
}


main {
  grid-area: main;
  padding: 6px;
  background: #303030 url('https://i.pinimg.com/736x/83/97/db/8397dbc7929f4d47134706ee72fec81c.jpg') repeat fixed;
  background-size: 100px 100px;
  color: #fff;
  border: 1px solid #555;
  font-size: 13px;
}

footer {
  grid-area: footer;
  text-align: center;
  padding: 6px;
  border: 1px solid #555;
  background: #111;
  font-size: 13px;
}

.grade-quadro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.quadro {
  display: flex;
  gap: 10px;
  padding: 10px;
  border: 1px solid #555;
  height: auto;
  width: auto;
  background: #1a1a1a;
  font: bold 12px 'Courier New', monospace;
  color: #ccc;
}

.quadro img {
  width: 100px; 
  height: 100px; 
  object-fit: cover;
}

.quadro .texto {
  word-wrap: break-word; 
  overflow: hidden;
}

.updates {
  animation: blink 0.8s steps(1, start) infinite;
  color: red;
  font: bold 16px 'Press Start 2P', monospace;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;
}

@keyframes blink { 50% { opacity: 0; } }

.divider {
  height: 2px;
  background: linear-gradient(to right, transparent, #000, transparent);
  margin: 16px 0;
  border: none;
}

h2 { 
  text-align: center; 
}