Spaces:
Running
Running
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); | |
* { | |
box-sizing: border-box; | |
} | |
body { | |
margin: 0; | |
padding: 0; | |
background: linear-gradient(135deg, #ece9e6, #ffffff); | |
font-family: 'Roboto', 'Segoe UI', Tahoma, sans-serif; | |
color: #333; | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
justify-content: flex-start; | |
min-height: 100vh; | |
} | |
.container { | |
width: 90%; | |
max-width: 900px; | |
margin-top: 40px; | |
text-align: center; | |
} | |
#gameInfo { | |
font-size: 1.5rem; | |
margin-bottom: 1rem; | |
background: #fff; | |
padding: 0.75rem 1rem; | |
border-radius: 8px; | |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); | |
display: inline-block; | |
} | |
#startBtn { | |
background: #4CAF50; | |
color: #fff; | |
border: none; | |
border-radius: 4px; | |
padding: 0.75rem 1.5rem; | |
font-size: 1rem; | |
display: block; | |
margin: 0 auto 1rem; | |
cursor: pointer; | |
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); | |
transition: background 0.3s ease; | |
} | |
#startBtn:hover { | |
background: #45a049; | |
} | |
canvas { | |
background: #fff; | |
border-radius: 8px; | |
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | |
margin: 0 auto; | |
display: block; | |
} | |
#message { | |
margin-top: 1rem; | |
font-size: 1.25rem; | |
min-height: 1.5em; | |
} | |
#message.correct { | |
color: #28a745; | |
} | |
#message.wrong { | |
color: #dc3545; | |
} | |
#message.clear { | |
color: #17a2b8; | |
} | |