Scribd
Upload
3 views2 pages

Styles Css

The document contains CSS styles for a Tic-Tac-Toe game interface. It includes styles for the body background, game container, board layout, cells, buttons, and a result screen. The design features a linear gradient background and responsive elements for user interaction.

Uploaded by

sparshagrawal2698
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views2 pages

Styles Css

The document contains CSS styles for a Tic-Tac-Toe game interface. It includes styles for the body background, game container, board layout, cells, buttons, and a result screen. The design features a linear gradient background and responsive elements for user interaction.

Uploaded by

sparshagrawal2698
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

/* Background with linear gradient */

body {
text-align: center;
font-family: Arial, sans-serif;
background: linear-gradient(45deg, #ff9a9e, #fad0c4);
height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}

/* Game Container */
.game-container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Tic-Tac-Toe Board */
.board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 5px;
justify-content: center;
margin: 20px auto;
}

.cell {
width: 100px;
height: 100px;
background-color: #f2f2f2;
border: 2px solid #333;
font-size: 2rem;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}

.cell.taken {
pointer-events: none;
}

/* Buttons */
button {
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
background: #ff758c;
color: white;
border: none;
border-radius: 5px;
transition: 0.3s;
}

button:hover {
background: #ff5274;
}

/* Result Screen */
.result-screen {
display: none;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
text-align: center;
}

You might also like