diff --git a/Awesome Javascript Projects_Scripts/GuessTheNumber_game/index.html b/Awesome Javascript Projects_Scripts/GuessTheNumber_game/index.html new file mode 100644 index 000000000..3aec0f8cd --- /dev/null +++ b/Awesome Javascript Projects_Scripts/GuessTheNumber_game/index.html @@ -0,0 +1,35 @@ + + + + + + + + + Guess My Number! + + + +
+

Guess My Number!

+

(Between 1 and 100)

+ +
?
+
+
+
+ + +
+
+

Start guessing...

+

💯 Score: 20

+

+ 🥇 Highscore: 0 +

+
+
+ + + + \ No newline at end of file diff --git a/Awesome Javascript Projects_Scripts/GuessTheNumber_game/script.js b/Awesome Javascript Projects_Scripts/GuessTheNumber_game/script.js new file mode 100644 index 000000000..b022cd46b --- /dev/null +++ b/Awesome Javascript Projects_Scripts/GuessTheNumber_game/script.js @@ -0,0 +1,92 @@ +'use strict'; + +let secretNumber = Math.floor(Math.random() * 100) + 1; +// revealGuess(secretNumber); //for testing purposes +let score = 20; +let highscore = 0; + +const checkText = document.querySelector('.check').textContent; + +function generateRandomNumber() { + let randomNumber = Math.floor(Math.random() * 100) + 1; + return randomNumber; +} + +function displayMessage(message) { + document.querySelector('.message').textContent = message; +} + +function updateHighscore(highscore) { + document.querySelector('.highscore').textContent = highscore; +} + +function revealGuess(secretNumber) { + document.querySelector('.number').textContent = secretNumber; +} + +function changeBgColor(backgroundColor) { + document.querySelector('body').style.backgroundColor = backgroundColor; +} + +function updateScore(score) { + document.querySelector('.score').textContent = score; +} + +function emptyGuessBox() { + document.querySelector('.guess').value = ""; +} + +const gameLogic = function () { + + let guess = Number(document.querySelector('.guess').value); + + if (!guess) { + displayMessage('⛔ No Number'); + } + + + else if (guess === secretNumber) { + if (score > highscore) { + displayMessage('🎉 Correct'); + highscore = score; + updateHighscore(highscore); + } + + revealGuess(secretNumber); + changeBgColor('#60b347'); + document.querySelector('.number').style.width = '30rem'; + } + + + else if (guess !== secretNumber) { + if (score > 1) { + score--; + updateScore(score); + if (guess - secretNumber <= 5 && guess - secretNumber >= 0 ) displayMessage('🤏 Little bit High'); + else if (secretNumber - guess <= 5 && secretNumber - guess >=0) displayMessage('🤏 Little bit Low'); + else { + displayMessage(guess > secretNumber ? '📈 Too High' : '📉 Too Low'); + } + emptyGuessBox(); + } + else { + displayMessage('💥 You have lost the Game'); + } + } +}; + +document.querySelector('.check').addEventListener('click', gameLogic); + + +document.querySelector('.again').addEventListener('click', function () { + secretNumber = Math.floor(Math.random() * 20) + 1; + displayMessage('Start guessing...'); + score = 20; + updateScore(score); + changeBgColor('#222'); + document.querySelector('.number').style.width = '15rem'; + emptyGuessBox() + document.querySelector('.number').textContent = '?'; + // revealGuess(secretNumber); // for testing purposes + +}) diff --git a/Awesome Javascript Projects_Scripts/GuessTheNumber_game/style.css b/Awesome Javascript Projects_Scripts/GuessTheNumber_game/style.css new file mode 100644 index 000000000..dfed55a32 --- /dev/null +++ b/Awesome Javascript Projects_Scripts/GuessTheNumber_game/style.css @@ -0,0 +1,119 @@ +@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: inherit; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Press Start 2P', sans-serif; + color: #eee; + background-color: #222; + /* background-color: #60b347; */ +} + +/* LAYOUT */ +header { + position: relative; + height: 35vh; + border-bottom: 7px solid #eee; +} + +main { + height: 65vh; + color: #eee; + display: flex; + align-items: center; + justify-content: space-around; +} + +.left { + width: 52rem; + display: flex; + flex-direction: column; + align-items: center; +} + +.right { + width: 52rem; + font-size: 2rem; +} + +/* ELEMENTS STYLE */ +h1 { + font-size: 4rem; + text-align: center; + position: absolute; + width: 100%; + top: 52%; + left: 50%; + transform: translate(-50%, -50%); +} + +.number { + background: #eee; + color: #333; + font-size: 6rem; + width: 15rem; + padding: 3rem 0rem; + text-align: center; + position: absolute; + bottom: 0; + left: 50%; + transform: translate(-50%, 50%); +} + +.between { + font-size: 1.4rem; + position: absolute; + top: 2rem; + right: 2rem; +} + +.again { + position: absolute; + top: 2rem; + left: 2rem; +} + +.guess { + background: none; + border: 4px solid #eee; + font-family: inherit; + color: inherit; + font-size: 5rem; + padding: 2.5rem; + width: 25rem; + text-align: center; + display: block; + margin-bottom: 3rem; +} + +.btn { + border: none; + background-color: #eee; + color: #222; + font-size: 2rem; + font-family: inherit; + padding: 2rem 3rem; + cursor: pointer; +} + +.btn:hover { + background-color: #ccc; +} + +.message { + margin-bottom: 8rem; + height: 3rem; +} + +.label-score { + margin-bottom: 2rem; +} diff --git a/Awesome Javascript Projects_Scripts/Pig Game/1.png b/Awesome Javascript Projects_Scripts/Pig Game/1.png new file mode 100644 index 000000000..0d911ca11 Binary files /dev/null and b/Awesome Javascript Projects_Scripts/Pig Game/1.png differ diff --git a/Awesome Javascript Projects_Scripts/Pig Game/dice-1.png b/Awesome Javascript Projects_Scripts/Pig Game/dice-1.png new file mode 100644 index 000000000..a1a5c3b03 Binary files /dev/null and b/Awesome Javascript Projects_Scripts/Pig Game/dice-1.png differ diff --git a/Awesome Javascript Projects_Scripts/Pig Game/dice-2.png b/Awesome Javascript Projects_Scripts/Pig Game/dice-2.png new file mode 100644 index 000000000..2c09c6c19 Binary files /dev/null and b/Awesome Javascript Projects_Scripts/Pig Game/dice-2.png differ diff --git a/Awesome Javascript Projects_Scripts/Pig Game/dice-3.png b/Awesome Javascript Projects_Scripts/Pig Game/dice-3.png new file mode 100644 index 000000000..96ffb34a6 Binary files /dev/null and b/Awesome Javascript Projects_Scripts/Pig Game/dice-3.png differ diff --git a/Awesome Javascript Projects_Scripts/Pig Game/dice-4.png b/Awesome Javascript Projects_Scripts/Pig Game/dice-4.png new file mode 100644 index 000000000..0588397b8 Binary files /dev/null and b/Awesome Javascript Projects_Scripts/Pig Game/dice-4.png differ diff --git a/Awesome Javascript Projects_Scripts/Pig Game/dice-5.png b/Awesome Javascript Projects_Scripts/Pig Game/dice-5.png new file mode 100644 index 000000000..09990ee23 Binary files /dev/null and b/Awesome Javascript Projects_Scripts/Pig Game/dice-5.png differ diff --git a/Awesome Javascript Projects_Scripts/Pig Game/dice-6.png b/Awesome Javascript Projects_Scripts/Pig Game/dice-6.png new file mode 100644 index 000000000..b68f86076 Binary files /dev/null and b/Awesome Javascript Projects_Scripts/Pig Game/dice-6.png differ diff --git a/Awesome Javascript Projects_Scripts/Pig Game/index.html b/Awesome Javascript Projects_Scripts/Pig Game/index.html new file mode 100644 index 000000000..fa9669594 --- /dev/null +++ b/Awesome Javascript Projects_Scripts/Pig Game/index.html @@ -0,0 +1,66 @@ + + + + + + + + + Roll the dice + + + +
+ +
+ + + + +
+ +
+

