Skip to content

Commit

Permalink
Update styles.css
Browse files Browse the repository at this point in the history 
gave it a more space looking vibe
  • Loading branch information
@alaughingpillow
alaughingpillow authored Dec 12, 2024
1 parent c782468 commit 389c05e
Showing 1 changed file with 157 additions and 105 deletions.
262 changes: 157 additions & 105 deletions styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,32 @@
body {
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #ecf0f1;
font-family: 'Poppins', sans-serif;
color: #2c3e50;
overflow: hidden;
min-height: 100vh;
background: linear-gradient(135deg, #000000 0%, #1a237e 100%);
color: #ffffff;
}

#game-container {
position: relative;
width: 100%;
max-width: 800px;
height: 600px;
background: linear-gradient(to bottom, #a29bfe, #6c5ce7);
height: 100vh;
max-height: 600px;
background: linear-gradient(to bottom, #000000, #0d47a1);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
padding: 20px;
}

#game-area {
position: relative;
width: 100%;
height: 100%;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

#main-menu {
#main-menu, #game-area {
position: absolute;
top: 0;
left: 0;
Expand All @@ -39,70 +36,94 @@ body {
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(236, 240, 241, 0.95);
}

#main-menu {
background-color: rgba(0, 0, 0, 0.8);
z-index: 10;
border-radius: 20px;
}

h1 {
font-size: 48px;
color: #fff;
font-size: 36px;
color: #4fc3f7;
margin-bottom: 20px;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
font-family: 'Poppins', sans-serif;
text-align: center;
text-shadow: 0 0 10px #4fc3f7;
}

.narrative {
font-size: 16px;
text-align: center;
margin-bottom: 20px;
max-width: 80%;
line-height: 1.5;
}

button {
font-size: 24px;
padding: 12px 24px;
background-color: #f39c12;
font-size: 18px;
padding: 10px 20px;
background: linear-gradient(45deg, #4fc3f7, #03a9f4);
color: white;
border: none;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s, transform 0.1s, box-shadow 0.3s;
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin: 10px;
}

button:hover {
background-color: #e67e22;
transform: translateY(-3px);
box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);
transform: translateY(-2px);
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
}

button:active {
transform: translateY(1px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transform: translateY(0);
}

button:disabled {
background-color: #bdc3c7;
background: linear-gradient(45deg, #b8b8b8, #d1d1d1);
cursor: not-allowed;
}

#restart-button {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
font-size: 22px;
padding: 10px 20px;
background-color: #27ae60;
border-radius: 50px;
#difficulty-selector {
margin: 20px 0;
font-size: 16px;
color: white;
}

#difficulty {
font-size: 16px;
padding: 8px 12px;
border-radius: 25px;
border: 2px solid rgba(255, 255, 255, 0.5);
background-color: rgba(0, 0, 0, 0.3);
color: white;
outline: none;
cursor: pointer;
transition: all 0.3s ease;
}

#difficulty:hover, #difficulty:focus {
background-color: rgba(255, 255, 255, 0.2);
border-color: white;
}

#difficulty option {
background-color: #000000;
color: white;
}

#player1, #player2 {
.player {
position: absolute;
width: 60px;
height: 60px;
background: radial-gradient(circle at 30% 30%, #ff9ff3, #f78fb3);
width: 50px;
height: 50px;
background: radial-gradient(circle at 30% 30%, #4fc3f7, #03a9f4);
border-radius: 50%;
bottom: 30px;
bottom: 20px;
transform: translateX(-50%);
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease-in-out;
box-shadow: 0 0 20px #4fc3f7;
transition: all 0.3s ease;
}

#player1 {
Expand All @@ -124,95 +145,126 @@ button:disabled {

.enemy {
position: absolute;
width: 40px;
height: 40px;
background: radial-gradient(circle at 30% 30%, #f39c12, #d35400);
width: 30px;
height: 30px;
background: radial-gradient(circle at 30% 30%, #ff5252, #ff1744);
border-radius: 50%;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
animation: bounce 1s ease-in-out infinite;
box-shadow: 0 0 10px #ff5252;
transition: all 0.3s ease;
}

@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
#score, #coins {
position: absolute;
top: 10px;
font-size: 18px;
color: #fff;
text-shadow: 0 0 10px #4fc3f7;
background-color: rgba(0, 0, 0, 0.5);
padding: 5px 10px;
border-radius: 15px;
}

#score {
position: absolute;
top: 10px;
left: 10px;
font-size: 30px;
color: #fff;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
font-family: 'Poppins', sans-serif;
}

#shop-button {
#coins {
right: 10px;
}

#gamble-button {
position: absolute;
top: 10px;
top: 50px;
right: 10px;
z-index: 11;
font-size: 18px;
font-size: 16px;
padding: 8px 16px;
background-color: #8e44ad;
border-radius: 50px;
transition: background-color 0.3s;
}

#shop-button:hover {
background-color: #9b59b6;
background: linear-gradient(45deg, #ffd54f, #ffb300);
}

#shop-menu {
.menu {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.95);
padding: 25px;
background-color: rgba(0, 0, 0, 0.9);
padding: 20px;
border-radius: 20px;
z-index: 20;
width: 80%;
max-width: 300px;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 20px rgba(79, 195, 247, 0.5);
}

.shop-item {
margin-bottom: 15px;
font-size: 18px;
color: #2c3e50;
.powerup {
position: absolute;
width: 25px;
height: 25px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, #ffd54f, #ffb300);
box-shadow: 0 0 10px #ffd54f;
animation: pulse 1s infinite alternate;
}

#coins {
@keyframes pulse {
from { transform: scale(1); }
to { transform: scale(1.1); }
}

#restart-button, #pause-button, #main-menu-button {
position: absolute;
top: 10px;
right: 100px;
font-size: 30px;
color: #f1c40f;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
bottom: 20px;
z-index: 10;
}

#gamble-button {
background-color: #8e44ad;
border-radius: 50px;
padding: 12px 20px;
#restart-button {
left: 50%;
transform: translateX(-50%);
}

#gamble-button:hover {
background-color: #9b59b6;
#pause-button {
left: 10px;
}

#gamble-button:disabled {
background-color: #d2b4de;
#main-menu-button {
right: 10px;
}

#coins, #score {
font-family: 'Poppins', sans-serif;
font-weight: 600;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
@media (max-width: 768px) {
#game-container {
border-radius: 0;
max-height: none;
height: 100vh;
}

h1 {
font-size: 28px;
}

button {
font-size: 16px;
padding: 8px 16px;
}

#gamble-button {
font-size: 14px;
padding: 6px 12px;
}

.player {
width: 40px;
height: 40px;
}

.enemy {
width: 25px;
height: 25px;
}

#score, #coins {
font-size: 16px;
}
}


0 comments on commit 389c05e

Please sign in to comment.