diff --git a/assets/audio/fx/alien-exploded.mp3 b/assets/audio/fx/alien-exploded.mp3 new file mode 100644 index 0000000..ebbe67e Binary files /dev/null and b/assets/audio/fx/alien-exploded.mp3 differ diff --git a/assets/audio/fx/alien-occupy-base.mp3 b/assets/audio/fx/alien-occupy-base.mp3 new file mode 100644 index 0000000..5ea655b Binary files /dev/null and b/assets/audio/fx/alien-occupy-base.mp3 differ diff --git a/assets/audio/fx/alien-spawn-sound.mp3 b/assets/audio/fx/alien-spawn-sound.mp3 new file mode 100644 index 0000000..00f7220 Binary files /dev/null and b/assets/audio/fx/alien-spawn-sound.mp3 differ diff --git a/assets/audio/fx/game-countdown.mp3 b/assets/audio/fx/game-countdown.mp3 new file mode 100644 index 0000000..f88f152 Binary files /dev/null and b/assets/audio/fx/game-countdown.mp3 differ diff --git a/assets/audio/fx/game-over-music.mp3 b/assets/audio/fx/game-over-music.mp3 new file mode 100644 index 0000000..ea56d11 Binary files /dev/null and b/assets/audio/fx/game-over-music.mp3 differ diff --git a/assets/audio/fx/game-over-voice.mp3 b/assets/audio/fx/game-over-voice.mp3 new file mode 100644 index 0000000..5e7ceed Binary files /dev/null and b/assets/audio/fx/game-over-voice.mp3 differ diff --git a/assets/audio/fx/light-ball-sound.mp3 b/assets/audio/fx/light-ball-sound.mp3 new file mode 100644 index 0000000..a5b1576 Binary files /dev/null and b/assets/audio/fx/light-ball-sound.mp3 differ diff --git a/assets/audio/fx/out-of-ammo.mp3 b/assets/audio/fx/out-of-ammo.mp3 new file mode 100644 index 0000000..ab56920 Binary files /dev/null and b/assets/audio/fx/out-of-ammo.mp3 differ diff --git a/assets/audio/fx/spaceship-landed.mp3 b/assets/audio/fx/spaceship-landed.mp3 new file mode 100644 index 0000000..8769588 Binary files /dev/null and b/assets/audio/fx/spaceship-landed.mp3 differ diff --git a/assets/img/friend-explosion.png b/assets/img/friend-explosion.png deleted file mode 100644 index 552fb54..0000000 Binary files a/assets/img/friend-explosion.png and /dev/null differ diff --git a/assets/img/green-energy-orb.png b/assets/img/green-energy-orb.png deleted file mode 100644 index bbb7590..0000000 Binary files a/assets/img/green-energy-orb.png and /dev/null differ diff --git a/assets/img/light-ball.png b/assets/img/light-ball.png new file mode 100644 index 0000000..3a76ff7 Binary files /dev/null and b/assets/img/light-ball.png differ diff --git a/assets/img/prof-hands-up.png b/assets/img/prof-hands-up.png index 4619100..7aec53d 100644 Binary files a/assets/img/prof-hands-up.png and b/assets/img/prof-hands-up.png differ diff --git a/assets/img/prof-stable.png b/assets/img/prof-stable.png index 6cfba0c..410819a 100644 Binary files a/assets/img/prof-stable.png and b/assets/img/prof-stable.png differ diff --git a/assets/img/result-screen-bg.png b/assets/img/result-screen-bg.png new file mode 100644 index 0000000..6f6748b Binary files /dev/null and b/assets/img/result-screen-bg.png differ diff --git a/index.html b/index.html index fab8b09..4784f2e 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ Not Today! - + @@ -21,18 +21,18 @@
-

music: off

+

music: on

high score:

000000

-

latest score:

-

000000

+

latest score:

+

000000

- click to start + click to start -

score: 000000

+

score: 000000

-

last: 000000

+

last: 000000

-

high: 000000

+

high: 000000

-
-
-
-
-
+ -
-
-
-
+
+
+ + + + -

music: on

+

music: on

-

sfx: on

+

sfx: on

-

pause

+

pause

-

quit

+

quit

- + + -
-
+ + +
+ +
+

DO You WANT TO QUIT?

+
+ + +
+
@@ -120,11 +138,30 @@
+
+ + +

GAME OVER

+

Next time...

+ +

SCORE:

+

000000 +

+ +

high score:

+

000000

+ +

CLICK TO START MENU

