diff --git a/gym-form/Palak Aggarwal/contact.html b/gym-form/Palak Aggarwal/contact.html
new file mode 100644
index 0000000..a3b9525
--- /dev/null
+++ b/gym-form/Palak Aggarwal/contact.html
@@ -0,0 +1,238 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/gym-form/Palak Aggarwal/demo.js b/gym-form/Palak Aggarwal/demo.js
new file mode 100644
index 0000000..de55ed5
--- /dev/null
+++ b/gym-form/Palak Aggarwal/demo.js
@@ -0,0 +1,89 @@
+const signUpButton = document.getElementById('signUp');
+const signInButton = document.getElementById('signIn');
+const container = document.getElementById('container');
+
+signUpButton.addEventListener('click', () => {
+ container.classList.add("right-panel-active");
+});
+
+signInButton.addEventListener('click', () => {
+ container.classList.remove("right-panel-active");
+});
+
+
+
+
+
+
+var currentTab = 0; // Current tab is set to be the first tab (0)
+showTab(currentTab); // Display the current tab
+
+function showTab(n) {
+ // This function will display the specified tab of the form ...
+ var x = document.getElementsByClassName("tab");
+ x[n].style.display = "block";
+ // ... and fix the Previous/Next buttons:
+ if (n == 0) {
+ document.getElementById("prevBtn").style.display = "none";
+ } else {
+ document.getElementById("prevBtn").style.display = "inline";
+ }
+ if (n == (x.length - 1)) {
+ document.getElementById("nextBtn").innerHTML = "Submit";
+ } else {
+ document.getElementById("nextBtn").innerHTML = "Next";
+ }
+ // ... and run a function that displays the correct step indicator:
+ fixStepIndicator(n)
+}
+
+function nextPrev(n) {
+ // This function will figure out which tab to display
+ var x = document.getElementsByClassName("tab");
+ // Exit the function if any field in the current tab is invalid:
+ if (n == 1 && !validateForm()) return false;
+ // Hide the current tab:
+ x[currentTab].style.display = "none";
+ // Increase or decrease the current tab by 1:
+ currentTab = currentTab + n;
+ // if you have reached the end of the form... :
+ if (currentTab >= x.length) {
+ //...the form gets submitted:
+ document.getElementById("regForm").submit();
+ return false;
+ }
+ // Otherwise, display the correct tab:
+ showTab(currentTab);
+}
+
+function validateForm() {
+ // This function deals with validation of the form fields
+ var x, y, i, valid = true;
+ x = document.getElementsByClassName("tab");
+ y = x[currentTab].getElementsByTagName("input");
+ // A loop that checks every input field in the current tab:
+ for (i = 0; i < y.length; i++) {
+ // If a field is empty...
+ if (y[i].value == "") {
+ // add an "invalid" class to the field:
+ y[i].className += " invalid";
+ // and set the current valid status to false:
+ valid = false;
+ }
+ }
+ // If the valid status is true, mark the step as finished and valid:
+ if (valid) {
+ document.getElementsByClassName("step")[currentTab].className += " finish";
+ }
+ return valid; // return the valid status
+}
+
+function fixStepIndicator(n) {
+ // This function removes the "active" class of all steps...
+ var i, x = document.getElementsByClassName("step");
+ for (i = 0; i < x.length; i++) {
+ x[i].className = x[i].className.replace(" active", "");
+ }
+ //... and adds the "active" class to the current step:
+ x[n].className += " active";
+}
\ No newline at end of file
diff --git a/gym-form/Palak Aggarwal/images/favicon.png b/gym-form/Palak Aggarwal/images/favicon.png
new file mode 100644
index 0000000..ee83dfa
Binary files /dev/null and b/gym-form/Palak Aggarwal/images/favicon.png differ
diff --git a/gym-form/Palak Aggarwal/images/form_bg.jpeg b/gym-form/Palak Aggarwal/images/form_bg.jpeg
new file mode 100644
index 0000000..0cbdc4a
Binary files /dev/null and b/gym-form/Palak Aggarwal/images/form_bg.jpeg differ
diff --git a/gym-form/Palak Aggarwal/images/hero.jpeg b/gym-form/Palak Aggarwal/images/hero.jpeg
new file mode 100644
index 0000000..be98282
Binary files /dev/null and b/gym-form/Palak Aggarwal/images/hero.jpeg differ
diff --git a/gym-form/Palak Aggarwal/signup.html b/gym-form/Palak Aggarwal/signup.html
new file mode 100644
index 0000000..3251220
--- /dev/null
+++ b/gym-form/Palak Aggarwal/signup.html
@@ -0,0 +1,71 @@
+
+
+
+
+
+
+
+ sign-up form
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Welcome Back!
+
To keep connected with us please login with your personal info
+
Sign In
+
+
+
Hey There!
+
Enter your details and start journey with us
+
Sign Up
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/gym-form/Palak Aggarwal/style.css b/gym-form/Palak Aggarwal/style.css
new file mode 100644
index 0000000..278dd84
--- /dev/null
+++ b/gym-form/Palak Aggarwal/style.css
@@ -0,0 +1,241 @@
+@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
+
+* {
+ box-sizing: border-box;
+}
+
+.member{
+
+ color: #faf9f0;
+ border: 1px solid black;
+ font-size: 15px;
+ background-color: black;
+ margin-top: 20px;
+}
+
+
+
+body {
+ background:#331d14ad;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ font-family: 'Montserrat', sans-serif;
+ height: 100vh;
+ margin: -20px 0 50px;
+}
+
+h1 {
+ font-weight: bold;
+ margin: 0;
+}
+
+h2 {
+ text-align: center;
+}
+
+p {
+ font-size: 14px;
+ font-weight: 100;
+ line-height: 20px;
+ letter-spacing: 0.5px;
+ margin: 20px 0 30px;
+}
+
+span {
+ font-size: 12px;
+}
+
+a {
+ color: #333;
+ font-size: 14px;
+ text-decoration: none;
+ margin: 15px 0;
+}
+
+button {
+ border-radius: 20px;
+ border: 1px solid #0e0d0d;
+ background-color: #0c0c0c;
+ color: #FFFFFF;
+ font-size: 12px;
+ font-weight: bold;
+ padding: 12px 45px;
+ letter-spacing: 1px;
+ text-transform: uppercase;
+ transition: transform 80ms ease-in;
+ cursor: pointer;
+}
+
+button:active {
+ transform: scale(0.95);
+}
+
+button:focus {
+ outline: none;
+}
+
+button.ghost {
+ background-color:#0e0e0e8a;
+ border-color: #faf6f6;
+}
+
+form {
+ background-color: #FFFFFF;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ padding: 0 50px;
+ height: 100%;
+ text-align: center;
+}
+
+input {
+ background-color: #eee;
+ border: none;
+ padding: 12px 15px;
+ margin: 8px 0;
+ width: 100%;
+}
+
+.container {
+ background-color: #fff;
+ border-radius: 10px;
+ box-shadow: 0 14px 28px rgba(0,0,0,0.25),
+ 0 10px 10px rgba(0,0,0,0.22);
+ position: relative;
+ overflow: hidden;
+ width: 768px;
+ max-width: 100%;
+ min-height: 480px;
+}
+
+.form-container {
+ position: absolute;
+ top: 0;
+ height: 100%;
+ transition: all 0.6s ease-in-out;
+}
+
+.sign-in-container {
+ left: 0;
+ width: 50%;
+ z-index: 2;
+}
+
+.container.right-panel-active .sign-in-container {
+ transform: translateX(100%);
+}
+
+.sign-up-container {
+ left: 0;
+ width: 50%;
+ opacity: 0;
+ z-index: 1;
+}
+
+.container.right-panel-active .sign-up-container {
+ transform: translateX(100%);
+ opacity: 1;
+ z-index: 5;
+ animation: show 0.6s;
+}
+
+@keyframes show {
+ 0%, 49.99% {
+ opacity: 0;
+ z-index: 1;
+ }
+
+ 50%, 100% {
+ opacity: 1;
+ z-index: 5;
+ }
+}
+
+.overlay-container {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ width: 50%;
+ height: 100%;
+ overflow: hidden;
+ transition: transform 0.6s ease-in-out;
+ z-index: 100;
+}
+
+.container.right-panel-active .overlay-container{
+ transform: translateX(-100%);
+}
+
+.overlay {
+ background: #FF416C;
+ background-image: url(../images/hero.jpeg);
+ /* background-color: url("https://images.pexels.com/photos/136404/pexels-photo-136404.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"); */
+ /* background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
+ background: linear-gradient(to right, #FF4B2B, #FF416C); */
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-position: 0 0;
+ color: #FFFFFF;
+ position: relative;
+ left: -100%;
+ height: 100%;
+ width: 200%;
+ transform: translateX(0);
+ transition: transform 0.6s ease-in-out;
+}
+
+.container.right-panel-active .overlay {
+ transform: translateX(50%);
+}
+
+.overlay-panel {
+ position: absolute;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ padding: 0 40px;
+ text-align: center;
+ top: 0;
+ height: 100%;
+ width: 50%;
+ transform: translateX(0);
+ transition: transform 0.6s ease-in-out;
+}
+
+.overlay-left {
+ transform: translateX(-20%);
+}
+
+.container.right-panel-active .overlay-left {
+ transform: translateX(0);
+}
+
+.overlay-right {
+ right: 0;
+ transform: translateX(0);
+}
+
+.container.right-panel-active .overlay-right {
+ transform: translateX(20%);
+}
+
+.social-container {
+ margin: 20px 0;
+}
+
+.social-container a {
+ border: 1px solid #DDDDDD;
+ border-radius: 50%;
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ margin: 0 5px;
+ height: 40px;
+ width: 40px;
+}
+
diff --git a/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (819).png b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (819).png
new file mode 100644
index 0000000..6fd3efd
Binary files /dev/null and b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (819).png differ
diff --git a/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (820).png b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (820).png
new file mode 100644
index 0000000..f5d1634
Binary files /dev/null and b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (820).png differ
diff --git a/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (821).png b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (821).png
new file mode 100644
index 0000000..7711438
Binary files /dev/null and b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (821).png differ
diff --git a/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (822).png b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (822).png
new file mode 100644
index 0000000..fc5cb82
Binary files /dev/null and b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (822).png differ
diff --git a/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (823).png b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (823).png
new file mode 100644
index 0000000..92208c1
Binary files /dev/null and b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (823).png differ
diff --git a/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (824).png b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (824).png
new file mode 100644
index 0000000..3914a6e
Binary files /dev/null and b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (824).png differ
diff --git a/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (825).png b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (825).png
new file mode 100644
index 0000000..d4d12e2
Binary files /dev/null and b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (825).png differ
diff --git a/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (826).png b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (826).png
new file mode 100644
index 0000000..c9540d3
Binary files /dev/null and b/rock-paper-scissors/Palak Aggarwal/Screenshots/Screenshot (826).png differ
diff --git a/rock-paper-scissors/Palak Aggarwal/app.js b/rock-paper-scissors/Palak Aggarwal/app.js
new file mode 100644
index 0000000..003b3e6
--- /dev/null
+++ b/rock-paper-scissors/Palak Aggarwal/app.js
@@ -0,0 +1,124 @@
+// Prevent animation on load
+setTimeout(() => {
+ document.body.classList.remove("preload");
+ }, 500);
+
+ // DOM
+ const btnRules = document.querySelector(".rules-btn");
+ const btnClose = document.querySelector(".close-btn");
+ const modalRules = document.querySelector(".modal");
+
+ const CHOICES = [
+ {
+ name: "paper",
+ beats: "rock",
+ },
+ {
+ name: "scissors",
+ beats: "paper",
+ },
+ {
+ name: "rock",
+ beats: "scissors",
+ },
+ ];
+ const choiceButtons = document.querySelectorAll(".choice-btn");
+ const gameDiv = document.querySelector(".game");
+ const resultsDiv = document.querySelector(".results");
+ const resultDivs = document.querySelectorAll(".results__result");
+
+ const resultWinner = document.querySelector(".results__winner");
+ const resultText = document.querySelector(".results__text");
+
+ const playAgainBtn = document.querySelector(".play-again");
+
+ const scoreNumber = document.querySelector(".score__number");
+ let score = 0;
+
+ // Game Logic
+ choiceButtons.forEach((button) => {
+ button.addEventListener("click", () => {
+ const choiceName = button.dataset.choice;
+ const choice = CHOICES.find((choice) => choice.name === choiceName);
+ choose(choice);
+ });
+ });
+
+ function choose(choice) {
+ const aichoice = aiChoose();
+ displayResults([choice, aichoice]);
+ displayWinner([choice, aichoice]);
+ }
+
+ function aiChoose() {
+ const rand = Math.floor(Math.random() * CHOICES.length);
+ return CHOICES[rand];
+ }
+
+ function displayResults(results) {
+ resultDivs.forEach((resultDiv, idx) => {
+ setTimeout(() => {
+ resultDiv.innerHTML = `
+
+
+
+ `;
+ }, idx * 1000);
+ });
+
+ gameDiv.classList.toggle("hidden");
+ resultsDiv.classList.toggle("hidden");
+ }
+
+ function displayWinner(results) {
+ setTimeout(() => {
+ const userWins = isWinner(results);
+ const aiWins = isWinner(results.reverse());
+
+ if (userWins) {
+ resultText.innerText = "you win";
+ resultDivs[0].classList.toggle("winner");
+ keepScore(1);
+ } else if (aiWins) {
+ resultText.innerText = "you lose";
+ resultDivs[1].classList.toggle("winner");
+ keepScore(0);
+ } else {
+ resultText.innerText = "draw";
+ }
+ resultWinner.classList.toggle("hidden");
+ resultsDiv.classList.toggle("show-winner");
+ }, 1000);
+ }
+
+ function isWinner(results) {
+ return results[0].beats === results[1].name;
+ }
+
+ function keepScore(point) {
+ score += point;
+ scoreNumber.innerText = score;
+ }
+
+ // Play Again
+ playAgainBtn.addEventListener("click", () => {
+ gameDiv.classList.toggle("hidden");
+ resultsDiv.classList.toggle("hidden");
+
+ resultDivs.forEach((resultDiv) => {
+ resultDiv.innerHTML = "";
+ resultDiv.classList.remove("winner");
+ });
+
+ resultText.innerText = "";
+ resultWinner.classList.toggle("hidden");
+ resultsDiv.classList.toggle("show-winner");
+ });
+
+ // Show/Hide Rules
+ btnRules.addEventListener("click", () => {
+ modalRules.classList.toggle("show-modal");
+ });
+ btnClose.addEventListener("click", () => {
+ modalRules.classList.toggle("show-modal");
+ });
\ No newline at end of file
diff --git a/rock-paper-scissors/Palak Aggarwal/game.html b/rock-paper-scissors/Palak Aggarwal/game.html
new file mode 100644
index 0000000..259b303
--- /dev/null
+++ b/rock-paper-scissors/Palak Aggarwal/game.html
@@ -0,0 +1,70 @@
+
+
+
+
+
+
+
+
+
+
+
+ Rock, Paper, Scissors
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ you picked
+ the house picked
+
+
+
+ play again
+
+
+
+
+ rules
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/rock-paper-scissors/Palak Aggarwal/images/bg-pentagon.svg b/rock-paper-scissors/Palak Aggarwal/images/bg-pentagon.svg
new file mode 100644
index 0000000..5dd1e6f
--- /dev/null
+++ b/rock-paper-scissors/Palak Aggarwal/images/bg-pentagon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/rock-paper-scissors/Palak Aggarwal/images/bg-triangle.svg b/rock-paper-scissors/Palak Aggarwal/images/bg-triangle.svg
new file mode 100644
index 0000000..4ccb369
--- /dev/null
+++ b/rock-paper-scissors/Palak Aggarwal/images/bg-triangle.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/rock-paper-scissors/Palak Aggarwal/images/favicon.png b/rock-paper-scissors/Palak Aggarwal/images/favicon.png
new file mode 100644
index 0000000..5245ed4
Binary files /dev/null and b/rock-paper-scissors/Palak Aggarwal/images/favicon.png differ
diff --git a/rock-paper-scissors/Palak Aggarwal/images/icon-close.svg b/rock-paper-scissors/Palak Aggarwal/images/icon-close.svg
new file mode 100644
index 0000000..52407f4
--- /dev/null
+++ b/rock-paper-scissors/Palak Aggarwal/images/icon-close.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/rock-paper-scissors/Palak Aggarwal/images/icon-lizard.svg b/rock-paper-scissors/Palak Aggarwal/images/icon-lizard.svg
new file mode 100644
index 0000000..a34cf30
--- /dev/null
+++ b/rock-paper-scissors/Palak Aggarwal/images/icon-lizard.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/rock-paper-scissors/Palak Aggarwal/images/icon-paper.svg b/rock-paper-scissors/Palak Aggarwal/images/icon-paper.svg
new file mode 100644
index 0000000..5d21904
--- /dev/null
+++ b/rock-paper-scissors/Palak Aggarwal/images/icon-paper.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/rock-paper-scissors/Palak Aggarwal/images/icon-rock.svg b/rock-paper-scissors/Palak Aggarwal/images/icon-rock.svg
new file mode 100644
index 0000000..2852f5a
--- /dev/null
+++ b/rock-paper-scissors/Palak Aggarwal/images/icon-rock.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/rock-paper-scissors/Palak Aggarwal/images/icon-scissors.svg b/rock-paper-scissors/Palak Aggarwal/images/icon-scissors.svg
new file mode 100644
index 0000000..fb1d7b5
--- /dev/null
+++ b/rock-paper-scissors/Palak Aggarwal/images/icon-scissors.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/rock-paper-scissors/Palak Aggarwal/images/icon-spock.svg b/rock-paper-scissors/Palak Aggarwal/images/icon-spock.svg
new file mode 100644
index 0000000..8b171d7
--- /dev/null
+++ b/rock-paper-scissors/Palak Aggarwal/images/icon-spock.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/rock-paper-scissors/Palak Aggarwal/images/image-rules-bonus.svg b/rock-paper-scissors/Palak Aggarwal/images/image-rules-bonus.svg
new file mode 100644
index 0000000..d54fc66
--- /dev/null
+++ b/rock-paper-scissors/Palak Aggarwal/images/image-rules-bonus.svg
@@ -0,0 +1 @@
+BEATS BEATS BEATS BEATS BEATS BEATS BEATS BEATS BEATS BEATS
\ No newline at end of file
diff --git a/rock-paper-scissors/Palak Aggarwal/images/image-rules.svg b/rock-paper-scissors/Palak Aggarwal/images/image-rules.svg
new file mode 100644
index 0000000..bc82403
--- /dev/null
+++ b/rock-paper-scissors/Palak Aggarwal/images/image-rules.svg
@@ -0,0 +1 @@
+BEATS BEATS BEATS
\ No newline at end of file
diff --git a/rock-paper-scissors/Palak Aggarwal/images/logo-bonus.svg b/rock-paper-scissors/Palak Aggarwal/images/logo-bonus.svg
new file mode 100644
index 0000000..10a3070
--- /dev/null
+++ b/rock-paper-scissors/Palak Aggarwal/images/logo-bonus.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/rock-paper-scissors/Palak Aggarwal/images/logo.svg b/rock-paper-scissors/Palak Aggarwal/images/logo.svg
new file mode 100644
index 0000000..7469d63
--- /dev/null
+++ b/rock-paper-scissors/Palak Aggarwal/images/logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/rock-paper-scissors/Palak Aggarwal/styles.css b/rock-paper-scissors/Palak Aggarwal/styles.css
new file mode 100644
index 0000000..b0b9ec5
--- /dev/null
+++ b/rock-paper-scissors/Palak Aggarwal/styles.css
@@ -0,0 +1,410 @@
+/* Font */
+@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600;700&display=swap");
+
+/* Variables */
+:root {
+ --light-text: #ffffff;
+ --dark-text: hsl(229, 25%, 31%);
+ --score-text: hsl(229, 64%, 46%);
+ --outline: hsl(217, 16%, 45%);
+ --bg-grad-1: hsl(214, 47%, 23%);
+ --bg-grad-2: hsl(237, 49%, 15%);
+ --scissors-1: hsl(39, 89%, 49%);
+ --scissors-2: hsl(40, 84%, 53%);
+ --paper-1: hsl(230, 89%, 62%);
+ --paper-2: hsl(230, 89%, 65%);
+ --rock-1: hsl(349, 71%, 52%);
+ --rock-2: hsl(349, 70%, 56%);
+ --shadow-light: #00000026;
+ --shadow-med: #0000004d;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: "Barlow Semi Condensed", sans-serif;
+ background: radial-gradient(at top, var(--bg-grad-1), var(--bg-grad-2));
+ min-height: 100vh;
+ text-transform: uppercase;
+ color: var(--light-text);
+}
+
+/* Main Content */
+.container {
+ position: relative;
+ max-width: 700px;
+ margin: 0 auto;
+ padding-top: 2rem;
+}
+
+.header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 150px;
+ border: 3px solid var(--outline);
+ border-radius: 20px;
+ padding: 1rem 1.4rem 1rem 2rem;
+}
+
+.logo img {
+ height: 100%;
+}
+
+.score {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background: #fff;
+ border-radius: 10px;
+ width: 150px;
+ height: 100%;
+ line-height: 1;
+}
+
+.score__title {
+ font-size: 1.1rem;
+ letter-spacing: 0.1em;
+ color: var(--score-text);
+}
+
+.score__number {
+ font-size: 4rem;
+ font-weight: 700;
+ color: var(--dark-text);
+}
+
+/* Game */
+.game {
+ position: relative;
+ display: grid;
+ grid-template-columns: (repeat(2, 1fr));
+ grid-template-areas:
+ "paper scissors"
+ "rock rock";
+ place-items: center;
+ height: 30rem;
+ padding-top: 4rem;
+}
+.game::before {
+ content: "";
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 28%;
+ top: 35%;
+ background: url("images/bg-triangle.svg") no-repeat;
+ /* background: url("./images/bg-triangle.svg") no-repeat; */
+ z-index: -1;
+}
+
+.choice-btn {
+ border: none;
+ outline: none;
+ background: none;
+ cursor: pointer;
+}
+.choice {
+ position: relative;
+ width: 10rem;
+ height: 10rem;
+ background: #fff;
+ border-radius: 50%;
+ display: grid;
+ place-items: center;
+ box-shadow: inset 0 0.5rem var(--shadow-light);
+}
+.choice::before,
+.choice::after {
+ content: "";
+ position: absolute;
+ left: -15%;
+ top: -15%;
+ width: 130%;
+ height: 130%;
+ border-radius: 50%;
+ z-index: -1;
+}
+
+.choice::after {
+ opacity: 0;
+ transition: opacity 0.4s ease;
+}
+.choice-btn:focus .choice::after {
+ opacity: 1;
+ box-shadow: 0 0 0 2rem #223351;
+ z-index: -2;
+}
+
+.choice img {
+ transform: scale(1.5);
+}
+
+.choice.paper::before {
+ background: linear-gradient(to bottom, var(--paper-1), var(--paper-2));
+ box-shadow: 0 0.5rem var(--shadow-med), 0 0.5rem var(--paper-2);
+}
+.choice.scissors::before {
+ background: linear-gradient(to bottom, var(--scissors-1), var(--scissors-2));
+ box-shadow: 0 0.5rem var(--shadow-med), 0 0.5rem var(--scissors-2);
+}
+.choice.rock::before {
+ background: linear-gradient(to bottom, var(--rock-1), var(--rock-2));
+ box-shadow: 0 0.5rem var(--shadow-med), 0 0.5rem var(--rock-2);
+}
+
+.choice-btn[data-choice="paper"] {
+ grid-area: paper;
+}
+.choice-btn[data-choice="scissors"] {
+ grid-area: scissors;
+}
+.choice-btn[data-choice="rock"] {
+ grid-area: rock;
+}
+
+/* Results */
+.results {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ place-items: center;
+ grid-template-areas:
+ "you-title ai-title"
+ "you-picked ai-picked";
+ max-width: 1000px;
+ margin: 0 auto;
+}
+
+.results__heading {
+ font-size: 1.5rem;
+ letter-spacing: 0.1em;
+ padding: 4rem 0 8rem;
+}
+.results__result {
+ min-width: 10rem;
+ min-height: 10rem;
+ /* background: #16213d;
+ border-radius: 50%;
+ transform: scale(1.4); */
+ z-index: -1;
+}
+
+.results__heading:first-of-type {
+ grid-area: you-title;
+}
+.results__heading:last-of-type {
+ grid-area: ai-title;
+}
+.results__result:first-of-type {
+ grid-area: you-picked;
+}
+.results__result:last-of-type {
+ grid-area: ai-picked;
+}
+
+.results.show-winner {
+ grid-template-columns: repeat(3, 1fr);
+ grid-template-areas:
+ "you-title . ai-title"
+ "you-picked result-winner ai-picked";
+}
+
+.winner .choice::after {
+ box-shadow: 0 0 0 40px #293251, 0 0 0 80px #232c4b, 0 0 0 130px #1e2949;
+ animation: winner 1s ease forwards;
+}
+
+@keyframes winner {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+.results__winner {
+ grid-area: result-winner;
+ display: grid;
+ place-items: center;
+}
+.results__text {
+ font-size: 3.5rem;
+ padding-bottom: 1.5rem;
+}
+.play-again {
+ background: #fff;
+ outline: none;
+ border: 2px solid transparent;
+ border-radius: 0.6rem;
+ color: var(--dark-text);
+ padding: 0.6rem 3.5rem;
+ font-family: inherit;
+ text-transform: inherit;
+ font-size: 1.3rem;
+ letter-spacing: 0.1em;
+ cursor: pointer;
+}
+.play-again:focus {
+ border: 2px solid var(--outline);
+}
+
+/* Rules Button */
+.rules-btn {
+ position: absolute;
+ bottom: 2rem;
+ right: 2rem;
+ background: none;
+ outline: none;
+ border: 2px solid var(--outline);
+ border-radius: 0.6rem;
+ color: var(--light-text);
+ padding: 0.6rem 2.5rem;
+ font-family: inherit;
+ text-transform: inherit;
+ font-size: 1.3rem;
+ letter-spacing: 0.1em;
+ cursor: pointer;
+}
+.rules-btn:focus {
+ border: 2px solid #fff;
+}
+
+/* Rules Modal */
+.modal {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left: 0;
+ display: grid;
+ place-items: center;
+ background: var(--shadow-med);
+ opacity: 0;
+ transition: opacity 0.3s ease-in-out;
+ pointer-events: none;
+}
+.modal__container {
+ background: #fff;
+ border-radius: 0.5rem;
+}
+.modal__header {
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ padding: 2rem 2rem 1rem;
+}
+.modal__heading {
+ font-size: 1.5rem;
+ color: var(--dark-text);
+}
+.close-btn {
+ border: none;
+ outline: none;
+ background: none;
+ cursor: pointer;
+}
+.rules-img {
+ padding: 2rem 4rem;
+}
+.show-modal {
+ opacity: 1;
+ pointer-events: initial;
+}
+
+
+
+/* Utilities */
+.preload * {
+ transition: none;
+}
+
+.hidden {
+ display: none;
+}
+
+@media screen and (max-width: 376px){
+.results__text {
+ font-size: 2.5rem;
+ margin-top: -90px;
+ margin-left: auto;
+ /* padding-bottom: 1.5rem; */
+}
+.rules-btn {
+ position: absolute;
+ bottom: -7rem;
+ right: 0rem;
+ background: none;
+ outline: none;
+ border: 2px solid var(--outline);
+ border-radius: 0.6rem;
+ color: var(--light-text);
+ padding: 0.6rem 2.5rem;
+ font-family: inherit;
+ text-transform: inherit;
+ font-size: 1.3rem;
+ letter-spacing: 0.1em;
+ cursor: pointer;
+}
+.results__result {
+
+ min-height: 30rem;
+ z-index: -1;
+ margin-top: -70px;
+}
+.choice {
+ position: relative;
+ width: 7rem;
+ height: 7rem;
+ background: #fff;
+ border-radius: 50%;
+ display: grid;
+ place-items: center;
+ box-shadow: inset 0 0.5rem var(--shadow-light);
+}
+
+.winner .choice::after {
+ box-shadow: 0 0 0 20px #293251, 0 0 0 40px #232c4b, 0 0 0 65px #1e2949;
+ animation: winner 1s ease forwards;
+}
+.play-again {
+ background: #fff;
+ outline: none;
+ border: 2px solid transparent;
+ border-radius: 0.6rem 1rem;
+ color: var(--dark-text);
+ padding: 0.6rem;
+ font-family: inherit;
+ text-transform: inherit;
+ font-size: 1.3rem;
+ letter-spacing: 0.1em;
+ cursor: pointer;
+ /* margin-top: -30px; */
+ margin-left:-9px;
+}
+.play-again:focus {
+ border: 2px solid var(--outline);
+}
+.game::before {
+ content: "";
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 13%;
+ top: 35%;
+ background: url("images/bg-triangle.svg") no-repeat;
+ /* background: url("./images/bg-triangle.svg") no-repeat; */
+ z-index: -1;
+}
+.rules-img {
+ padding: 2rem;
+}
+}
+
+
+
\ No newline at end of file