*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif;
}

body{
background:linear-gradient(135deg,#050014,#1a0033,#000);
color:white;
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
padding:20px;
}

.container{
max-width:700px;
width:100%;
text-align:center;
}

h1{
font-size:40px;
margin-bottom:10px;
color:#00ffff;
}

p{
margin-bottom:20px;
font-size:18px;
}

.top-bar{
display:flex;
justify-content:space-around;
flex-wrap:wrap;
margin-bottom:25px;
gap:10px;
}

.info{
background:rgba(255,255,255,.1);
padding:12px 20px;
border-radius:15px;
font-weight:bold;
min-width:120px;
}

.board{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:10px;
margin:25px auto;
max-width:500px;
}

.square{
aspect-ratio:1;
border-radius:10px;
cursor:pointer;
transition:.2s;
}

.square:hover{
transform:scale(1.05);
}

button{
padding:15px 35px;
border:none;
border-radius:40px;
font-size:18px;
font-weight:bold;
cursor:pointer;
background:linear-gradient(45deg,cyan,magenta);
color:black;
margin-top:15px;
}

button:hover{
transform:scale(1.05);
}

@media(max-width:600px){

.board{
grid-template-columns:repeat(4,1fr);
}

h1{
font-size:30px;
}

}