+ +
- + + + + \ No newline at end of file diff --git a/src/invader.js b/src/invader.js new file mode 100644 index 0000000..4cac154 --- /dev/null +++ b/src/invader.js @@ -0,0 +1,60 @@ +class Invader { + constructor(randomX){ + + this.node = document.createElement("img") + this.node.src = "../assets/img/ground-alien.png" + this.node.style.zIndex = 2 + this.node.style.position = 'absolute' + gameBoxNode.append(this.node) //to add the node to game box on pipe creation + + + //add the initial values of position and dimensions + this.width = 23.6 + this.height = 49 + this.x = 941 + randomX + this.y = 523 + + //adjust the node with initial values + this.node.style.width = `${this.width}px` + this.node.style.height = `${this.height}px` + this.node.style.top = `${this.y}px` + this.node.style.left = `${this.x}px` + + //movements + this.speed = 1 + + //life + + this.life = 5 + + this.dieFx = new Audio('../assets/audio/fx/alien-exploded.mp3') + this.spawnFx = new Audio('../assets/audio/fx/alien-spawn-sound.mp3') + this.occupyFx = new Audio('../assets/audio/fx/alien-spawn-sound.mp3') + } + + automaticMovement(){ + this.y += this.speed + this.node.style.top = `${this.y}px` + + + this.width = this.width + (this.width * (0.4 / 100)) + this.height = this.height + (this.height * (0.4 / 100)) + + this.node.style.width = `${this.width}px` + this.node.style.height = `${this.height}px` + } + + die(){ + this.node.src = "./assets/img/enemy-explosion.png" + this.width = this.height + this.node.style.width = `${this.width}px` + + playSfx(this.dieFx) + currentScore = currentScore + 5 + let formattedCurrentScore = currentScore.toString().padStart(6, '0') + gbCurrentScoreNode.innerHTML = formattedCurrentScore + setTimeout(() => { + this.node.remove() + }, 2000) + } +} \ No newline at end of file diff --git a/src/light-ball.js b/src/light-ball.js new file mode 100644 index 0000000..4ecc7f0 --- /dev/null +++ b/src/light-ball.js @@ -0,0 +1,38 @@ +class LightBall { + constructor(profX){ + + this.node = document.createElement("img") + this.node.src = "../assets/img/light-ball.png" + this.node.style.zIndex = 7 + this.node.style.position = 'absolute' + gameBoxNode.append(this.node) //to add the node to game box on pipe creation + + + //add the initial values of position and dimensions + this.width = 39 + this.height = 39 + this.x = profX + 54 + this.y = 961 + + //adjust the node with initial values + this.node.style.width = `${this.width}px` + this.node.style.height = `${this.height}px` + this.node.style.top = `${this.y}px` + this.node.style.left = `${this.x}px` + + //movements + this.speed = 3 + + //life + } + + automaticMovement(){ + this.y -= this.speed + this.node.style.top = `${this.y}px` + this.width = this.width - (this.width * (1 / 100)) + this.height = this.height - (this.height * (1 / 100)) + + this.node.style.width = `${this.width}px` + this.node.style.height = `${this.height}px` + } +} \ No newline at end of file diff --git a/src/main.js b/src/main.js index e69de29..089aa07 100644 --- a/src/main.js +++ b/src/main.js @@ -0,0 +1,505 @@ +// *** GLOBAL DOM DECLARATIONS *** + +// START SCREEN + +const startScreenNode = document.querySelector('#start-screen') +const startButton = document.querySelector('#start-button') +const ssHighScoreNode = document.querySelector('#start-menu-high-score') +const ssLastScoreNode = document.querySelector('#start-menu-last-score') +const ssMusicToggleNode = document.querySelector('#ss-music-toggle-btn') +const ssMusicStateNode = document.querySelector('#ss-music-state-text') + +// GAMEBOX + +// top left + +const gameBoxNode = document.querySelector('#game-box') +const collisionAreaNode = document.querySelector('#collision-area') + +const gbCurrentScoreNode = document.querySelector('#gb-current-score') +const gbLastScoreNode = document.querySelector('#gb-last-score') +const gbHighScoreNode = document.querySelector('#gb-high-score') + +const baseLifeNode = document.querySelector('#base-inner-bar') + +const countdownNode = document.querySelector('#start-countdown') +const pauseDivNode = document.querySelector('#pause-div') + +// top right + +const gbMusicToggleNode = document.querySelector('#gb-music-toggle-btn') +const gbMusicStateNode = document.querySelector('#gb-music-state') + +const gbSfxToggleNode = document.querySelector('#gb-sfx-toggle-btn') +const gbSfxStateNode = document.querySelector('#gb-sfx-state') + +const pauseBtn = document.querySelector('#pause-btn') +const quitBtn = document.querySelector('#quit-btn') + +const quitConfirmDiv = document.querySelector('#quit-confirm') + +const quitConfirmNo = document.querySelector('#quit-no') +const quitConfirmYes = document.querySelector('#quit-yes') + + +// RESULT SCREEN + +const resultScreenNode = document.querySelector('#result-screen') + +const gameEndMessageOne = document.querySelector('#game-end-message-one') +const gameEndMessageTwo = document.querySelector('#game-end-message-two') + +const gameEndScore = document.querySelector('#game-end-result-score') +const gameEndHighScore = document.querySelector('#game-end-high-score') + +const toStartMenuBtn = document.querySelector('#game-end-main-menu') + + + + +// ------------------------------------------------------------------------------------------------- +// *** GLOBAL VARIABLES *** + +isPause = false + +// base life +let baseLife = 100 + +// score variables +let currentScore = 0 +let highScore = Number(localStorage.getItem('highScore')) +let lastScore = Number(localStorage.getItem('lastScore')) +let isNewRecord = null + +if (highScore === null || highScore === undefined || highScore === '') { + highScore = 0 +} + +let formattedHighScore = `${highScore.toString().padStart(6, '0')}` +gbHighScoreNode.innerHTML = formattedHighScore + + +if (lastScore === null || lastScore === undefined || lastScore === '') { + lastScore = 0 +} +let formattedLastScore = `${lastScore.toString().padStart(6, '0')}` +ssLastScoreNode.innerHTML = formattedLastScore +gbLastScoreNode.innerHTML = formattedLastScore + +// game items + +let profObj = null +let lightBallArr = [] +let invaderArr = [] +let invaderInternalId +let gameIntervalId +let moveInterval + +// ------------------------------------------------------------------------------------------------- +// *** AUDIO FUNCTIONS *** + +// music state +let isMusicOn = true +let isSfxOn = true + +// music paths + +let startScreenMusic = new Audio('../assets/audio/music/start-menu-music.mp3') +let gameBoxMusic = new Audio('../assets/audio/music/gameplay-music.mp3') +let resultScreenMusic = new Audio('../assets/audio/music/end-game-music.mp3') + +// fx paths +let countDownFX = new Audio('../assets/audio/fx/game-countdown.mp3') +let lightBallSound = new Audio('../assets/audio/fx/light-ball-sound.mp3') +let gameOverMusic = new Audio('../assets/audio/fx/game-over-music.mp3') +let gameOverVoice = new Audio('../assets/audio/fx/game-over-voice.mp3') + +// set all music to loop// +startScreenMusic.loop = true +gameBoxMusic.loop = true +resultScreenMusic.loop = true + +// set initial volume +startScreenMusic.volume = 0.07 +gameBoxMusic.volume = 0.07 +resultScreenMusic.volume = 0.07 + +// play music function +function playMusic(audio) { + if (isMusicOn) { + audio.play() + } +} + + +// play sound effect +function playSfx(sfx) { + if (isSfxOn) { + sfx.volume = 0.04 + sfx.play() + } +} + +// stop all music + +function stopAllMusic() { + if (startScreenMusic) { + startScreenMusic.pause() + startScreenMusic.currentTime = 0 + } + if (gameBoxMusic) { + gameBoxMusic.pause() + gameBoxMusic.currentTime = 0 + } + if (resultScreenMusic) { + resultScreenMusic.pause() + resultScreenMusic.currentTime = 0 + } +} + +// ------------------------------------------------------------------------------------------------- +// *** FUNCTIONS *** + +function showStartScreen() { + stopAllMusic() + + // playMusic(startScreenMusic) + + clearInterval(gameIntervalId) + clearInterval(invaderInternalId) + + startScreenNode.style.display = "block" + gameBoxNode.style.display = "none" + resultScreenNode.style.display = "none" + + updateScore() +} + +function updateScore() { + let formattedHighScore = `${highScore.toString().padStart(6, '0')}` + ssHighScoreNode.innerHTML = formattedHighScore + let formattedLastScore = `${lastScore.toString().padStart(6, '0')}` + ssLastScoreNode.innerHTML = formattedLastScore +} + + +function showGameBox() { + stopAllMusic() + playMusic(gameBoxMusic) + + startScreenNode.style.display = "none" + gameBoxNode.style.display = "block" + resultScreenNode.style.display = "none" + + let formattedHighScore = `${highScore.toString().padStart(6, '0')}` + gbHighScoreNode.innerHTML = formattedHighScore + let formattedLastScore = `${lastScore.toString().padStart(6, '0')}` + gbLastScoreNode.innerHTML = formattedLastScore + + profObj = new Prof() + + countdownStart() +} + +function countdownStart() { + setTimeout(playSfx(countDownFX), 1000) + pauseBtn.style.display = 'none' + quitBtn.style.display = 'none' + let count = 4 + countdownNode.style.display = 'block' + const countInterval = setInterval(() => { + count-- + countdownNode.innerHTML = count + if (count === 0) { + countdownNode.style.display = 'none' + clearInterval(countInterval) + startGame() + } + }, 600); +} + +function gameLoop() { + invaderArr.forEach(invader => { + invader.automaticMovement() + }) + + lightBallArr.forEach(lightBall => { + lightBall.automaticMovement() + }) + + checkCollisions(invaderArr, lightBallArr) + checkBaseLife() + checkLightBallDespawn() +} + +function startGame() { + pauseBtn.style.display = 'inline-block' + quitBtn.style.display = 'inline-block' + + gameIntervalId = setInterval(gameLoop, Math.floor(1000 / 60)) + invaderInternalId = setInterval(invaderSpawn, 2000) +} + +function invaderSpawn() { + let randomXPositive = Math.floor(Math.random() * 320) + let randomXNegaive = Math.floor(Math.random() * -320) + let randomArray = [randomXNegaive, randomXPositive] + let randomX = randomArray[Math.floor(Math.random() * 2)] + let newInvaderObj = new Invader(randomX) + invaderArr.push(newInvaderObj) +} + +function createLightBall() { + playSfx(lightBallSound) + let profX = profObj.x + let newLightBall = new LightBall(profX) + lightBallArr.push(newLightBall) +} + +function checkCollisions(invaders, lightBalls) { + for (let i = 0; i < invaders.length; i++) { + for (let j = 0; j < lightBalls.length; j++) { + const invader = invaders[i] + const lightBall = lightBalls[j] + + if (invader.x < lightBall.x + lightBall.width && + invader.x + invader.width > lightBall.x && + invader.y < lightBall.y + lightBall.height && + invader.y + invader.height > lightBall.y) { + + invader.life-- + + if (invader.life === 0) { + invader.die() + invaders.splice(i, 1) + } + + lightBall.node.remove() + lightBalls.splice(j, 1) + } + } + } +} + + +function checkBaseLife() { + invaderArr.forEach((invader, index) => { + if (invader.y > 862) { + invader.node.remove() + invaderArr.splice(index, 1) + baseLife = baseLife - 5 + baseLifeNode.style.width = `${baseLife}%` + if (baseLife <= 0) { + gameEnd() + } + } + }) +} + +function checkLightBallDespawn() { + lightBallArr.forEach((lightBall, index) => { + if (lightBall.y < 552) { + lightBall.node.remove() + lightBallArr.splice(index, 1) + } + }) +} + + +function isNewHighScore() { + if (currentScore > highScore) { + highScore = currentScore + localStorage.setItem('highScore', highScore) + isNewRecord = true + } +} + +function gameEnd() { + if (isPause) { + isPause = false + pauseDivNode.style.display = 'none' + pauseDivNode.style.innerHTML = '' + pauseBtn.innerHTML = 'pause' + } + quitConfirmDiv.style.display = 'none' + playSfx(gameOverMusic) + setTimeout(playSfx(gameOverVoice), 3000) + countdownNode.style.display = 'block' + clearInterval(invaderInternalId) + clearInterval(gameIntervalId) + setTimeout(isNewHighScore(), 3000) + setTimeout(showResultScreen(), 3000) +} + +function showResultScreen() { + + stopAllMusic() + startScreenNode.style.display = "none" + gameBoxNode.style.display = "none" + resultScreenNode.style.display = "block" + + let formattedScore = `${currentScore.toString().padStart(6, '0')}` + gameEndScore.innerHTML = formattedScore + + let formattedHighScore = `${highScore.toString().padStart(6, '0')}` + gameEndHighScore.innerHTML = formattedHighScore +} + +function returnStartScreen() { + stopAllMusic() + invaderArr.forEach(invader => { + invader.node.remove() + }) + invaderArr = [] + + + lightBallArr.forEach(lightBall => { + lightBall.node.remove() + }) + lightBallArr = [] + + profObj.node.remove() + + lastScore = currentScore + localStorage.setItem('lastScore', lastScore) + currentScore = 0 + baseLife = 100 + isNewRecord = null + showStartScreen() +} + +// ------------------------------------------------------------------------------------------------- +// *** EVENT LISTENERS *** + +// START BUTTON + +startButton.addEventListener('click', () => { + showGameBox() +}) + +// MUSIC TOGGLES + +ssMusicToggleNode.addEventListener('click', () => { + isMusicOn = !isMusicOn + + let musicState = isMusicOn ? 'on' : 'off' + gbMusicStateNode.innerHTML = musicState + ssMusicStateNode.innerHTML = musicState + + if (isMusicOn) { + playMusic(startScreenMusic) + } else if (!isMusicOn) { + startScreenMusic.pause() + } +}) + +gbMusicToggleNode.addEventListener('click', () => { + isMusicOn = !isMusicOn + + let musicState = isMusicOn ? 'on' : 'off' + gbMusicStateNode.innerHTML = musicState + ssMusicStateNode.innerHTML = musicState + + if (isMusicOn) { + playMusic(gameBoxMusic) + } else if (!isMusicOn) { + gameBoxMusic.pause() + } +}) + +// PROF ACTIONS + +document.addEventListener('keydown', e => { + const key = e.key.toLowerCase() + + + if (!isPause) { + if ((key === 'a' || key === 'arrowleft') && profObj.x > 0) { + profObj.x -= profObj.moveSpeed + profObj.node.style.left = `${profObj.x}px` + } else if ((key === 'd' || key === 'arrowright') && profObj.x < gameBoxNode.offsetWidth - profObj.width) { + profObj.x += profObj.moveSpeed + profObj.node.style.left = `${profObj.x}px` + } else if ((key === 'w' || key === 'arrowup')) { + profObj.node.src = "../assets/img/prof-hands-up.png" + createLightBall() + } + } +} +) + +document.addEventListener('keyup', e => { + const key = e.key.toLowerCase() + + if ((key === 'w' || key === 'arrowup')) { + profObj.node.src = "../assets/img/prof-stable.png" + } +} +) + +// SFX TOGGLE + +gbSfxToggleNode.addEventListener('click', () => { + isSfxOn = !isSfxOn + console.log(`sfx state: ${isSfxOn}`) + let sfxText = isSfxOn ? 'on' : 'off' + gbSfxStateNode.innerText = sfxText +}) + +// PAUSE BTN + +pauseBtn.addEventListener('click', () => { + isPause = !isPause + + if (isPause) { + gameBoxMusic.pause() + clearInterval(gameIntervalId) + clearInterval(invaderInternalId) + pauseBtn.innerHTML = 'resume' + pauseDivNode.innerHTML = 'PAUSED' + pauseDivNode.style.display = 'block' + } else { + pauseDivNode.style.display = 'none' + pauseDivNode.style.innerHTML = '' + gameBoxMusic.play() + pauseBtn.innerHTML = 'pause' + gameIntervalId = setInterval(gameLoop, Math.floor(1000 / 60)) + invaderInternalId = setInterval(invaderSpawn, 2000) + } +}) + + +// QUIT BTN + + +quitBtn.addEventListener('click', () => { + clearInterval(gameIntervalId) + clearInterval(invaderInternalId) + quitConfirmDiv.style.display = 'flex' + quitConfirmDiv.style.zIndex = 9 +}) + +quitConfirmYes.addEventListener('click', gameEnd) + +quitConfirmNo.addEventListener('click', () => { + quitConfirmDiv.style.display = 'none' + if (!isPause) { + gameIntervalId = setInterval(gameLoop, Math.floor(1000 / 60)) + invaderInternalId = setInterval(invaderSpawn, 2000) + } +}) + +toStartMenuBtn.addEventListener('click', returnStartScreen) +// ------------------------------------------------------------------------------------------------- + +// *** APP FLOW *** + +// start screens +window.addEventListener("DOMContentLoaded", () => { + updateScore() +}) + + +// ------------------------------------------------------------------------------------------------- +// if (key === 'w' || key === 'arrowup') +// createLightBall(profObj.x) \ No newline at end of file diff --git a/src/prof.js b/src/prof.js new file mode 100644 index 0000000..3605645 --- /dev/null +++ b/src/prof.js @@ -0,0 +1,25 @@ +class Prof { + constructor(){ + this.node = document.createElement('img') + this.node.id = 'prof' + this.node.src = "../assets/img/prof-stable.png" + gameBoxNode.append(this.node) + this.node.style.position = 'absolute' + this.node.style.zIndex = 8 + + //add the initial values of position and dimensions + this.width = 148 + this.height = 119 + this.x = 886 + this.y = 961 + + //adjust the node with initial values + this.node.style.width = `${this.width}px` + this.node.style.height = `${this.height}px` + this.node.style.top = `${this.y}px` + this.node.style.left = `${this.x}px` + + //movements + this.moveSpeed = 12 + } +} \ No newline at end of file diff --git a/styles/style.css b/styles/style.css index 008e0f1..fe307e0 100644 --- a/styles/style.css +++ b/styles/style.css @@ -12,294 +12,310 @@ /* *** GLOBAL CLASSES *** */ +/* effects */ + +@keyframes pulse { + 0% { + transform: scale(1); + } + + 50% { + transform: scale(1.1); + } + + 100% { + transform: scale(1); + } +} + +.pulse { + animation: pulse 2s infinite; +} + +.pulse:hover, +.pulse:active { + animation: none; +} + /* btn classes */ .btn { - transition: all 0.2s ease; - cursor: pointer; - display: inline-block; + transition: all 0.2s ease; + cursor: pointer; + display: inline-block; } -/* Hover - Büyür ve gold stroke */ .btn:hover { - transform: scale(1.1); - text-shadow: - -5px -5px 0 #92670A, -4px -5px 0 #92670A, -3px -5px 0 #92670A, -2px -5px 0 #92670A, -1px -5px 0 #92670A, - 0px -5px 0 #92670A, 1px -5px 0 #92670A, 2px -5px 0 #92670A, 3px -5px 0 #92670A, 4px -5px 0 #92670A, - 5px -5px 0 #92670A, -5px -4px 0 #92670A, -4px -4px 0 #92670A, -3px -4px 0 #92670A, -2px -4px 0 #92670A, - -1px -4px 0 #92670A, 0px -4px 0 #92670A, 1px -4px 0 #92670A, 2px -4px 0 #92670A, 3px -4px 0 #92670A, - 4px -4px 0 #92670A, 5px -4px 0 #92670A, -5px -3px 0 #92670A, -4px -3px 0 #92670A, -3px -3px 0 #92670A, - -2px -3px 0 #92670A, -1px -3px 0 #92670A, 0px -3px 0 #92670A, 1px -3px 0 #92670A, 2px -3px 0 #92670A, - 3px -3px 0 #92670A, 4px -3px 0 #92670A, 5px -3px 0 #92670A, -5px -2px 0 #92670A, -4px -2px 0 #92670A, - -3px -2px 0 #92670A, -2px -2px 0 #92670A, -1px -2px 0 #92670A, 0px -2px 0 #92670A, 1px -2px 0 #92670A, - 2px -2px 0 #92670A, 3px -2px 0 #92670A, 4px -2px 0 #92670A, 5px -2px 0 #92670A, -5px -1px 0 #92670A, - -4px -1px 0 #92670A, -3px -1px 0 #92670A, -2px -1px 0 #92670A, -1px -1px 0 #92670A, 0px -1px 0 #92670A, - 1px -1px 0 #92670A, 2px -1px 0 #92670A, 3px -1px 0 #92670A, 4px -1px 0 #92670A, 5px -1px 0 #92670A, - -5px 0px 0 #92670A, -4px 0px 0 #92670A, -3px 0px 0 #92670A, -2px 0px 0 #92670A, -1px 0px 0 #92670A, - 1px 0px 0 #92670A, 2px 0px 0 #92670A, 3px 0px 0 #92670A, 4px 0px 0 #92670A, 5px 0px 0 #92670A, - -5px 1px 0 #92670A, -4px 1px 0 #92670A, -3px 1px 0 #92670A, -2px 1px 0 #92670A, -1px 1px 0 #92670A, - 0px 1px 0 #92670A, 1px 1px 0 #92670A, 2px 1px 0 #92670A, 3px 1px 0 #92670A, 4px 1px 0 #92670A, - 5px 1px 0 #92670A, -5px 2px 0 #92670A, -4px 2px 0 #92670A, -3px 2px 0 #92670A, -2px 2px 0 #92670A, - -1px 2px 0 #92670A, 0px 2px 0 #92670A, 1px 2px 0 #92670A, 2px 2px 0 #92670A, 3px 2px 0 #92670A, - 4px 2px 0 #92670A, 5px 2px 0 #92670A, -5px 3px 0 #92670A, -4px 3px 0 #92670A, -3px 3px 0 #92670A, - -2px 3px 0 #92670A, -1px 3px 0 #92670A, 0px 3px 0 #92670A, 1px 3px 0 #92670A, 2px 3px 0 #92670A, - 3px 3px 0 #92670A, 4px 3px 0 #92670A, 5px 3px 0 #92670A, -5px 4px 0 #92670A, -4px 4px 0 #92670A, - -3px 4px 0 #92670A, -2px 4px 0 #92670A, -1px 4px 0 #92670A, 0px 4px 0 #92670A, 1px 4px 0 #92670A, - 2px 4px 0 #92670A, 3px 4px 0 #92670A, 4px 4px 0 #92670A, 5px 4px 0 #92670A, -5px 5px 0 #92670A, - -4px 5px 0 #92670A, -3px 5px 0 #92670A, -2px 5px 0 #92670A, -1px 5px 0 #92670A, 0px 5px 0 #92670A, - 1px 5px 0 #92670A, 2px 5px 0 #92670A, 3px 5px 0 #92670A, 4px 5px 0 #92670A, 5px 5px 0 #92670A; -} - -/* Active/Click - Küçülür ve dark brown stroke */ + transform: scale(1.1); + text-shadow: + -5px -5px 0 #92670A, -4px -5px 0 #92670A, -3px -5px 0 #92670A, -2px -5px 0 #92670A, -1px -5px 0 #92670A, + 0px -5px 0 #92670A, 1px -5px 0 #92670A, 2px -5px 0 #92670A, 3px -5px 0 #92670A, 4px -5px 0 #92670A, + 5px -5px 0 #92670A, -5px -4px 0 #92670A, -4px -4px 0 #92670A, -3px -4px 0 #92670A, -2px -4px 0 #92670A, + -1px -4px 0 #92670A, 0px -4px 0 #92670A, 1px -4px 0 #92670A, 2px -4px 0 #92670A, 3px -4px 0 #92670A, + 4px -4px 0 #92670A, 5px -4px 0 #92670A, -5px -3px 0 #92670A, -4px -3px 0 #92670A, -3px -3px 0 #92670A, + -2px -3px 0 #92670A, -1px -3px 0 #92670A, 0px -3px 0 #92670A, 1px -3px 0 #92670A, 2px -3px 0 #92670A, + 3px -3px 0 #92670A, 4px -3px 0 #92670A, 5px -3px 0 #92670A, -5px -2px 0 #92670A, -4px -2px 0 #92670A, + -3px -2px 0 #92670A, -2px -2px 0 #92670A, -1px -2px 0 #92670A, 0px -2px 0 #92670A, 1px -2px 0 #92670A, + 2px -2px 0 #92670A, 3px -2px 0 #92670A, 4px -2px 0 #92670A, 5px -2px 0 #92670A, -5px -1px 0 #92670A, + -4px -1px 0 #92670A, -3px -1px 0 #92670A, -2px -1px 0 #92670A, -1px -1px 0 #92670A, 0px -1px 0 #92670A, + 1px -1px 0 #92670A, 2px -1px 0 #92670A, 3px -1px 0 #92670A, 4px -1px 0 #92670A, 5px -1px 0 #92670A, + -5px 0px 0 #92670A, -4px 0px 0 #92670A, -3px 0px 0 #92670A, -2px 0px 0 #92670A, -1px 0px 0 #92670A, + 1px 0px 0 #92670A, 2px 0px 0 #92670A, 3px 0px 0 #92670A, 4px 0px 0 #92670A, 5px 0px 0 #92670A, + -5px 1px 0 #92670A, -4px 1px 0 #92670A, -3px 1px 0 #92670A, -2px 1px 0 #92670A, -1px 1px 0 #92670A, + 0px 1px 0 #92670A, 1px 1px 0 #92670A, 2px 1px 0 #92670A, 3px 1px 0 #92670A, 4px 1px 0 #92670A, + 5px 1px 0 #92670A, -5px 2px 0 #92670A, -4px 2px 0 #92670A, -3px 2px 0 #92670A, -2px 2px 0 #92670A, + -1px 2px 0 #92670A, 0px 2px 0 #92670A, 1px 2px 0 #92670A, 2px 2px 0 #92670A, 3px 2px 0 #92670A, + 4px 2px 0 #92670A, 5px 2px 0 #92670A, -5px 3px 0 #92670A, -4px 3px 0 #92670A, -3px 3px 0 #92670A, + -2px 3px 0 #92670A, -1px 3px 0 #92670A, 0px 3px 0 #92670A, 1px 3px 0 #92670A, 2px 3px 0 #92670A, + 3px 3px 0 #92670A, 4px 3px 0 #92670A, 5px 3px 0 #92670A, -5px 4px 0 #92670A, -4px 4px 0 #92670A, + -3px 4px 0 #92670A, -2px 4px 0 #92670A, -1px 4px 0 #92670A, 0px 4px 0 #92670A, 1px 4px 0 #92670A, + 2px 4px 0 #92670A, 3px 4px 0 #92670A, 4px 4px 0 #92670A, 5px 4px 0 #92670A, -5px 5px 0 #92670A, + -4px 5px 0 #92670A, -3px 5px 0 #92670A, -2px 5px 0 #92670A, -1px 5px 0 #92670A, 0px 5px 0 #92670A, + 1px 5px 0 #92670A, 2px 5px 0 #92670A, 3px 5px 0 #92670A, 4px 5px 0 #92670A, 5px 5px 0 #92670A; +} + .btn:active { - transform: scale(0.95); - text-shadow: - -5px -5px 0 #4B3301, -4px -5px 0 #4B3301, -3px -5px 0 #4B3301, -2px -5px 0 #4B3301, -1px -5px 0 #4B3301, - 0px -5px 0 #4B3301, 1px -5px 0 #4B3301, 2px -5px 0 #4B3301, 3px -5px 0 #4B3301, 4px -5px 0 #4B3301, - 5px -5px 0 #4B3301, -5px -4px 0 #4B3301, -4px -4px 0 #4B3301, -3px -4px 0 #4B3301, -2px -4px 0 #4B3301, - -1px -4px 0 #4B3301, 0px -4px 0 #4B3301, 1px -4px 0 #4B3301, 2px -4px 0 #4B3301, 3px -4px 0 #4B3301, - 4px -4px 0 #4B3301, 5px -4px 0 #4B3301, -5px -3px 0 #4B3301, -4px -3px 0 #4B3301, -3px -3px 0 #4B3301, - -2px -3px 0 #4B3301, -1px -3px 0 #4B3301, 0px -3px 0 #4B3301, 1px -3px 0 #4B3301, 2px -3px 0 #4B3301, - 3px -3px 0 #4B3301, 4px -3px 0 #4B3301, 5px -3px 0 #4B3301, -5px -2px 0 #4B3301, -4px -2px 0 #4B3301, - -3px -2px 0 #4B3301, -2px -2px 0 #4B3301, -1px -2px 0 #4B3301, 0px -2px 0 #4B3301, 1px -2px 0 #4B3301, - 2px -2px 0 #4B3301, 3px -2px 0 #4B3301, 4px -2px 0 #4B3301, 5px -2px 0 #4B3301, -5px -1px 0 #4B3301, - -4px -1px 0 #4B3301, -3px -1px 0 #4B3301, -2px -1px 0 #4B3301, -1px -1px 0 #4B3301, 0px -1px 0 #4B3301, - 1px -1px 0 #4B3301, 2px -1px 0 #4B3301, 3px -1px 0 #4B3301, 4px -1px 0 #4B3301, 5px -1px 0 #4B3301, - -5px 0px 0 #4B3301, -4px 0px 0 #4B3301, -3px 0px 0 #4B3301, -2px 0px 0 #4B3301, -1px 0px 0 #4B3301, - 1px 0px 0 #4B3301, 2px 0px 0 #4B3301, 3px 0px 0 #4B3301, 4px 0px 0 #4B3301, 5px 0px 0 #4B3301, - -5px 1px 0 #4B3301, -4px 1px 0 #4B3301, -3px 1px 0 #4B3301, -2px 1px 0 #4B3301, -1px 1px 0 #4B3301, - 0px 1px 0 #4B3301, 1px 1px 0 #4B3301, 2px 1px 0 #4B3301, 3px 1px 0 #4B3301, 4px 1px 0 #4B3301, - 5px 1px 0 #4B3301, -5px 2px 0 #4B3301, -4px 2px 0 #4B3301, -3px 2px 0 #4B3301, -2px 2px 0 #4B3301, - -1px 2px 0 #4B3301, 0px 2px 0 #4B3301, 1px 2px 0 #4B3301, 2px 2px 0 #4B3301, 3px 2px 0 #4B3301, - 4px 2px 0 #4B3301, 5px 2px 0 #4B3301, -5px 3px 0 #4B3301, -4px 3px 0 #4B3301, -3px 3px 0 #4B3301, - -2px 3px 0 #4B3301, -1px 3px 0 #4B3301, 0px 3px 0 #4B3301, 1px 3px 0 #4B3301, 2px 3px 0 #4B3301, - 3px 3px 0 #4B3301, 4px 3px 0 #4B3301, 5px 3px 0 #4B3301, -5px 4px 0 #4B3301, -4px 4px 0 #4B3301, - -3px 4px 0 #4B3301, -2px 4px 0 #4B3301, -1px 4px 0 #4B3301, 0px 4px 0 #4B3301, 1px 4px 0 #4B3301, - 2px 4px 0 #4B3301, 3px 4px 0 #4B3301, 4px 4px 0 #4B3301, 5px 4px 0 #4B3301, -5px 5px 0 #4B3301, - -4px 5px 0 #4B3301, -3px 5px 0 #4B3301, -2px 5px 0 #4B3301, -1px 5px 0 #4B3301, 0px 5px 0 #4B3301, - 1px 5px 0 #4B3301, 2px 5px 0 #4B3301, 3px 5px 0 #4B3301, 4px 5px 0 #4B3301, 5px 5px 0 #4B3301; -} - -/* PNG/IMG elementleri için hover ve active efektleri */ + transform: scale(0.95); + text-shadow: + -5px -5px 0 #4B3301, -4px -5px 0 #4B3301, -3px -5px 0 #4B3301, -2px -5px 0 #4B3301, -1px -5px 0 #4B3301, + 0px -5px 0 #4B3301, 1px -5px 0 #4B3301, 2px -5px 0 #4B3301, 3px -5px 0 #4B3301, 4px -5px 0 #4B3301, + 5px -5px 0 #4B3301, -5px -4px 0 #4B3301, -4px -4px 0 #4B3301, -3px -4px 0 #4B3301, -2px -4px 0 #4B3301, + -1px -4px 0 #4B3301, 0px -4px 0 #4B3301, 1px -4px 0 #4B3301, 2px -4px 0 #4B3301, 3px -4px 0 #4B3301, + 4px -4px 0 #4B3301, 5px -4px 0 #4B3301, -5px -3px 0 #4B3301, -4px -3px 0 #4B3301, -3px -3px 0 #4B3301, + -2px -3px 0 #4B3301, -1px -3px 0 #4B3301, 0px -3px 0 #4B3301, 1px -3px 0 #4B3301, 2px -3px 0 #4B3301, + 3px -3px 0 #4B3301, 4px -3px 0 #4B3301, 5px -3px 0 #4B3301, -5px -2px 0 #4B3301, -4px -2px 0 #4B3301, + -3px -2px 0 #4B3301, -2px -2px 0 #4B3301, -1px -2px 0 #4B3301, 0px -2px 0 #4B3301, 1px -2px 0 #4B3301, + 2px -2px 0 #4B3301, 3px -2px 0 #4B3301, 4px -2px 0 #4B3301, 5px -2px 0 #4B3301, -5px -1px 0 #4B3301, + -4px -1px 0 #4B3301, -3px -1px 0 #4B3301, -2px -1px 0 #4B3301, -1px -1px 0 #4B3301, 0px -1px 0 #4B3301, + 1px -1px 0 #4B3301, 2px -1px 0 #4B3301, 3px -1px 0 #4B3301, 4px -1px 0 #4B3301, 5px -1px 0 #4B3301, + -5px 0px 0 #4B3301, -4px 0px 0 #4B3301, -3px 0px 0 #4B3301, -2px 0px 0 #4B3301, -1px 0px 0 #4B3301, + 1px 0px 0 #4B3301, 2px 0px 0 #4B3301, 3px 0px 0 #4B3301, 4px 0px 0 #4B3301, 5px 0px 0 #4B3301, + -5px 1px 0 #4B3301, -4px 1px 0 #4B3301, -3px 1px 0 #4B3301, -2px 1px 0 #4B3301, -1px 1px 0 #4B3301, + 0px 1px 0 #4B3301, 1px 1px 0 #4B3301, 2px 1px 0 #4B3301, 3px 1px 0 #4B3301, 4px 1px 0 #4B3301, + 5px 1px 0 #4B3301, -5px 2px 0 #4B3301, -4px 2px 0 #4B3301, -3px 2px 0 #4B3301, -2px 2px 0 #4B3301, + -1px 2px 0 #4B3301, 0px 2px 0 #4B3301, 1px 2px 0 #4B3301, 2px 2px 0 #4B3301, 3px 2px 0 #4B3301, + 4px 2px 0 #4B3301, 5px 2px 0 #4B3301, -5px 3px 0 #4B3301, -4px 3px 0 #4B3301, -3px 3px 0 #4B3301, + -2px 3px 0 #4B3301, -1px 3px 0 #4B3301, 0px 3px 0 #4B3301, 1px 3px 0 #4B3301, 2px 3px 0 #4B3301, + 3px 3px 0 #4B3301, 4px 3px 0 #4B3301, 5px 3px 0 #4B3301, -5px 4px 0 #4B3301, -4px 4px 0 #4B3301, + -3px 4px 0 #4B3301, -2px 4px 0 #4B3301, -1px 4px 0 #4B3301, 0px 4px 0 #4B3301, 1px 4px 0 #4B3301, + 2px 4px 0 #4B3301, 3px 4px 0 #4B3301, 4px 4px 0 #4B3301, 5px 4px 0 #4B3301, -5px 5px 0 #4B3301, + -4px 5px 0 #4B3301, -3px 5px 0 #4B3301, -2px 5px 0 #4B3301, -1px 5px 0 #4B3301, 0px 5px 0 #4B3301, + 1px 5px 0 #4B3301, 2px 5px 0 #4B3301, 3px 5px 0 #4B3301, 4px 5px 0 #4B3301, 5px 5px 0 #4B3301; +} + .btn img, .btn svg { - transition: filter 0.2s ease; + transition: filter 0.2s ease; } .btn:hover img, .btn:hover svg { - filter: - drop-shadow(0 0 1px #92670A) - drop-shadow(0 0 2px #92670A) - drop-shadow(0 0 3px #92670A) - drop-shadow(0 0 4px #92670A) - drop-shadow(0 0 5px #92670A); + filter: + drop-shadow(0 0 1px #92670A) drop-shadow(0 0 2px #92670A) drop-shadow(0 0 3px #92670A) drop-shadow(0 0 4px #92670A) drop-shadow(0 0 5px #92670A); } .btn:active img, .btn:active svg { - filter: - drop-shadow(0 0 1px #4B3301) - drop-shadow(0 0 2px #4B3301) - drop-shadow(0 0 3px #4B3301) - drop-shadow(0 0 4px #4B3301) - drop-shadow(0 0 5px #4B3301); + filter: + drop-shadow(0 0 1px #4B3301) drop-shadow(0 0 2px #4B3301) drop-shadow(0 0 3px #4B3301) drop-shadow(0 0 4px #4B3301) drop-shadow(0 0 5px #4B3301); } /* text strokes */ .stroke-orange { - text-shadow: - -5px -5px 0 #faa300, -4px -5px 0 #faa300, -3px -5px 0 #faa300, -2px -5px 0 #faa300, -1px -5px 0 #faa300, - 0px -5px 0 #faa300, 1px -5px 0 #faa300, 2px -5px 0 #faa300, 3px -5px 0 #faa300, 4px -5px 0 #faa300, - 5px -5px 0 #faa300, -5px -4px 0 #faa300, -4px -4px 0 #faa300, -3px -4px 0 #faa300, -2px -4px 0 #faa300, - -1px -4px 0 #faa300, 0px -4px 0 #faa300, 1px -4px 0 #faa300, 2px -4px 0 #faa300, 3px -4px 0 #faa300, - 4px -4px 0 #faa300, 5px -4px 0 #faa300, -5px -3px 0 #faa300, -4px -3px 0 #faa300, -3px -3px 0 #faa300, - -2px -3px 0 #faa300, -1px -3px 0 #faa300, 0px -3px 0 #faa300, 1px -3px 0 #faa300, 2px -3px 0 #faa300, - 3px -3px 0 #faa300, 4px -3px 0 #faa300, 5px -3px 0 #faa300, -5px -2px 0 #faa300, -4px -2px 0 #faa300, - -3px -2px 0 #faa300, -2px -2px 0 #faa300, -1px -2px 0 #faa300, 0px -2px 0 #faa300, 1px -2px 0 #faa300, - 2px -2px 0 #faa300, 3px -2px 0 #faa300, 4px -2px 0 #faa300, 5px -2px 0 #faa300, -5px -1px 0 #faa300, - -4px -1px 0 #92670A, -3px -1px 0 #92670A, -2px -1px 0 #92670A, -1px -1px 0 #92670A, 0px -1px 0 #92670A, - 1px -1px 0 #92670A, 2px -1px 0 #92670A, 3px -1px 0 #92670A, 4px -1px 0 #92670A, 5px -1px 0 #92670A, - -5px 0px 0 #92670A, -4px 0px 0 #92670A, -3px 0px 0 #92670A, -2px 0px 0 #92670A, -1px 0px 0 #92670A, - 1px 0px 0 #92670A, 2px 0px 0 #92670A, 3px 0px 0 #92670A, 4px 0px 0 #92670A, 5px 0px 0 #92670A, - -5px 1px 0 #92670A, -4px 1px 0 #92670A, -3px 1px 0 #92670A, -2px 1px 0 #92670A, -1px 1px 0 #92670A, - 0px 1px 0 #92670A, 1px 1px 0 #92670A, 2px 1px 0 #92670A, 3px 1px 0 #92670A, 4px 1px 0 #92670A, - 5px 1px 0 #92670A, -5px 2px 0 #92670A, -4px 2px 0 #92670A, -3px 2px 0 #92670A, -2px 2px 0 #92670A, - -1px 2px 0 #92670A, 0px 2px 0 #92670A, 1px 2px 0 #92670A, 2px 2px 0 #92670A, 3px 2px 0 #92670A, - 4px 2px 0 #92670A, 5px 2px 0 #92670A, -5px 3px 0 #92670A, -4px 3px 0 #92670A, -3px 3px 0 #92670A, - -2px 3px 0 #92670A, -1px 3px 0 #92670A, 0px 3px 0 #92670A, 1px 3px 0 #92670A, 2px 3px 0 #92670A, - 3px 3px 0 #92670A, 4px 3px 0 #92670A, 5px 3px 0 #92670A, -5px 4px 0 #92670A, -4px 4px 0 #92670A, - -3px 4px 0 #92670A, -2px 4px 0 #92670A, -1px 4px 0 #92670A, 0px 4px 0 #92670A, 1px 4px 0 #92670A, - 2px 4px 0 #92670A, 3px 4px 0 #92670A, 4px 4px 0 #92670A, 5px 4px 0 #92670A, -5px 5px 0 #92670A, - -4px 5px 0 #92670A, -3px 5px 0 #92670A, -2px 5px 0 #92670A, -1px 5px 0 #92670A, 0px 5px 0 #92670A, - 1px 5px 0 #92670A, 2px 5px 0 #92670A, 3px 5px 0 #92670A, 4px 5px 0 #92670A, 5px 5px 0 #92670A; + text-shadow: + -5px -5px 0 #faa300, -4px -5px 0 #faa300, -3px -5px 0 #faa300, -2px -5px 0 #faa300, -1px -5px 0 #faa300, + 0px -5px 0 #faa300, 1px -5px 0 #faa300, 2px -5px 0 #faa300, 3px -5px 0 #faa300, 4px -5px 0 #faa300, + 5px -5px 0 #faa300, -5px -4px 0 #faa300, -4px -4px 0 #faa300, -3px -4px 0 #faa300, -2px -4px 0 #faa300, + -1px -4px 0 #faa300, 0px -4px 0 #faa300, 1px -4px 0 #faa300, 2px -4px 0 #faa300, 3px -4px 0 #faa300, + 4px -4px 0 #faa300, 5px -4px 0 #faa300, -5px -3px 0 #faa300, -4px -3px 0 #faa300, -3px -3px 0 #faa300, + -2px -3px 0 #faa300, -1px -3px 0 #faa300, 0px -3px 0 #faa300, 1px -3px 0 #faa300, 2px -3px 0 #faa300, + 3px -3px 0 #faa300, 4px -3px 0 #faa300, 5px -3px 0 #faa300, -5px -2px 0 #faa300, -4px -2px 0 #faa300, + -3px -2px 0 #faa300, -2px -2px 0 #faa300, -1px -2px 0 #faa300, 0px -2px 0 #faa300, 1px -2px 0 #faa300, + 2px -2px 0 #faa300, 3px -2px 0 #faa300, 4px -2px 0 #faa300, 5px -2px 0 #faa300, -5px -1px 0 #faa300, + -4px -1px 0 #92670A, -3px -1px 0 #92670A, -2px -1px 0 #92670A, -1px -1px 0 #92670A, 0px -1px 0 #92670A, + 1px -1px 0 #92670A, 2px -1px 0 #92670A, 3px -1px 0 #92670A, 4px -1px 0 #92670A, 5px -1px 0 #92670A, + -5px 0px 0 #92670A, -4px 0px 0 #92670A, -3px 0px 0 #92670A, -2px 0px 0 #92670A, -1px 0px 0 #92670A, + 1px 0px 0 #92670A, 2px 0px 0 #92670A, 3px 0px 0 #92670A, 4px 0px 0 #92670A, 5px 0px 0 #92670A, + -5px 1px 0 #92670A, -4px 1px 0 #92670A, -3px 1px 0 #92670A, -2px 1px 0 #92670A, -1px 1px 0 #92670A, + 0px 1px 0 #92670A, 1px 1px 0 #92670A, 2px 1px 0 #92670A, 3px 1px 0 #92670A, 4px 1px 0 #92670A, + 5px 1px 0 #92670A, -5px 2px 0 #92670A, -4px 2px 0 #92670A, -3px 2px 0 #92670A, -2px 2px 0 #92670A, + -1px 2px 0 #92670A, 0px 2px 0 #92670A, 1px 2px 0 #92670A, 2px 2px 0 #92670A, 3px 2px 0 #92670A, + 4px 2px 0 #92670A, 5px 2px 0 #92670A, -5px 3px 0 #92670A, -4px 3px 0 #92670A, -3px 3px 0 #92670A, + -2px 3px 0 #92670A, -1px 3px 0 #92670A, 0px 3px 0 #92670A, 1px 3px 0 #92670A, 2px 3px 0 #92670A, + 3px 3px 0 #92670A, 4px 3px 0 #92670A, 5px 3px 0 #92670A, -5px 4px 0 #92670A, -4px 4px 0 #92670A, + -3px 4px 0 #92670A, -2px 4px 0 #92670A, -1px 4px 0 #92670A, 0px 4px 0 #92670A, 1px 4px 0 #92670A, + 2px 4px 0 #92670A, 3px 4px 0 #92670A, 4px 4px 0 #92670A, 5px 4px 0 #92670A, -5px 5px 0 #92670A, + -4px 5px 0 #92670A, -3px 5px 0 #92670A, -2px 5px 0 #92670A, -1px 5px 0 #92670A, 0px 5px 0 #92670A, + 1px 5px 0 #92670A, 2px 5px 0 #92670A, 3px 5px 0 #92670A, 4px 5px 0 #92670A, 5px 5px 0 #92670A; } .stroke-dark-blue { - text-shadow: - -5px -5px 0 #000B51, -4px -5px 0 #000B51, -3px -5px 0 #000B51, -2px -5px 0 #000B51, -1px -5px 0 #000B51, - 0px -5px 0 #000B51, 1px -5px 0 #000B51, 2px -5px 0 #000B51, 3px -5px 0 #000B51, 4px -5px 0 #000B51, - 5px -5px 0 #000B51, -5px -4px 0 #000B51, -4px -4px 0 #000B51, -3px -4px 0 #000B51, -2px -4px 0 #000B51, - -1px -4px 0 #000B51, 0px -4px 0 #000B51, 1px -4px 0 #000B51, 2px -4px 0 #000B51, 3px -4px 0 #000B51, - 4px -4px 0 #000B51, 5px -4px 0 #000B51, -5px -3px 0 #000B51, -4px -3px 0 #000B51, -3px -3px 0 #000B51, - -2px -3px 0 #000B51, -1px -3px 0 #000B51, 0px -3px 0 #000B51, 1px -3px 0 #000B51, 2px -3px 0 #000B51, - 3px -3px 0 #000B51, 4px -3px 0 #000B51, 5px -3px 0 #000B51, -5px -2px 0 #000B51, -4px -2px 0 #000B51, - -3px -2px 0 #000B51, -2px -2px 0 #000B51, -1px -2px 0 #000B51, 0px -2px 0 #000B51, 1px -2px 0 #000B51, - 2px -2px 0 #000B51, 3px -2px 0 #000B51, 4px -2px 0 #000B51, 5px -2px 0 #000B51, -5px -1px 0 #000B51, - -4px -1px 0 #000B51, -3px -1px 0 #000B51, -2px -1px 0 #000B51, -1px -1px 0 #000B51, 0px -1px 0 #000B51, - 1px -1px 0 #000B51, 2px -1px 0 #000B51, 3px -1px 0 #000B51, 4px -1px 0 #000B51, 5px -1px 0 #000B51, - -5px 0px 0 #000B51, -4px 0px 0 #000B51, -3px 0px 0 #000B51, -2px 0px 0 #000B51, -1px 0px 0 #000B51, - 1px 0px 0 #000B51, 2px 0px 0 #000B51, 3px 0px 0 #000B51, 4px 0px 0 #000B51, 5px 0px 0 #000B51, - -5px 1px 0 #000B51, -4px 1px 0 #000B51, -3px 1px 0 #000B51, -2px 1px 0 #000B51, -1px 1px 0 #000B51, - 0px 1px 0 #000B51, 1px 1px 0 #000B51, 2px 1px 0 #000B51, 3px 1px 0 #000B51, 4px 1px 0 #000B51, - 5px 1px 0 #000B51, -5px 2px 0 #000B51, -4px 2px 0 #000B51, -3px 2px 0 #000B51, -2px 2px 0 #000B51, - -1px 2px 0 #000B51, 0px 2px 0 #000B51, 1px 2px 0 #000B51, 2px 2px 0 #000B51, 3px 2px 0 #000B51, - 4px 2px 0 #000B51, 5px 2px 0 #000B51, -5px 3px 0 #000B51, -4px 3px 0 #000B51, -3px 3px 0 #000B51, - -2px 3px 0 #000B51, -1px 3px 0 #000B51, 0px 3px 0 #000B51, 1px 3px 0 #000B51, 2px 3px 0 #000B51, - 3px 3px 0 #000B51, 4px 3px 0 #000B51, 5px 3px 0 #000B51, -5px 4px 0 #000B51, -4px 4px 0 #000B51, - -3px 4px 0 #000B51, -2px 4px 0 #000B51, -1px 4px 0 #000B51, 0px 4px 0 #000B51, 1px 4px 0 #000B51, - 2px 4px 0 #000B51, 3px 4px 0 #000B51, 4px 4px 0 #000B51, 5px 4px 0 #000B51, -5px 5px 0 #000B51, - -4px 5px 0 #000B51, -3px 5px 0 #000B51, -2px 5px 0 #000B51, -1px 5px 0 #000B51, 0px 5px 0 #000B51, - 1px 5px 0 #000B51, 2px 5px 0 #000B51, 3px 5px 0 #000B51, 4px 5px 0 #000B51, 5px 5px 0 #000B51; -} + text-shadow: + -5px -5px 0 #000B51, -4px -5px 0 #000B51, -3px -5px 0 #000B51, -2px -5px 0 #000B51, -1px -5px 0 #000B51, + 0px -5px 0 #000B51, 1px -5px 0 #000B51, 2px -5px 0 #000B51, 3px -5px 0 #000B51, 4px -5px 0 #000B51, + 5px -5px 0 #000B51, -5px -4px 0 #000B51, -4px -4px 0 #000B51, -3px -4px 0 #000B51, -2px -4px 0 #000B51, + -1px -4px 0 #000B51, 0px -4px 0 #000B51, 1px -4px 0 #000B51, 2px -4px 0 #000B51, 3px -4px 0 #000B51, + 4px -4px 0 #000B51, 5px -4px 0 #000B51, -5px -3px 0 #000B51, -4px -3px 0 #000B51, -3px -3px 0 #000B51, + -2px -3px 0 #000B51, -1px -3px 0 #000B51, 0px -3px 0 #000B51, 1px -3px 0 #000B51, 2px -3px 0 #000B51, + 3px -3px 0 #000B51, 4px -3px 0 #000B51, 5px -3px 0 #000B51, -5px -2px 0 #000B51, -4px -2px 0 #000B51, + -3px -2px 0 #000B51, -2px -2px 0 #000B51, -1px -2px 0 #000B51, 0px -2px 0 #000B51, 1px -2px 0 #000B51, + 2px -2px 0 #000B51, 3px -2px 0 #000B51, 4px -2px 0 #000B51, 5px -2px 0 #000B51, -5px -1px 0 #000B51, + -4px -1px 0 #000B51, -3px -1px 0 #000B51, -2px -1px 0 #000B51, -1px -1px 0 #000B51, 0px -1px 0 #000B51, + 1px -1px 0 #000B51, 2px -1px 0 #000B51, 3px -1px 0 #000B51, 4px -1px 0 #000B51, 5px -1px 0 #000B51, + -5px 0px 0 #000B51, -4px 0px 0 #000B51, -3px 0px 0 #000B51, -2px 0px 0 #000B51, -1px 0px 0 #000B51, + 1px 0px 0 #000B51, 2px 0px 0 #000B51, 3px 0px 0 #000B51, 4px 0px 0 #000B51, 5px 0px 0 #000B51, + -5px 1px 0 #000B51, -4px 1px 0 #000B51, -3px 1px 0 #000B51, -2px 1px 0 #000B51, -1px 1px 0 #000B51, + 0px 1px 0 #000B51, 1px 1px 0 #000B51, 2px 1px 0 #000B51, 3px 1px 0 #000B51, 4px 1px 0 #000B51, + 5px 1px 0 #000B51, -5px 2px 0 #000B51, -4px 2px 0 #000B51, -3px 2px 0 #000B51, -2px 2px 0 #000B51, + -1px 2px 0 #000B51, 0px 2px 0 #000B51, 1px 2px 0 #000B51, 2px 2px 0 #000B51, 3px 2px 0 #000B51, + 4px 2px 0 #000B51, 5px 2px 0 #000B51, -5px 3px 0 #000B51, -4px 3px 0 #000B51, -3px 3px 0 #000B51, + -2px 3px 0 #000B51, -1px 3px 0 #000B51, 0px 3px 0 #000B51, 1px 3px 0 #000B51, 2px 3px 0 #000B51, + 3px 3px 0 #000B51, 4px 3px 0 #000B51, 5px 3px 0 #000B51, -5px 4px 0 #000B51, -4px 4px 0 #000B51, + -3px 4px 0 #000B51, -2px 4px 0 #000B51, -1px 4px 0 #000B51, 0px 4px 0 #000B51, 1px 4px 0 #000B51, + 2px 4px 0 #000B51, 3px 4px 0 #000B51, 4px 4px 0 #000B51, 5px 4px 0 #000B51, -5px 5px 0 #000B51, + -4px 5px 0 #000B51, -3px 5px 0 #000B51, -2px 5px 0 #000B51, -1px 5px 0 #000B51, 0px 5px 0 #000B51, + 1px 5px 0 #000B51, 2px 5px 0 #000B51, 3px 5px 0 #000B51, 4px 5px 0 #000B51, 5px 5px 0 #000B51; +} + .stroke-blue { - text-shadow: - -5px -5px 0 #2E4AFD, -4px -5px 0 #2E4AFD, -3px -5px 0 #2E4AFD, -2px -5px 0 #2E4AFD, -1px -5px 0 #2E4AFD, - 0px -5px 0 #2E4AFD, 1px -5px 0 #2E4AFD, 2px -5px 0 #2E4AFD, 3px -5px 0 #2E4AFD, 4px -5px 0 #2E4AFD, - 5px -5px 0 #2E4AFD, -5px -4px 0 #2E4AFD, -4px -4px 0 #2E4AFD, -3px -4px 0 #2E4AFD, -2px -4px 0 #2E4AFD, - -1px -4px 0 #2E4AFD, 0px -4px 0 #2E4AFD, 1px -4px 0 #2E4AFD, 2px -4px 0 #2E4AFD, 3px -4px 0 #2E4AFD, - 4px -4px 0 #2E4AFD, 5px -4px 0 #2E4AFD, -5px -3px 0 #2E4AFD, -4px -3px 0 #2E4AFD, -3px -3px 0 #2E4AFD, - -2px -3px 0 #2E4AFD, -1px -3px 0 #2E4AFD, 0px -3px 0 #2E4AFD, 1px -3px 0 #2E4AFD, 2px -3px 0 #2E4AFD, - 3px -3px 0 #2E4AFD, 4px -3px 0 #2E4AFD, 5px -3px 0 #2E4AFD, -5px -2px 0 #2E4AFD, -4px -2px 0 #2E4AFD, - -3px -2px 0 #2E4AFD, -2px -2px 0 #2E4AFD, -1px -2px 0 #2E4AFD, 0px -2px 0 #2E4AFD, 1px -2px 0 #2E4AFD, - 2px -2px 0 #2E4AFD, 3px -2px 0 #2E4AFD, 4px -2px 0 #2E4AFD, 5px -2px 0 #2E4AFD, -5px -1px 0 #2E4AFD, - -4px -1px 0 #2E4AFD, -3px -1px 0 #2E4AFD, -2px -1px 0 #2E4AFD, -1px -1px 0 #2E4AFD, 0px -1px 0 #2E4AFD, - 1px -1px 0 #2E4AFD, 2px -1px 0 #2E4AFD, 3px -1px 0 #2E4AFD, 4px -1px 0 #2E4AFD, 5px -1px 0 #2E4AFD, - -5px 0px 0 #2E4AFD, -4px 0px 0 #2E4AFD, -3px 0px 0 #2E4AFD, -2px 0px 0 #2E4AFD, -1px 0px 0 #2E4AFD, - 1px 0px 0 #2E4AFD, 2px 0px 0 #2E4AFD, 3px 0px 0 #2E4AFD, 4px 0px 0 #2E4AFD, 5px 0px 0 #2E4AFD, - -5px 1px 0 #2E4AFD, -4px 1px 0 #2E4AFD, -3px 1px 0 #2E4AFD, -2px 1px 0 #2E4AFD, -1px 1px 0 #2E4AFD, - 0px 1px 0 #2E4AFD, 1px 1px 0 #2E4AFD, 2px 1px 0 #2E4AFD, 3px 1px 0 #2E4AFD, 4px 1px 0 #2E4AFD, - 5px 1px 0 #2E4AFD, -5px 2px 0 #2E4AFD, -4px 2px 0 #2E4AFD, -3px 2px 0 #2E4AFD, -2px 2px 0 #2E4AFD, - -1px 2px 0 #2E4AFD, 0px 2px 0 #2E4AFD, 1px 2px 0 #2E4AFD, 2px 2px 0 #2E4AFD, 3px 2px 0 #2E4AFD, - 4px 2px 0 #2E4AFD, 5px 2px 0 #2E4AFD, -5px 3px 0 #2E4AFD, -4px 3px 0 #2E4AFD, -3px 3px 0 #2E4AFD, - -2px 3px 0 #2E4AFD, -1px 3px 0 #2E4AFD, 0px 3px 0 #2E4AFD, 1px 3px 0 #2E4AFD, 2px 3px 0 #2E4AFD, - 3px 3px 0 #2E4AFD, 4px 3px 0 #2E4AFD, 5px 3px 0 #2E4AFD, -5px 4px 0 #2E4AFD, -4px 4px 0 #2E4AFD, - -3px 4px 0 #2E4AFD, -2px 4px 0 #2E4AFD, -1px 4px 0 #2E4AFD, 0px 4px 0 #2E4AFD, 1px 4px 0 #2E4AFD, - 2px 4px 0 #2E4AFD, 3px 4px 0 #2E4AFD, 4px 4px 0 #2E4AFD, 5px 4px 0 #2E4AFD, -5px 5px 0 #2E4AFD, - -4px 5px 0 #2E4AFD, -3px 5px 0 #2E4AFD, -2px 5px 0 #2E4AFD, -1px 5px 0 #2E4AFD, 0px 5px 0 #2E4AFD, - 1px 5px 0 #2E4AFD, 2px 5px 0 #2E4AFD, 3px 5px 0 #2E4AFD, 4px 5px 0 #2E4AFD, 5px 5px 0 #2E4AFD; + text-shadow: + -5px -5px 0 #2E4AFD, -4px -5px 0 #2E4AFD, -3px -5px 0 #2E4AFD, -2px -5px 0 #2E4AFD, -1px -5px 0 #2E4AFD, + 0px -5px 0 #2E4AFD, 1px -5px 0 #2E4AFD, 2px -5px 0 #2E4AFD, 3px -5px 0 #2E4AFD, 4px -5px 0 #2E4AFD, + 5px -5px 0 #2E4AFD, -5px -4px 0 #2E4AFD, -4px -4px 0 #2E4AFD, -3px -4px 0 #2E4AFD, -2px -4px 0 #2E4AFD, + -1px -4px 0 #2E4AFD, 0px -4px 0 #2E4AFD, 1px -4px 0 #2E4AFD, 2px -4px 0 #2E4AFD, 3px -4px 0 #2E4AFD, + 4px -4px 0 #2E4AFD, 5px -4px 0 #2E4AFD, -5px -3px 0 #2E4AFD, -4px -3px 0 #2E4AFD, -3px -3px 0 #2E4AFD, + -2px -3px 0 #2E4AFD, -1px -3px 0 #2E4AFD, 0px -3px 0 #2E4AFD, 1px -3px 0 #2E4AFD, 2px -3px 0 #2E4AFD, + 3px -3px 0 #2E4AFD, 4px -3px 0 #2E4AFD, 5px -3px 0 #2E4AFD, -5px -2px 0 #2E4AFD, -4px -2px 0 #2E4AFD, + -3px -2px 0 #2E4AFD, -2px -2px 0 #2E4AFD, -1px -2px 0 #2E4AFD, 0px -2px 0 #2E4AFD, 1px -2px 0 #2E4AFD, + 2px -2px 0 #2E4AFD, 3px -2px 0 #2E4AFD, 4px -2px 0 #2E4AFD, 5px -2px 0 #2E4AFD, -5px -1px 0 #2E4AFD, + -4px -1px 0 #2E4AFD, -3px -1px 0 #2E4AFD, -2px -1px 0 #2E4AFD, -1px -1px 0 #2E4AFD, 0px -1px 0 #2E4AFD, + 1px -1px 0 #2E4AFD, 2px -1px 0 #2E4AFD, 3px -1px 0 #2E4AFD, 4px -1px 0 #2E4AFD, 5px -1px 0 #2E4AFD, + -5px 0px 0 #2E4AFD, -4px 0px 0 #2E4AFD, -3px 0px 0 #2E4AFD, -2px 0px 0 #2E4AFD, -1px 0px 0 #2E4AFD, + 1px 0px 0 #2E4AFD, 2px 0px 0 #2E4AFD, 3px 0px 0 #2E4AFD, 4px 0px 0 #2E4AFD, 5px 0px 0 #2E4AFD, + -5px 1px 0 #2E4AFD, -4px 1px 0 #2E4AFD, -3px 1px 0 #2E4AFD, -2px 1px 0 #2E4AFD, -1px 1px 0 #2E4AFD, + 0px 1px 0 #2E4AFD, 1px 1px 0 #2E4AFD, 2px 1px 0 #2E4AFD, 3px 1px 0 #2E4AFD, 4px 1px 0 #2E4AFD, + 5px 1px 0 #2E4AFD, -5px 2px 0 #2E4AFD, -4px 2px 0 #2E4AFD, -3px 2px 0 #2E4AFD, -2px 2px 0 #2E4AFD, + -1px 2px 0 #2E4AFD, 0px 2px 0 #2E4AFD, 1px 2px 0 #2E4AFD, 2px 2px 0 #2E4AFD, 3px 2px 0 #2E4AFD, + 4px 2px 0 #2E4AFD, 5px 2px 0 #2E4AFD, -5px 3px 0 #2E4AFD, -4px 3px 0 #2E4AFD, -3px 3px 0 #2E4AFD, + -2px 3px 0 #2E4AFD, -1px 3px 0 #2E4AFD, 0px 3px 0 #2E4AFD, 1px 3px 0 #2E4AFD, 2px 3px 0 #2E4AFD, + 3px 3px 0 #2E4AFD, 4px 3px 0 #2E4AFD, 5px 3px 0 #2E4AFD, -5px 4px 0 #2E4AFD, -4px 4px 0 #2E4AFD, + -3px 4px 0 #2E4AFD, -2px 4px 0 #2E4AFD, -1px 4px 0 #2E4AFD, 0px 4px 0 #2E4AFD, 1px 4px 0 #2E4AFD, + 2px 4px 0 #2E4AFD, 3px 4px 0 #2E4AFD, 4px 4px 0 #2E4AFD, 5px 4px 0 #2E4AFD, -5px 5px 0 #2E4AFD, + -4px 5px 0 #2E4AFD, -3px 5px 0 #2E4AFD, -2px 5px 0 #2E4AFD, -1px 5px 0 #2E4AFD, 0px 5px 0 #2E4AFD, + 1px 5px 0 #2E4AFD, 2px 5px 0 #2E4AFD, 3px 5px 0 #2E4AFD, 4px 5px 0 #2E4AFD, 5px 5px 0 #2E4AFD; } .stroke-red { - text-shadow: - -5px -5px 0 #ce0d0d, -4px -5px 0 #ce0d0d, -3px -5px 0 #ce0d0d, -2px -5px 0 #ce0d0d, -1px -5px 0 #ce0d0d, - 0px -5px 0 #ce0d0d, 1px -5px 0 #ce0d0d, 2px -5px 0 #ce0d0d, 3px -5px 0 #ce0d0d, 4px -5px 0 #ce0d0d, - 5px -5px 0 #ce0d0d, -5px -4px 0 #ce0d0d, -4px -4px 0 #ce0d0d, -3px -4px 0 #ce0d0d, -2px -4px 0 #ce0d0d, - -1px -4px 0 #ce0d0d, 0px -4px 0 #ce0d0d, 1px -4px 0 #ce0d0d, 2px -4px 0 #ce0d0d, 3px -4px 0 #ce0d0d, - 4px -4px 0 #ce0d0d, 5px -4px 0 #ce0d0d, -5px -3px 0 #ce0d0d, -4px -3px 0 #ce0d0d, -3px -3px 0 #ce0d0d, - -2px -3px 0 #ce0d0d, -1px -3px 0 #ce0d0d, 0px -3px 0 #ce0d0d, 1px -3px 0 #ce0d0d, 2px -3px 0 #ce0d0d, - 3px -3px 0 #ce0d0d, 4px -3px 0 #ce0d0d, 5px -3px 0 #ce0d0d, -5px -2px 0 #ce0d0d, -4px -2px 0 #ce0d0d, - -3px -2px 0 #ce0d0d, -2px -2px 0 #ce0d0d, -1px -2px 0 #ce0d0d, 0px -2px 0 #ce0d0d, 1px -2px 0 #ce0d0d, - 2px -2px 0 #ce0d0d, 3px -2px 0 #ce0d0d, 4px -2px 0 #ce0d0d, 5px -2px 0 #ce0d0d, -5px -1px 0 #ce0d0d, - -4px -1px 0 #ce0d0d, -3px -1px 0 #ce0d0d, -2px -1px 0 #ce0d0d, -1px -1px 0 #ce0d0d, 0px -1px 0 #ce0d0d, - 1px -1px 0 #ce0d0d, 2px -1px 0 #ce0d0d, 3px -1px 0 #ce0d0d, 4px -1px 0 #ce0d0d, 5px -1px 0 #ce0d0d, - -5px 0px 0 #ce0d0d, -4px 0px 0 #ce0d0d, -3px 0px 0 #ce0d0d, -2px 0px 0 #ce0d0d, -1px 0px 0 #ce0d0d, - 1px 0px 0 #ce0d0d, 2px 0px 0 #ce0d0d, 3px 0px 0 #ce0d0d, 4px 0px 0 #ce0d0d, 5px 0px 0 #ce0d0d, - -5px 1px 0 #ce0d0d, -4px 1px 0 #ce0d0d, -3px 1px 0 #ce0d0d, -2px 1px 0 #ce0d0d, -1px 1px 0 #ce0d0d, - 0px 1px 0 #ce0d0d, 1px 1px 0 #ce0d0d, 2px 1px 0 #ce0d0d, 3px 1px 0 #ce0d0d, 4px 1px 0 #ce0d0d, - 5px 1px 0 #ce0d0d, -5px 2px 0 #ce0d0d, -4px 2px 0 #ce0d0d, -3px 2px 0 #ce0d0d, -2px 2px 0 #ce0d0d, - -1px 2px 0 #ce0d0d, 0px 2px 0 #ce0d0d, 1px 2px 0 #ce0d0d, 2px 2px 0 #ce0d0d, 3px 2px 0 #ce0d0d, - 4px 2px 0 #ce0d0d, 5px 2px 0 #ce0d0d, -5px 3px 0 #ce0d0d, -4px 3px 0 #ce0d0d, -3px 3px 0 #ce0d0d, - -2px 3px 0 #ce0d0d, -1px 3px 0 #ce0d0d, 0px 3px 0 #ce0d0d, 1px 3px 0 #ce0d0d, 2px 3px 0 #ce0d0d, - 3px 3px 0 #ce0d0d, 4px 3px 0 #ce0d0d, 5px 3px 0 #ce0d0d, -5px 4px 0 #ce0d0d, -4px 4px 0 #ce0d0d, - -3px 4px 0 #ce0d0d, -2px 4px 0 #ce0d0d, -1px 4px 0 #ce0d0d, 0px 4px 0 #ce0d0d, 1px 4px 0 #ce0d0d, - 2px 4px 0 #ce0d0d, 3px 4px 0 #ce0d0d, 4px 4px 0 #ce0d0d, 5px 4px 0 #ce0d0d, -5px 5px 0 #ce0d0d, - -4px 5px 0 #ce0d0d, -3px 5px 0 #ce0d0d, -2px 5px 0 #ce0d0d, -1px 5px 0 #ce0d0d, 0px 5px 0 #ce0d0d, - 1px 5px 0 #ce0d0d, 2px 5px 0 #ce0d0d, 3px 5px 0 #ce0d0d, 4px 5px 0 #ce0d0d, 5px 5px 0 #ce0d0d; + text-shadow: + -5px -5px 0 #ce0d0d, -4px -5px 0 #ce0d0d, -3px -5px 0 #ce0d0d, -2px -5px 0 #ce0d0d, -1px -5px 0 #ce0d0d, + 0px -5px 0 #ce0d0d, 1px -5px 0 #ce0d0d, 2px -5px 0 #ce0d0d, 3px -5px 0 #ce0d0d, 4px -5px 0 #ce0d0d, + 5px -5px 0 #ce0d0d, -5px -4px 0 #ce0d0d, -4px -4px 0 #ce0d0d, -3px -4px 0 #ce0d0d, -2px -4px 0 #ce0d0d, + -1px -4px 0 #ce0d0d, 0px -4px 0 #ce0d0d, 1px -4px 0 #ce0d0d, 2px -4px 0 #ce0d0d, 3px -4px 0 #ce0d0d, + 4px -4px 0 #ce0d0d, 5px -4px 0 #ce0d0d, -5px -3px 0 #ce0d0d, -4px -3px 0 #ce0d0d, -3px -3px 0 #ce0d0d, + -2px -3px 0 #ce0d0d, -1px -3px 0 #ce0d0d, 0px -3px 0 #ce0d0d, 1px -3px 0 #ce0d0d, 2px -3px 0 #ce0d0d, + 3px -3px 0 #ce0d0d, 4px -3px 0 #ce0d0d, 5px -3px 0 #ce0d0d, -5px -2px 0 #ce0d0d, -4px -2px 0 #ce0d0d, + -3px -2px 0 #ce0d0d, -2px -2px 0 #ce0d0d, -1px -2px 0 #ce0d0d, 0px -2px 0 #ce0d0d, 1px -2px 0 #ce0d0d, + 2px -2px 0 #ce0d0d, 3px -2px 0 #ce0d0d, 4px -2px 0 #ce0d0d, 5px -2px 0 #ce0d0d, -5px -1px 0 #ce0d0d, + -4px -1px 0 #ce0d0d, -3px -1px 0 #ce0d0d, -2px -1px 0 #ce0d0d, -1px -1px 0 #ce0d0d, 0px -1px 0 #ce0d0d, + 1px -1px 0 #ce0d0d, 2px -1px 0 #ce0d0d, 3px -1px 0 #ce0d0d, 4px -1px 0 #ce0d0d, 5px -1px 0 #ce0d0d, + -5px 0px 0 #ce0d0d, -4px 0px 0 #ce0d0d, -3px 0px 0 #ce0d0d, -2px 0px 0 #ce0d0d, -1px 0px 0 #ce0d0d, + 1px 0px 0 #ce0d0d, 2px 0px 0 #ce0d0d, 3px 0px 0 #ce0d0d, 4px 0px 0 #ce0d0d, 5px 0px 0 #ce0d0d, + -5px 1px 0 #ce0d0d, -4px 1px 0 #ce0d0d, -3px 1px 0 #ce0d0d, -2px 1px 0 #ce0d0d, -1px 1px 0 #ce0d0d, + 0px 1px 0 #ce0d0d, 1px 1px 0 #ce0d0d, 2px 1px 0 #ce0d0d, 3px 1px 0 #ce0d0d, 4px 1px 0 #ce0d0d, + 5px 1px 0 #ce0d0d, -5px 2px 0 #ce0d0d, -4px 2px 0 #ce0d0d, -3px 2px 0 #ce0d0d, -2px 2px 0 #ce0d0d, + -1px 2px 0 #ce0d0d, 0px 2px 0 #ce0d0d, 1px 2px 0 #ce0d0d, 2px 2px 0 #ce0d0d, 3px 2px 0 #ce0d0d, + 4px 2px 0 #ce0d0d, 5px 2px 0 #ce0d0d, -5px 3px 0 #ce0d0d, -4px 3px 0 #ce0d0d, -3px 3px 0 #ce0d0d, + -2px 3px 0 #ce0d0d, -1px 3px 0 #ce0d0d, 0px 3px 0 #ce0d0d, 1px 3px 0 #ce0d0d, 2px 3px 0 #ce0d0d, + 3px 3px 0 #ce0d0d, 4px 3px 0 #ce0d0d, 5px 3px 0 #ce0d0d, -5px 4px 0 #ce0d0d, -4px 4px 0 #ce0d0d, + -3px 4px 0 #ce0d0d, -2px 4px 0 #ce0d0d, -1px 4px 0 #ce0d0d, 0px 4px 0 #ce0d0d, 1px 4px 0 #ce0d0d, + 2px 4px 0 #ce0d0d, 3px 4px 0 #ce0d0d, 4px 4px 0 #ce0d0d, 5px 4px 0 #ce0d0d, -5px 5px 0 #ce0d0d, + -4px 5px 0 #ce0d0d, -3px 5px 0 #ce0d0d, -2px 5px 0 #ce0d0d, -1px 5px 0 #ce0d0d, 0px 5px 0 #ce0d0d, + 1px 5px 0 #ce0d0d, 2px 5px 0 #ce0d0d, 3px 5px 0 #ce0d0d, 4px 5px 0 #ce0d0d, 5px 5px 0 #ce0d0d; } .stroke-gold { - text-shadow: - -5px -5px 0 #92670A, -4px -5px 0 #92670A, -3px -5px 0 #92670A, -2px -5px 0 #92670A, -1px -5px 0 #92670A, - 0px -5px 0 #92670A, 1px -5px 0 #92670A, 2px -5px 0 #92670A, 3px -5px 0 #92670A, 4px -5px 0 #92670A, - 5px -5px 0 #92670A, -5px -4px 0 #92670A, -4px -4px 0 #92670A, -3px -4px 0 #92670A, -2px -4px 0 #92670A, - -1px -4px 0 #92670A, 0px -4px 0 #92670A, 1px -4px 0 #92670A, 2px -4px 0 #92670A, 3px -4px 0 #92670A, - 4px -4px 0 #92670A, 5px -4px 0 #92670A, -5px -3px 0 #92670A, -4px -3px 0 #92670A, -3px -3px 0 #92670A, - -2px -3px 0 #92670A, -1px -3px 0 #92670A, 0px -3px 0 #92670A, 1px -3px 0 #92670A, 2px -3px 0 #92670A, - 3px -3px 0 #92670A, 4px -3px 0 #92670A, 5px -3px 0 #92670A, -5px -2px 0 #92670A, -4px -2px 0 #92670A, - -3px -2px 0 #92670A, -2px -2px 0 #92670A, -1px -2px 0 #92670A, 0px -2px 0 #92670A, 1px -2px 0 #92670A, - 2px -2px 0 #92670A, 3px -2px 0 #92670A, 4px -2px 0 #92670A, 5px -2px 0 #92670A, -5px -1px 0 #92670A, - -4px -1px 0 #92670A, -3px -1px 0 #92670A, -2px -1px 0 #92670A, -1px -1px 0 #92670A, 0px -1px 0 #92670A, - 1px -1px 0 #92670A, 2px -1px 0 #92670A, 3px -1px 0 #92670A, 4px -1px 0 #92670A, 5px -1px 0 #92670A, - -5px 0px 0 #92670A, -4px 0px 0 #92670A, -3px 0px 0 #92670A, -2px 0px 0 #92670A, -1px 0px 0 #92670A, - 1px 0px 0 #92670A, 2px 0px 0 #92670A, 3px 0px 0 #92670A, 4px 0px 0 #92670A, 5px 0px 0 #92670A, - -5px 1px 0 #92670A, -4px 1px 0 #92670A, -3px 1px 0 #92670A, -2px 1px 0 #92670A, -1px 1px 0 #92670A, - 0px 1px 0 #92670A, 1px 1px 0 #92670A, 2px 1px 0 #92670A, 3px 1px 0 #92670A, 4px 1px 0 #92670A, - 5px 1px 0 #92670A, -5px 2px 0 #92670A, -4px 2px 0 #92670A, -3px 2px 0 #92670A, -2px 2px 0 #92670A, - -1px 2px 0 #92670A, 0px 2px 0 #92670A, 1px 2px 0 #92670A, 2px 2px 0 #92670A, 3px 2px 0 #92670A, - 4px 2px 0 #92670A, 5px 2px 0 #92670A, -5px 3px 0 #92670A, -4px 3px 0 #92670A, -3px 3px 0 #92670A, - -2px 3px 0 #92670A, -1px 3px 0 #92670A, 0px 3px 0 #92670A, 1px 3px 0 #92670A, 2px 3px 0 #92670A, - 3px 3px 0 #92670A, 4px 3px 0 #92670A, 5px 3px 0 #92670A, -5px 4px 0 #92670A, -4px 4px 0 #92670A, - -3px 4px 0 #92670A, -2px 4px 0 #92670A, -1px 4px 0 #92670A, 0px 4px 0 #92670A, 1px 4px 0 #92670A, - 2px 4px 0 #92670A, 3px 4px 0 #92670A, 4px 4px 0 #92670A, 5px 4px 0 #92670A, -5px 5px 0 #92670A, - -4px 5px 0 #92670A, -3px 5px 0 #92670A, -2px 5px 0 #92670A, -1px 5px 0 #92670A, 0px 5px 0 #92670A, - 1px 5px 0 #92670A, 2px 5px 0 #92670A, 3px 5px 0 #92670A, 4px 5px 0 #92670A, 5px 5px 0 #92670A; + text-shadow: + -5px -5px 0 #92670A, -4px -5px 0 #92670A, -3px -5px 0 #92670A, -2px -5px 0 #92670A, -1px -5px 0 #92670A, + 0px -5px 0 #92670A, 1px -5px 0 #92670A, 2px -5px 0 #92670A, 3px -5px 0 #92670A, 4px -5px 0 #92670A, + 5px -5px 0 #92670A, -5px -4px 0 #92670A, -4px -4px 0 #92670A, -3px -4px 0 #92670A, -2px -4px 0 #92670A, + -1px -4px 0 #92670A, 0px -4px 0 #92670A, 1px -4px 0 #92670A, 2px -4px 0 #92670A, 3px -4px 0 #92670A, + 4px -4px 0 #92670A, 5px -4px 0 #92670A, -5px -3px 0 #92670A, -4px -3px 0 #92670A, -3px -3px 0 #92670A, + -2px -3px 0 #92670A, -1px -3px 0 #92670A, 0px -3px 0 #92670A, 1px -3px 0 #92670A, 2px -3px 0 #92670A, + 3px -3px 0 #92670A, 4px -3px 0 #92670A, 5px -3px 0 #92670A, -5px -2px 0 #92670A, -4px -2px 0 #92670A, + -3px -2px 0 #92670A, -2px -2px 0 #92670A, -1px -2px 0 #92670A, 0px -2px 0 #92670A, 1px -2px 0 #92670A, + 2px -2px 0 #92670A, 3px -2px 0 #92670A, 4px -2px 0 #92670A, 5px -2px 0 #92670A, -5px -1px 0 #92670A, + -4px -1px 0 #92670A, -3px -1px 0 #92670A, -2px -1px 0 #92670A, -1px -1px 0 #92670A, 0px -1px 0 #92670A, + 1px -1px 0 #92670A, 2px -1px 0 #92670A, 3px -1px 0 #92670A, 4px -1px 0 #92670A, 5px -1px 0 #92670A, + -5px 0px 0 #92670A, -4px 0px 0 #92670A, -3px 0px 0 #92670A, -2px 0px 0 #92670A, -1px 0px 0 #92670A, + 1px 0px 0 #92670A, 2px 0px 0 #92670A, 3px 0px 0 #92670A, 4px 0px 0 #92670A, 5px 0px 0 #92670A, + -5px 1px 0 #92670A, -4px 1px 0 #92670A, -3px 1px 0 #92670A, -2px 1px 0 #92670A, -1px 1px 0 #92670A, + 0px 1px 0 #92670A, 1px 1px 0 #92670A, 2px 1px 0 #92670A, 3px 1px 0 #92670A, 4px 1px 0 #92670A, + 5px 1px 0 #92670A, -5px 2px 0 #92670A, -4px 2px 0 #92670A, -3px 2px 0 #92670A, -2px 2px 0 #92670A, + -1px 2px 0 #92670A, 0px 2px 0 #92670A, 1px 2px 0 #92670A, 2px 2px 0 #92670A, 3px 2px 0 #92670A, + 4px 2px 0 #92670A, 5px 2px 0 #92670A, -5px 3px 0 #92670A, -4px 3px 0 #92670A, -3px 3px 0 #92670A, + -2px 3px 0 #92670A, -1px 3px 0 #92670A, 0px 3px 0 #92670A, 1px 3px 0 #92670A, 2px 3px 0 #92670A, + 3px 3px 0 #92670A, 4px 3px 0 #92670A, 5px 3px 0 #92670A, -5px 4px 0 #92670A, -4px 4px 0 #92670A, + -3px 4px 0 #92670A, -2px 4px 0 #92670A, -1px 4px 0 #92670A, 0px 4px 0 #92670A, 1px 4px 0 #92670A, + 2px 4px 0 #92670A, 3px 4px 0 #92670A, 4px 4px 0 #92670A, 5px 4px 0 #92670A, -5px 5px 0 #92670A, + -4px 5px 0 #92670A, -3px 5px 0 #92670A, -2px 5px 0 #92670A, -1px 5px 0 #92670A, 0px 5px 0 #92670A, + 1px 5px 0 #92670A, 2px 5px 0 #92670A, 3px 5px 0 #92670A, 4px 5px 0 #92670A, 5px 5px 0 #92670A; } .stroke-light-blue { - text-shadow: - -5px -5px 0 #3b9cbf, -4px -5px 0 #3b9cbf, -3px -5px 0 #3b9cbf, -2px -5px 0 #3b9cbf, -1px -5px 0 #3b9cbf, - 0px -5px 0 #3b9cbf, 1px -5px 0 #3b9cbf, 2px -5px 0 #3b9cbf, 3px -5px 0 #3b9cbf, 4px -5px 0 #3b9cbf, - 5px -5px 0 #3b9cbf, -5px -4px 0 #3b9cbf, -4px -4px 0 #3b9cbf, -3px -4px 0 #3b9cbf, -2px -4px 0 #3b9cbf, - -1px -4px 0 #3b9cbf, 0px -4px 0 #3b9cbf, 1px -4px 0 #3b9cbf, 2px -4px 0 #3b9cbf, 3px -4px 0 #3b9cbf, - 4px -4px 0 #3b9cbf, 5px -4px 0 #3b9cbf, -5px -3px 0 #3b9cbf, -4px -3px 0 #3b9cbf, -3px -3px 0 #3b9cbf, - -2px -3px 0 #3b9cbf, -1px -3px 0 #3b9cbf, 0px -3px 0 #3b9cbf, 1px -3px 0 #3b9cbf, 2px -3px 0 #3b9cbf, - 3px -3px 0 #3b9cbf, 4px -3px 0 #3b9cbf, 5px -3px 0 #3b9cbf, -5px -2px 0 #3b9cbf, -4px -2px 0 #3b9cbf, - -3px -2px 0 #3b9cbf, -2px -2px 0 #3b9cbf, -1px -2px 0 #3b9cbf, 0px -2px 0 #3b9cbf, 1px -2px 0 #3b9cbf, - 2px -2px 0 #3b9cbf, 3px -2px 0 #3b9cbf, 4px -2px 0 #3b9cbf, 5px -2px 0 #3b9cbf, -5px -1px 0 #3b9cbf, - -4px -1px 0 #3b9cbf, -3px -1px 0 #3b9cbf, -2px -1px 0 #3b9cbf, -1px -1px 0 #3b9cbf, 0px -1px 0 #3b9cbf, - 1px -1px 0 #3b9cbf, 2px -1px 0 #3b9cbf, 3px -1px 0 #3b9cbf, 4px -1px 0 #3b9cbf, 5px -1px 0 #3b9cbf, - -5px 0px 0 #3b9cbf, -4px 0px 0 #3b9cbf, -3px 0px 0 #3b9cbf, -2px 0px 0 #3b9cbf, -1px 0px 0 #3b9cbf, - 1px 0px 0 #3b9cbf, 2px 0px 0 #3b9cbf, 3px 0px 0 #3b9cbf, 4px 0px 0 #3b9cbf, 5px 0px 0 #3b9cbf, - -5px 1px 0 #3b9cbf, -4px 1px 0 #3b9cbf, -3px 1px 0 #3b9cbf, -2px 1px 0 #3b9cbf, -1px 1px 0 #3b9cbf, - 0px 1px 0 #3b9cbf, 1px 1px 0 #3b9cbf, 2px 1px 0 #3b9cbf, 3px 1px 0 #3b9cbf, 4px 1px 0 #3b9cbf, - 5px 1px 0 #3b9cbf, -5px 2px 0 #3b9cbf, -4px 2px 0 #3b9cbf, -3px 2px 0 #3b9cbf, -2px 2px 0 #3b9cbf, - -1px 2px 0 #3b9cbf, 0px 2px 0 #3b9cbf, 1px 2px 0 #3b9cbf, 2px 2px 0 #3b9cbf, 3px 2px 0 #3b9cbf, - 4px 2px 0 #3b9cbf, 5px 2px 0 #3b9cbf, -5px 3px 0 #3b9cbf, -4px 3px 0 #3b9cbf, -3px 3px 0 #3b9cbf, - -2px 3px 0 #3b9cbf, -1px 3px 0 #3b9cbf, 0px 3px 0 #3b9cbf, 1px 3px 0 #3b9cbf, 2px 3px 0 #3b9cbf, - 3px 3px 0 #3b9cbf, 4px 3px 0 #3b9cbf, 5px 3px 0 #3b9cbf, -5px 4px 0 #3b9cbf, -4px 4px 0 #3b9cbf, - -3px 4px 0 #3b9cbf, -2px 4px 0 #3b9cbf, -1px 4px 0 #3b9cbf, 0px 4px 0 #3b9cbf, 1px 4px 0 #3b9cbf, - 2px 4px 0 #3b9cbf, 3px 4px 0 #3b9cbf, 4px 4px 0 #3b9cbf, 5px 4px 0 #3b9cbf, -5px 5px 0 #3b9cbf, - -4px 5px 0 #3b9cbf, -3px 5px 0 #3b9cbf, -2px 5px 0 #3b9cbf, -1px 5px 0 #3b9cbf, 0px 5px 0 #3b9cbf, - 1px 5px 0 #3b9cbf, 2px 5px 0 #3b9cbf, 3px 5px 0 #3b9cbf, 4px 5px 0 #3b9cbf, 5px 5px 0 #3b9cbf; + text-shadow: + -5px -5px 0 #3b9cbf, -4px -5px 0 #3b9cbf, -3px -5px 0 #3b9cbf, -2px -5px 0 #3b9cbf, -1px -5px 0 #3b9cbf, + 0px -5px 0 #3b9cbf, 1px -5px 0 #3b9cbf, 2px -5px 0 #3b9cbf, 3px -5px 0 #3b9cbf, 4px -5px 0 #3b9cbf, + 5px -5px 0 #3b9cbf, -5px -4px 0 #3b9cbf, -4px -4px 0 #3b9cbf, -3px -4px 0 #3b9cbf, -2px -4px 0 #3b9cbf, + -1px -4px 0 #3b9cbf, 0px -4px 0 #3b9cbf, 1px -4px 0 #3b9cbf, 2px -4px 0 #3b9cbf, 3px -4px 0 #3b9cbf, + 4px -4px 0 #3b9cbf, 5px -4px 0 #3b9cbf, -5px -3px 0 #3b9cbf, -4px -3px 0 #3b9cbf, -3px -3px 0 #3b9cbf, + -2px -3px 0 #3b9cbf, -1px -3px 0 #3b9cbf, 0px -3px 0 #3b9cbf, 1px -3px 0 #3b9cbf, 2px -3px 0 #3b9cbf, + 3px -3px 0 #3b9cbf, 4px -3px 0 #3b9cbf, 5px -3px 0 #3b9cbf, -5px -2px 0 #3b9cbf, -4px -2px 0 #3b9cbf, + -3px -2px 0 #3b9cbf, -2px -2px 0 #3b9cbf, -1px -2px 0 #3b9cbf, 0px -2px 0 #3b9cbf, 1px -2px 0 #3b9cbf, + 2px -2px 0 #3b9cbf, 3px -2px 0 #3b9cbf, 4px -2px 0 #3b9cbf, 5px -2px 0 #3b9cbf, -5px -1px 0 #3b9cbf, + -4px -1px 0 #3b9cbf, -3px -1px 0 #3b9cbf, -2px -1px 0 #3b9cbf, -1px -1px 0 #3b9cbf, 0px -1px 0 #3b9cbf, + 1px -1px 0 #3b9cbf, 2px -1px 0 #3b9cbf, 3px -1px 0 #3b9cbf, 4px -1px 0 #3b9cbf, 5px -1px 0 #3b9cbf, + -5px 0px 0 #3b9cbf, -4px 0px 0 #3b9cbf, -3px 0px 0 #3b9cbf, -2px 0px 0 #3b9cbf, -1px 0px 0 #3b9cbf, + 1px 0px 0 #3b9cbf, 2px 0px 0 #3b9cbf, 3px 0px 0 #3b9cbf, 4px 0px 0 #3b9cbf, 5px 0px 0 #3b9cbf, + -5px 1px 0 #3b9cbf, -4px 1px 0 #3b9cbf, -3px 1px 0 #3b9cbf, -2px 1px 0 #3b9cbf, -1px 1px 0 #3b9cbf, + 0px 1px 0 #3b9cbf, 1px 1px 0 #3b9cbf, 2px 1px 0 #3b9cbf, 3px 1px 0 #3b9cbf, 4px 1px 0 #3b9cbf, + 5px 1px 0 #3b9cbf, -5px 2px 0 #3b9cbf, -4px 2px 0 #3b9cbf, -3px 2px 0 #3b9cbf, -2px 2px 0 #3b9cbf, + -1px 2px 0 #3b9cbf, 0px 2px 0 #3b9cbf, 1px 2px 0 #3b9cbf, 2px 2px 0 #3b9cbf, 3px 2px 0 #3b9cbf, + 4px 2px 0 #3b9cbf, 5px 2px 0 #3b9cbf, -5px 3px 0 #3b9cbf, -4px 3px 0 #3b9cbf, -3px 3px 0 #3b9cbf, + -2px 3px 0 #3b9cbf, -1px 3px 0 #3b9cbf, 0px 3px 0 #3b9cbf, 1px 3px 0 #3b9cbf, 2px 3px 0 #3b9cbf, + 3px 3px 0 #3b9cbf, 4px 3px 0 #3b9cbf, 5px 3px 0 #3b9cbf, -5px 4px 0 #3b9cbf, -4px 4px 0 #3b9cbf, + -3px 4px 0 #3b9cbf, -2px 4px 0 #3b9cbf, -1px 4px 0 #3b9cbf, 0px 4px 0 #3b9cbf, 1px 4px 0 #3b9cbf, + 2px 4px 0 #3b9cbf, 3px 4px 0 #3b9cbf, 4px 4px 0 #3b9cbf, 5px 4px 0 #3b9cbf, -5px 5px 0 #3b9cbf, + -4px 5px 0 #3b9cbf, -3px 5px 0 #3b9cbf, -2px 5px 0 #3b9cbf, -1px 5px 0 #3b9cbf, 0px 5px 0 #3b9cbf, + 1px 5px 0 #3b9cbf, 2px 5px 0 #3b9cbf, 3px 5px 0 #3b9cbf, 4px 5px 0 #3b9cbf, 5px 5px 0 #3b9cbf; } + .stroke-dark-brown { - text-shadow: - -5px -5px 0 #4B3301, -4px -5px 0 #4B3301, -3px -5px 0 #4B3301, -2px -5px 0 #4B3301, -1px -5px 0 #4B3301, - 0px -5px 0 #4B3301, 1px -5px 0 #4B3301, 2px -5px 0 #4B3301, 3px -5px 0 #4B3301, 4px -5px 0 #4B3301, - 5px -5px 0 #4B3301, -5px -4px 0 #4B3301, -4px -4px 0 #4B3301, -3px -4px 0 #4B3301, -2px -4px 0 #4B3301, - -1px -4px 0 #4B3301, 0px -4px 0 #4B3301, 1px -4px 0 #4B3301, 2px -4px 0 #4B3301, 3px -4px 0 #4B3301, - 4px -4px 0 #4B3301, 5px -4px 0 #4B3301, -5px -3px 0 #4B3301, -4px -3px 0 #4B3301, -3px -3px 0 #4B3301, - -2px -3px 0 #4B3301, -1px -3px 0 #4B3301, 0px -3px 0 #4B3301, 1px -3px 0 #4B3301, 2px -3px 0 #4B3301, - 3px -3px 0 #4B3301, 4px -3px 0 #4B3301, 5px -3px 0 #4B3301, -5px -2px 0 #4B3301, -4px -2px 0 #4B3301, - -3px -2px 0 #4B3301, -2px -2px 0 #4B3301, -1px -2px 0 #4B3301, 0px -2px 0 #4B3301, 1px -2px 0 #4B3301, - 2px -2px 0 #4B3301, 3px -2px 0 #4B3301, 4px -2px 0 #4B3301, 5px -2px 0 #4B3301, -5px -1px 0 #4B3301, - -4px -1px 0 #4B3301, -3px -1px 0 #4B3301, -2px -1px 0 #4B3301, -1px -1px 0 #4B3301, 0px -1px 0 #4B3301, - 1px -1px 0 #4B3301, 2px -1px 0 #4B3301, 3px -1px 0 #4B3301, 4px -1px 0 #4B3301, 5px -1px 0 #4B3301, - -5px 0px 0 #4B3301, -4px 0px 0 #4B3301, -3px 0px 0 #4B3301, -2px 0px 0 #4B3301, -1px 0px 0 #4B3301, - 1px 0px 0 #4B3301, 2px 0px 0 #4B3301, 3px 0px 0 #4B3301, 4px 0px 0 #4B3301, 5px 0px 0 #4B3301, - -5px 1px 0 #4B3301, -4px 1px 0 #4B3301, -3px 1px 0 #4B3301, -2px 1px 0 #4B3301, -1px 1px 0 #4B3301, - 0px 1px 0 #4B3301, 1px 1px 0 #4B3301, 2px 1px 0 #4B3301, 3px 1px 0 #4B3301, 4px 1px 0 #4B3301, - 5px 1px 0 #4B3301, -5px 2px 0 #4B3301, -4px 2px 0 #4B3301, -3px 2px 0 #4B3301, -2px 2px 0 #4B3301, - -1px 2px 0 #4B3301, 0px 2px 0 #4B3301, 1px 2px 0 #4B3301, 2px 2px 0 #4B3301, 3px 2px 0 #4B3301, - 4px 2px 0 #4B3301, 5px 2px 0 #4B3301, -5px 3px 0 #4B3301, -4px 3px 0 #4B3301, -3px 3px 0 #4B3301, - -2px 3px 0 #4B3301, -1px 3px 0 #4B3301, 0px 3px 0 #4B3301, 1px 3px 0 #4B3301, 2px 3px 0 #4B3301, - 3px 3px 0 #4B3301, 4px 3px 0 #4B3301, 5px 3px 0 #4B3301, -5px 4px 0 #4B3301, -4px 4px 0 #4B3301, - -3px 4px 0 #4B3301, -2px 4px 0 #4B3301, -1px 4px 0 #4B3301, 0px 4px 0 #4B3301, 1px 4px 0 #4B3301, - 2px 4px 0 #4B3301, 3px 4px 0 #4B3301, 4px 4px 0 #4B3301, 5px 4px 0 #4B3301, -5px 5px 0 #4B3301, - -4px 5px 0 #4B3301, -3px 5px 0 #4B3301, -2px 5px 0 #4B3301, -1px 5px 0 #4B3301, 0px 5px 0 #4B3301, - 1px 5px 0 #4B3301, 2px 5px 0 #4B3301, 3px 5px 0 #4B3301, 4px 5px 0 #4B3301, 5px 5px 0 #4B3301; + text-shadow: + -5px -5px 0 #4B3301, -4px -5px 0 #4B3301, -3px -5px 0 #4B3301, -2px -5px 0 #4B3301, -1px -5px 0 #4B3301, + 0px -5px 0 #4B3301, 1px -5px 0 #4B3301, 2px -5px 0 #4B3301, 3px -5px 0 #4B3301, 4px -5px 0 #4B3301, + 5px -5px 0 #4B3301, -5px -4px 0 #4B3301, -4px -4px 0 #4B3301, -3px -4px 0 #4B3301, -2px -4px 0 #4B3301, + -1px -4px 0 #4B3301, 0px -4px 0 #4B3301, 1px -4px 0 #4B3301, 2px -4px 0 #4B3301, 3px -4px 0 #4B3301, + 4px -4px 0 #4B3301, 5px -4px 0 #4B3301, -5px -3px 0 #4B3301, -4px -3px 0 #4B3301, -3px -3px 0 #4B3301, + -2px -3px 0 #4B3301, -1px -3px 0 #4B3301, 0px -3px 0 #4B3301, 1px -3px 0 #4B3301, 2px -3px 0 #4B3301, + 3px -3px 0 #4B3301, 4px -3px 0 #4B3301, 5px -3px 0 #4B3301, -5px -2px 0 #4B3301, -4px -2px 0 #4B3301, + -3px -2px 0 #4B3301, -2px -2px 0 #4B3301, -1px -2px 0 #4B3301, 0px -2px 0 #4B3301, 1px -2px 0 #4B3301, + 2px -2px 0 #4B3301, 3px -2px 0 #4B3301, 4px -2px 0 #4B3301, 5px -2px 0 #4B3301, -5px -1px 0 #4B3301, + -4px -1px 0 #4B3301, -3px -1px 0 #4B3301, -2px -1px 0 #4B3301, -1px -1px 0 #4B3301, 0px -1px 0 #4B3301, + 1px -1px 0 #4B3301, 2px -1px 0 #4B3301, 3px -1px 0 #4B3301, 4px -1px 0 #4B3301, 5px -1px 0 #4B3301, + -5px 0px 0 #4B3301, -4px 0px 0 #4B3301, -3px 0px 0 #4B3301, -2px 0px 0 #4B3301, -1px 0px 0 #4B3301, + 1px 0px 0 #4B3301, 2px 0px 0 #4B3301, 3px 0px 0 #4B3301, 4px 0px 0 #4B3301, 5px 0px 0 #4B3301, + -5px 1px 0 #4B3301, -4px 1px 0 #4B3301, -3px 1px 0 #4B3301, -2px 1px 0 #4B3301, -1px 1px 0 #4B3301, + 0px 1px 0 #4B3301, 1px 1px 0 #4B3301, 2px 1px 0 #4B3301, 3px 1px 0 #4B3301, 4px 1px 0 #4B3301, + 5px 1px 0 #4B3301, -5px 2px 0 #4B3301, -4px 2px 0 #4B3301, -3px 2px 0 #4B3301, -2px 2px 0 #4B3301, + -1px 2px 0 #4B3301, 0px 2px 0 #4B3301, 1px 2px 0 #4B3301, 2px 2px 0 #4B3301, 3px 2px 0 #4B3301, + 4px 2px 0 #4B3301, 5px 2px 0 #4B3301, -5px 3px 0 #4B3301, -4px 3px 0 #4B3301, -3px 3px 0 #4B3301, + -2px 3px 0 #4B3301, -1px 3px 0 #4B3301, 0px 3px 0 #4B3301, 1px 3px 0 #4B3301, 2px 3px 0 #4B3301, + 3px 3px 0 #4B3301, 4px 3px 0 #4B3301, 5px 3px 0 #4B3301, -5px 4px 0 #4B3301, -4px 4px 0 #4B3301, + -3px 4px 0 #4B3301, -2px 4px 0 #4B3301, -1px 4px 0 #4B3301, 0px 4px 0 #4B3301, 1px 4px 0 #4B3301, + 2px 4px 0 #4B3301, 3px 4px 0 #4B3301, 4px 4px 0 #4B3301, 5px 4px 0 #4B3301, -5px 5px 0 #4B3301, + -4px 5px 0 #4B3301, -3px 5px 0 #4B3301, -2px 5px 0 #4B3301, -1px 5px 0 #4B3301, 0px 5px 0 #4B3301, + 1px 5px 0 #4B3301, 2px 5px 0 #4B3301, 3px 5px 0 #4B3301, 4px 5px 0 #4B3301, 5px 5px 0 #4B3301; } /* text colors */ @@ -324,7 +340,6 @@ } /* text transforms */ - .text-uppercase { text-transform: uppercase; } @@ -338,22 +353,32 @@ .text-xs { font-size: 16px; } + .text-sm { font-size: 20px; } + .text-md { font-size: 36px; } + .text-lg { font-size: 48px; } + .text-xl { font-size: 64px; } + .text-xxl { font-size: 96px; } +/* text-align */ +.text-center { + text-align: center; +} + /* text blocks alignment */ .align-between { @@ -372,6 +397,7 @@ background-position: center; background-repeat: no-repeat; position: relative; + display: block; } /* music switch */ @@ -392,17 +418,20 @@ left: 94px; top: 197px; } + #start-menu-high-score { position: absolute; left: 94px; top: 272px; } -#start-menu-latest-title { + +#start-menu-last-title { position: absolute; left: 94px; top: 379px; } -#start-menu-latest-score { + +#start-menu-last-score { position: absolute; left: 94px; top: 465px; @@ -441,6 +470,7 @@ position: relative; width: 1920px; height: 1080px; + display: none; } #collision-area { @@ -465,6 +495,7 @@ background-size: cover; background-position: center; background-repeat: no-repeat; + z-index: 6; } /* game top board left */ @@ -477,6 +508,7 @@ width: 267px; height: 20px; } + #last-score-div { position: absolute; left: 47px; @@ -484,6 +516,7 @@ width: 267px; height: 20px; } + #high-score-div { position: absolute; left: 47px; @@ -494,5 +527,235 @@ /* power bars */ +.power-bars { + width: 251px; + height: 30px; + background-color: #D9D9D9; + z-index: 2; + padding-top: 5px; + padding-bottom: 5px; + padding-right: 5px; +} + +.inner-bars { + width: 100%; + height: 100%; +} + +#base-icon { + position: absolute; + left: 38px; + top: 142px; + z-index: 3; +} + +#base-bar { + position: absolute; + left: 65px; + top: 150px; +} + +#base-inner-bar { + background-color: #512200 +} + + +#energy-icon { + position: absolute; + left: 38px; + top: 269px; + z-index: 3; +} + +#energy-bar { + position: absolute; + left: 65px; + top: 274px; +} + +#energy-inner-bar { + background-color: #bf39fd +} + + +#life-icon { + position: absolute; + left: 38px; + top: 201px; + z-index: 3; +} + +#life-bar { + position: absolute; + left: 65px; + top: 210px; +} + +#life-inner-bar { + background-color: #7DBF3B +} + + +/* game top board right */ + +#music-toggle-div { + position: absolute; + left: 1695px; + top: 30px; +} + +#sfx-toggle-div { + position: absolute; + left: 1695px; + top: 72px; +} -/* GAME END SCREEN */ \ No newline at end of file +#pause-btn { + position: absolute; + left: 1762px; + top: 112px; + width: 130px; + text-align: end; +} + +#quit-btn { + position: absolute; + left: 1812px; + top: 154px; +} + +.top-right-item { + width: 192px; + height: 23px; +} + +/* start countdown */ + +#start-countdown { + position: absolute; + width: 1920px; + height: 230px; + left: 0; + top: 367px; + font-size: 256px; + color: white; + text-align: center; +} + +#pause-div { + position: absolute; + width: 1920px; + height: 230px; + left: 0; + top: 367px; + font-size: 256px; + color: white; + text-align: center; +} + +/* quit confirmation */ + +#quit-confirm { + position: absolute; + width: 900px; + height: 240px; + left: 517px; + top: 297px; + display: none; + flex-direction: column; + align-items: center; + justify-content: space-between; + border: solid 4px white; + padding-top: 80px; + padding-bottom: 80px; + background-color: rgba(100, 100, 100, 17%); + backdrop-filter: blur(16.2px); +} + +.quit-btns-div { + display: flex; + align-items: center; + justify-content: space-between; + width: 748px; + height: 77px; +} + +.quit-btns { + width: 330px; + height: 76px; +} + +#quit-no { + background-color: #A94848; +} + +#quit-yes { + background-color: #A9A148; +} + + + + + +/*** RESULT SCREEN ***/ + +#result-screen { + position: relative; + width: 1920px; + height: 1080px; + background-image: url(/assets/img/result-screen-bg.png); + display: none; +} + +#result-bg-div { + position: absolute; + left: 116px; + top: 81px; + width: 1687px; + height: 918px; + background-color: rgba(100, 100, 100, 50%); + backdrop-filter: blur(12.6px); + z-index: 1; +} + +#result-screen > p { + width: 100%; + display: block; + z-index: 2; +} + +#game-end-message-one { + position: absolute; + left: 0; + top: 162px; +} +#game-end-message-two { + position: absolute; + left: 0; + top: 258px; +} +#game-end-result-title { + position: absolute; + left: 0; + top: 356px; +} +#game-end-result-score { + position: absolute; + left: 0; + top: 457px; +} +#game-end-high-title { + position: absolute; + left: 0; + top: 629px; +} +#game-end-high-score { + position: absolute; + left: 0; + top: 711px; +} +#game-end-main-menu { + position: absolute; + left: 0; + top: 882px; +}