body {
margin: 0;
font-family: 'Pixelify Sans', monospace;
overflow-x: hidden;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #0f0f14;
    color: #ffffff;
  }
}

.content {
padding: 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
max-width: 1000px;  /*keeps content narrow*/
margin: 0 auto;  /*centres content*/
}

.spacer {
width: 100vw;
height: 300vh;
}

.ending {
width: 100vw;
background-color: #161c1d;
color: #ffffff;
display: flex;
flex-direction: column;
padding-left: 10px;
margin-top: 250px;
font-family: Arial;
font-size: 70%;

}

.banner {
position: sticky;
top: 0;
width: 100%;
height: 10vh;
z-index: 1000;
background: linear-gradient(135deg, #9735aa, #cfa2fd);
display: flex;
justify-content: center;
align-items: center;
}

.banner img {
height: 80%;
}

#board {  /*for pong*/
background-color: black;
display: flex;
margin: 0 auto;
}

.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 20px;
max-width: 1000px;
margin: 0 auto;
}

.box {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
border-radius: 8px; /*rounds corners*/
height: 400px;
}

.box img {
width: 100%;
}

.box-link {
text-decoration: none;
color: inherit;
display: block;
}

.no-scroll {
  overflow-y: hidden;
}