Player 1

+

43

+
+

Current

+

0

+
+
+
+

Player 2

+

24

+
+

Current

+

0

+
+
+ + Playing dice + + + +
+ + + + \ No newline at end of file diff --git a/Awesome Javascript Projects_Scripts/Pig Game/pig-game-flowchart.png b/Awesome Javascript Projects_Scripts/Pig Game/pig-game-flowchart.png new file mode 100644 index 000000000..2e51a84f3 Binary files /dev/null and b/Awesome Javascript Projects_Scripts/Pig Game/pig-game-flowchart.png differ diff --git a/Awesome Javascript Projects_Scripts/Pig Game/script.js b/Awesome Javascript Projects_Scripts/Pig Game/script.js new file mode 100644 index 000000000..479e5ad71 --- /dev/null +++ b/Awesome Javascript Projects_Scripts/Pig Game/script.js @@ -0,0 +1,176 @@ +'use strict'; + +// variables +const player0El = document.querySelector('.player--0'); +const player1El = document.querySelector('.player--1'); +const diceEl = document.querySelector('.dice'); +const score0El = document.getElementById('score--0'); +const score1El = document.getElementById('score--1'); +const btnRoll = document.querySelector('.btn--roll'); +const btnNew = document.querySelector('.btn--new'); +const btnHold = document.querySelector('.btn--hold'); +const current0 = document.getElementById('current--0'); +const current1 = document.getElementById('current--1'); + + +// Starting Conditions +diceEl.classList.add('hidden'); +score0El.textContent = 0; +score1El.textContent = 0; +let currentScore = 0; +let activePlayer = 0; +let score = [0, 0]; +let isPlaying = true; + +const switchPlayer = function () { + // Switch Active Player + activePlayer = activePlayer === 0 ? 1 : 0; + player0El.classList.toggle('player--active'); + player1El.classList.toggle('player--active'); +} + +// Dynamic Selecting +const currentScoreActivePlayer = document.querySelector(`#current--${activePlayer}`); + + +//Implementing Logic OF Game + +// 1. Rolling Dice Functionality +btnRoll.addEventListener('click', function () { + + if (isPlaying) { + + // Generating Random Dice Roll + let dice = Math.trunc(Math.random() * 6) + 1; + // console.log(typeof dice); + + // DIsplaying Dice image + diceEl.classList.remove('hidden'); + + // Check for the dice rolled = 1 if true then SwitchPlayer else add the rolled dice value in currentScore + + if (dice != 1) { + currentScore += dice; + + // Dynamic Selecting + document.querySelector(`#current--${activePlayer}`).textContent = currentScore; + } + + + else { + + // Set currentScore to Zero + currentScore=0; + document.querySelector(`#current--${activePlayer}`).textContent = currentScore; + + //Switch activePlayer + switchPlayer(); + + } + + //Displaying the rolled dice image + diceEl.src = (`dice-${dice}.png`); + + } +}) + + +// hold button --> currentScore to global score & switching active player +btnHold.addEventListener('click', function () { + + if (isPlaying) { + + // add currentScore to Global score of active Player + score[activePlayer] += currentScore; + + + // Set currentScore to Zero + currentScore = 0; + document.querySelector(`#current--${activePlayer}`).textContent = currentScore; + + //Displaying Global score of active player + document.getElementById(`score--${activePlayer}`).textContent = score[activePlayer]; + console.log(`score--${activePlayer}`) + + //Check if Global Score >=100 then set isPlaying to false and declare that player Winner + if (score[activePlayer] >= 100) { + document.querySelector(`.player--${activePlayer}`).classList.add('player--winner') + isPlaying = false; + diceEl.classList.add('hidden'); + } + + //Else Switch Active Player + else { + switchPlayer(); + } + } + +}); + + + +//Resetting Global Scores & currentScores, removing winner & active class and adding active class to player one +btnNew.addEventListener('click', function () { + + //Resetting Scores + score = [0, 0]; + + //Resetting currentScores + currentScore = 0; + + //Displaying Global Score & currentScore To zero + score0El.textContent = 0; + score1El.textContent = 0; + document.querySelector(`#current--${activePlayer}`).textContent = currentScore; + + // removing winner & active class and adding active class to player one + document.querySelector(`.player--${activePlayer}`).classList.remove('player--winner'); + player0El.classList.add('player--active'); + player1El.classList.remove('player--active'); + + //setting player 1 to active and isPlaying to true + activePlayer = 0; + isPlaying = true; + + diceEl.classList.add('hidden'); + +}) + + +// Modal Functionality + +const modal = document.querySelector('.modal'); +const overlay = document.querySelector('.overlay'); +const btnOpenModal = document.querySelectorAll('.show-modal'); +const btnCloseModal = document.querySelector('.close-modal'); + +const openModal = function () { + console.log('clicked') + modal.classList.remove('hidden'); + overlay.classList.remove('hidden'); +} + +const closeModal = function () { + console.log('clicked') + modal.classList.add('hidden'); + overlay.classList.add('hidden'); +} + + + +for (let i = 0; i < btnOpenModal.length; i++) { + + btnOpenModal[i].addEventListener('click', openModal) + btnCloseModal.addEventListener('click', closeModal) + overlay.addEventListener('click', closeModal) + console.log(i); + +} + +document.addEventListener("keydown", function (e) { + if (e.key == "Escape" && !modal.classList.contains('hidden')){ + closeModal(); + } +}) + + diff --git a/Awesome Javascript Projects_Scripts/Pig Game/style.css b/Awesome Javascript Projects_Scripts/Pig Game/style.css new file mode 100644 index 000000000..b51afac4f --- /dev/null +++ b/Awesome Javascript Projects_Scripts/Pig Game/style.css @@ -0,0 +1,337 @@ +@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap"); + +* { + margin: 0; + padding: 0; + box-sizing: inherit; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: "Nunito", sans-serif; + font-weight: 400; + height: 100vh; + color: #333; + background-image: linear-gradient(to top left, #753682 0%, #bf2e34 100%); + display: flex; + align-items: center; + justify-content: center; + position: relative; +} + +/* LAYOUT */ + +.instructions { + width: 50px; + height: 50px; + background: linear-gradient(to left top, #c32c71 50%, #b33771 50%); + border-style: none; + color: #fff; + font-size: 30px; + text-align: center; + font-family: "Courier"; + font-weight: 600; + outline: none; + cursor: pointer; + position: relative; + padding: 10px 15px; + overflow: hidden; + transition: all 0.5s; + box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); + display: flex; + top: 2%; + left: 2%; + position: absolute; +} + +.button span { + position: absolute; + display: block; +} +.button span:nth-child(1) { + height: 3px; + width: 200px; + top: 0px; + left: -200px; + background: linear-gradient(to right, rgba(0, 0, 0, 0), #f6e58d); + border-top-right-radius: 1px; + border-bottom-right-radius: 1px; + animation: span1 2s linear infinite; + animation-delay: 1s; +} + +@keyframes span1 { + 0% { + left: -200px; + } + 100% { + left: 200px; + } +} +.button span:nth-child(2) { + height: 70px; + width: 3px; + top: -70px; + right: 0px; + background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #f6e58d); + border-bottom-left-radius: 1px; + border-bottom-right-radius: 1px; + animation: span2 2s linear infinite; + animation-delay: 2s; +} +@keyframes span2 { + 0% { + top: -70px; + } + 100% { + top: 70px; + } +} +.button span:nth-child(3) { + height: 3px; + width: 200px; + right: -200px; + bottom: 0px; + background: linear-gradient(to left, rgba(0, 0, 0, 0), #f6e58d); + border-top-left-radius: 1px; + border-bottom-left-radius: 1px; + animation: span3 2s linear infinite; + animation-delay: 3s; +} +@keyframes span3 { + 0% { + right: -200px; + } + 100% { + right: 200px; + } +} + +.button span:nth-child(4) { + height: 70px; + width: 3px; + bottom: -70px; + left: 0px; + background: linear-gradient(to top, rgba(0, 0, 0, 0), #f6e58d); + border-top-right-radius: 1px; + border-top-left-radius: 1px; + animation: span4 2s linear infinite; + animation-delay: 4s; +} +@keyframes span4 { + 0% { + bottom: -70px; + } + 100% { + bottom: 70px; + } +} + +.button:hover { + transition: all 0.5s; + transform: rotate(-3deg) scale(1.1); + box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4); +} +.button:hover span { + animation-play-state: paused; +} + +main { + position: relative; + width: 90rem; + height: 60rem; + background-color: rgba(255, 255, 255, 0.35); + backdrop-filter: blur(200px); + filter: blur(); + box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25); + border-radius: 9px; + overflow: hidden; + display: flex; +} + +.player { + flex: 50%; + padding: 9rem; + display: flex; + flex-direction: column; + align-items: center; + transition: all 0.75s; +} + +/* ELEMENTS */ +.name { + position: relative; + font-size: 4rem; + text-transform: uppercase; + letter-spacing: 1px; + word-spacing: 2px; + font-weight: 300; + margin-bottom: 1rem; +} + +.score { + font-size: 8rem; + font-weight: 300; + color: #c7365f; + margin-bottom: auto; +} + +.player--active { + background-color: rgba(255, 255, 255, 0.4); +} +.player--active .name { + font-weight: 700; +} +.player--active .score { + font-weight: 400; +} + +.player--active .current { + opacity: 1; +} + +.current { + background-color: #c7365f; + opacity: 0.8; + border-radius: 9px; + color: #fff; + width: 65%; + padding: 2rem; + text-align: center; + transition: all 0.75s; +} + +.current-label { + text-transform: uppercase; + margin-bottom: 1rem; + font-size: 1.7rem; + color: #ddd; +} + +.current-score { + font-size: 3.5rem; +} + +/* ABSOLUTE POSITIONED ELEMENTS */ +.btn { + position: absolute; + left: 50%; + transform: translateX(-50%); + color: #444; + background: none; + border: none; + font-family: inherit; + font-size: 1.8rem; + text-transform: uppercase; + cursor: pointer; + font-weight: 400; + transition: all 0.2s; + + background-color: white; + background-color: rgba(255, 255, 255, 0.6); + backdrop-filter: blur(10px); + + padding: 0.7rem 2.5rem; + border-radius: 50rem; + box-shadow: 0 1.75rem 3.5rem rgba(0, 0, 0, 0.1); +} + +.btn::first-letter { + font-size: 2.4rem; + display: inline-block; + margin-right: 0.7rem; +} + +.btn--new { + top: 4rem; +} +.btn--roll { + top: 39.3rem; +} +.btn--hold { + top: 46.1rem; +} + +.btn:active { + transform: translate(-50%, 3px); + box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15); +} + +.btn:focus { + outline: none; +} + +.dice { + position: absolute; + left: 50%; + top: 16.5rem; + transform: translateX(-50%); + height: 10rem; + box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2); +} + +.player--winner { + background-color: #2f2f2f; +} + +.player--winner .name { + font-weight: 700; + color: #c7365f; +} + +.hidden { + display: none; +} + +/* Modal Functionality */ + +.show-modal { + + cursor: pointer; +} + +.close-modal { + position: absolute; + top: 1.2rem; + right: 2rem; + font-size: 5rem; + color: #333; + cursor: pointer; + border: none; + background: none; +} + + +/* -------------------------- */ +/* CLASSES TO MAKE MODAL WORK */ + +.modal { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 70%; + font-size: 16px; + + background-color: white; + padding: 6rem; + border-radius: 5px; + box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3); + z-index: 10; +} + +.overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.6); + backdrop-filter: blur(3px); + z-index: 5; +} + diff --git a/GuessTheNumber_game/index.html b/GuessTheNumber_game/index.html new file mode 100644 index 000000000..3aec0f8cd --- /dev/null +++ b/GuessTheNumber_game/index.html @@ -0,0 +1,35 @@ + + + + + + + + + Guess My Number! + + + +
+

