/* toe.css */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #1a1a2e;
    margin: 0;
}
#game-container {
    text-align: center;
}
#mode-selection, #difficulty-selection {
    margin-bottom: 20px;
    color: white;
}
#board {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-gap: 5px;
    margin: 20px auto;
}
.cell {
    width: 100px;
    height: 100px;
    background-color: white;
    border: 2px solid #333;
    font-size: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.cell:hover {
    background-color: #e0e0e0;
}
#status {
    font-size: 1.2em;
    margin-bottom: 10px;
}
#restart-btn {
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
} 
button {
    margin: 5px;
    padding: 10px;
    background-color: #40407a; /* Dark gray to match border and theme */
    color: white; /* White text for contrast on dark background */
    border: solid rgba(255, 255, 255, 0.454);
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease; /* Smooth animation for hover */
}
button:hover {
    transform: scale(1.05); /* Slight scale up animation */
    background-color: #555; /* Lighter dark gray for hover, maintaining color theory */
}
button:active {
    transform: scale(0.95); /* Scale down on click for feedback */
}

/* Floating Home Button Styles */
.floating-home-btn {
    position: fixed; /* Keeps it floating on the screen */
    bottom: 20px;    /* Positioned at the bottom-right for easy access */
    right: 20px;
    background-color: #40407a; /* Matches your button background */
    color: white; /* White text/icon for contrast */
    border: solid rgba(255, 255, 255, 0.454); /* Same subtle border */
    border-radius: 50%; /* Circular shape for a modern, button-like feel */
    width: 50px; /* Compact size */
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em; /* Larger icon for visibility */
    text-decoration: none; /* No underline */
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease; /* Your smooth animation */
    z-index: 1000; /* Ensures it stays on top of other elements */
}

.floating-home-btn:hover {
    transform: scale(1.05); /* Slight scale up, matching your buttons */
    background-color: #555; /* Lighter dark gray hover */
}

.floating-home-btn:active {
    transform: scale(0.95); /* Scale down on click for feedback */
}

#ad {

	width:468px;
	height:60px;
	display:block;
	position: fixed;
	bottom: 0px;
}

	@media (max-width: 768px){
        	#ad {
            display: none;
/*             background-color: aqua; */
            }
	}