"Updated CSS styling for various elements, including h1, container, g…

…ame, box, and reset, with added media queries for responsive design."

README.md

@@ -0,0 +1,34 @@
+# Tic Tac Toe
+A simple game of Tic Tac Toe created using HTML, CSS, and JavaScript.
+
+## Live Demo
+
+You can try out the live version of the application here: https://mitgajera.github.io/Tic-Tac-Toe
+
+## Features
+
+* Play as X or O
+* Try to get three in a row
+* Easy to use interface
+
+## Technologies Used
+
+* HTML
+* CSS
+* JavaScript
+
+## How it Works
+
+1. Click on a square to place your piece
+2. Try to get three in a row
+3. If all squares are filled and no one has won, the game is a draw
+
+## Future Development
+
+* Add more features to the game
+* Implement a more robust game logic
+* Improve the user interface and user experience
+
+## Contributing
+
+If you'd like to contribute to this project, please fork the repository and submit a pull request. All contributions are welcome.

style.css

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 * {
     margin: 0;
     padding: 0;
@@ -70,4 +71,174 @@ h1{
     color: white;
     margin-left: 15px;
     background-color: rgb(0, 0, 0)
+=======
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background-color: blanchedalmond;
+    font-family: "Poppins", sans-serif;
+    font-weight: 100;
+    font-style: normal;
+}
+
+h1 {
+    text-align: center;
+    margin-top: 150px;
+    margin-right: 30px;
+}
+
+.container {
+    height: 60vh;
+    display: flex;
+    text-align: center;
+    justify-content: center;
+    margin-top: 55px;
+
+}
+
+.game {
+    height: 40vmin;
+    width: 50vmin;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+}
+
+.box {
+    height: 15vmin;
+    width: 15vmin;
+    border-radius: 5px;
+    border: none;
+    background-color: rgb(255, 215, 146);
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    font-size: 45px;
+    color: red;
+}
+
+.reset {
+    display: flex;
+    justify-content: center;
+    margin-top: -50px;
+    margin-left: -30px;
+}
+
+.reset #reset-btn {
+    padding: 7px 20px;
+    border-radius: 5px;
+    border: none;
+    font-size: 15px;
+    cursor: pointer;
+    color: white;
+    background-color: rgb(219, 186, 129)
+}
+
+.reset #ng-btn {
+    padding: 8px 20px;
+    border-radius: 5px;
+    border: none;
+    font-size: 15px;
+    cursor: pointer;
+    color: white;
+    margin-left: 15px;
+    background-color: rgb(0, 0, 0)
+}
+
+@media only screen and (min-width: 992px) and (max-width: 1199px) {
+    .container {
+        height: 65vh;
+    }
+
+    .game {
+        height: 45vmin;
+        width: 55vmin;
+    }
+
+    .box {
+        height: 18vmin;
+        width: 18vmin;
+    }
+}
+
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+    .container {
+        height: 60vh;
+    }
+
+    .game {
+        height: 40vmin;
+        width: 50vmin;
+    }
+
+    .box {
+        height: 15vmin;
+        width: 15vmin;
+    }   
+}
+
+@media only screen and (max-width: 767px) {
+    .container {
+        display: flex;
+        justify-content: center;
+        height: 20vh;
+    }
+
+    h1 {
+        display: flex;
+        justify-content: center;
+        margin-top: 150px;
+        margin-right: 4px;
+    }
+
+    .game {
+        display: flex;
+        justify-content: center;
+        width: 80vmin;
+    }
+
+    .box {
+        height: 20vmin;
+        width: 20vmin;
+    }
+
+    .reset {
+        display: flex;
+        justify-content: center;
+        margin-left: 5px;
+    }
+}
+
+@media only screen and (min-width: 360px) {
+    .container {
+        display: flex;
+        justify-content: center;
+        height: 50vh;
+    }
+
+    h1 {
+        display: flex;
+        justify-content: center;
+        margin-top: 150px;
+        margin-right: 4px;
+    }
+
+    .game {
+        display: flex;
+        justify-content: center;
+        width: 80vmin;
+    }
+
+    .box {
+        height: 20vmin;
+        width: 20vmin;
+    }
+
+    .reset {
+        display: flex;
+        justify-content: center;
+        margin-left: 5px;
+    }
+>>>>>>> b352cd0 ("Updated CSS styling for various elements, including h1, container, game, box, and reset, with added media queries for responsive design.")
 }