Guess My Number!

+

(Between 1 and 100)

+ +
?
+
+
+
+ + +
+
+

Start guessing...

+

💯 Score: 20

+

+ 🥇 Highscore: 0 +

+
+
+ + + + \ No newline at end of file diff --git a/GuessTheNumber_game/script.js b/GuessTheNumber_game/script.js new file mode 100644 index 000000000..b022cd46b --- /dev/null +++ b/GuessTheNumber_game/script.js @@ -0,0 +1,92 @@ +'use strict'; + +let secretNumber = Math.floor(Math.random() * 100) + 1; +// revealGuess(secretNumber); //for testing purposes +let score = 20; +let highscore = 0; + +const checkText = document.querySelector('.check').textContent; + +function generateRandomNumber() { + let randomNumber = Math.floor(Math.random() * 100) + 1; + return randomNumber; +} + +function displayMessage(message) { + document.querySelector('.message').textContent = message; +} + +function updateHighscore(highscore) { + document.querySelector('.highscore').textContent = highscore; +} + +function revealGuess(secretNumber) { + document.querySelector('.number').textContent = secretNumber; +} + +function changeBgColor(backgroundColor) { + document.querySelector('body').style.backgroundColor = backgroundColor; +} + +function updateScore(score) { + document.querySelector('.score').textContent = score; +} + +function emptyGuessBox() { + document.querySelector('.guess').value = ""; +} + +const gameLogic = function () { + + let guess = Number(document.querySelector('.guess').value); + + if (!guess) { + displayMessage('⛔ No Number'); + } + + + else if (guess === secretNumber) { + if (score > highscore) { + displayMessage('🎉 Correct'); + highscore = score; + updateHighscore(highscore); + } + + revealGuess(secretNumber); + changeBgColor('#60b347'); + document.querySelector('.number').style.width = '30rem'; + } + + + else if (guess !== secretNumber) { + if (score > 1) { + score--; + updateScore(score); + if (guess - secretNumber <= 5 && guess - secretNumber >= 0 ) displayMessage('🤏 Little bit High'); + else if (secretNumber - guess <= 5 && secretNumber - guess >=0) displayMessage('🤏 Little bit Low'); + else { + displayMessage(guess > secretNumber ? '📈 Too High' : '📉 Too Low'); + } + emptyGuessBox(); + } + else { + displayMessage('💥 You have lost the Game'); + } + } +}; + +document.querySelector('.check').addEventListener('click', gameLogic); + + +document.querySelector('.again').addEventListener('click', function () { + secretNumber = Math.floor(Math.random() * 20) + 1; + displayMessage('Start guessing...'); + score = 20; + updateScore(score); + changeBgColor('#222'); + document.querySelector('.number').style.width = '15rem'; + emptyGuessBox() + document.querySelector('.number').textContent = '?'; + // revealGuess(secretNumber); // for testing purposes + +}) diff --git a/GuessTheNumber_game/style.css b/GuessTheNumber_game/style.css new file mode 100644 index 000000000..dfed55a32 --- /dev/null +++ b/GuessTheNumber_game/style.css @@ -0,0 +1,119 @@ +@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: inherit; +} + +html { + font-size: 62.5%; + box-sizing: border-box; +} + +body { + font-family: 'Press Start 2P', sans-serif; + color: #eee; + background-color: #222; + /* background-color: #60b347; */ +} + +/* LAYOUT */ +header { + position: relative; + height: 35vh; + border-bottom: 7px solid #eee; +} + +main { + height: 65vh; + color: #eee; + display: flex; + align-items: center; + justify-content: space-around; +} + +.left { + width: 52rem; + display: flex; + flex-direction: column; + align-items: center; +} + +.right { + width: 52rem; + font-size: 2rem; +} + +/* ELEMENTS STYLE */ +h1 { + font-size: 4rem; + text-align: center; + position: absolute; + width: 100%; + top: 52%; + left: 50%; + transform: translate(-50%, -50%); +} + +.number { + background: #eee; + color: #333; + font-size: 6rem; + width: 15rem; + padding: 3rem 0rem; + text-align: center; + position: absolute; + bottom: 0; + left: 50%; + transform: translate(-50%, 50%); +} + +.between { + font-size: 1.4rem; + position: absolute; + top: 2rem; + right: 2rem; +} + +.again { + position: absolute; + top: 2rem; + left: 2rem; +} + +.guess { + background: none; + border: 4px solid #eee; + font-family: inherit; + color: inherit; + font-size: 5rem; + padding: 2.5rem; + width: 25rem; + text-align: center; + display: block; + margin-bottom: 3rem; +} + +.btn { + border: none; + background-color: #eee; + color: #222; + font-size: 2rem; + font-family: inherit; + padding: 2rem 3rem; + cursor: pointer; +} + +.btn:hover { + background-color: #ccc; +} + +.message { + margin-bottom: 8rem; + height: 3rem; +} + +.label-score { + margin-bottom: 2rem; +}