diff --git a/paras/src/App.css b/paras/src/App.css index f01d7d8..d9bb374 100644 --- a/paras/src/App.css +++ b/paras/src/App.css @@ -548,33 +548,55 @@ body { } } + .mode-selection { display: flex; flex-direction: column; align-items: center; margin-top: 50px; + text-align: center; } .mode-selection h2 { margin-bottom: 20px; + font-size: 28px; + color: #ffffff; } -.mode-selection button { - margin: 10px; - padding: 10px 20px; - font-size: 18px; - cursor: pointer; +.button-container { + display: flex; + gap: 20px; + justify-content: center; +} + +.mode-button { + display: flex; + flex-direction: column; + align-items: center; background-color: #4CAF50; color: white; border: none; - border-radius: 5px; - transition: background-color 0.3s; + border-radius: 10px; + padding: 15px 30px; + font-size: 20px; + cursor: pointer; + transition: all 0.3s ease; + box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); } -.mode-selection button:hover { +.mode-button:hover { background-color: #45a049; + box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2); + transform: translateY(-3px); } +.mode-button img { + width: 70px; + height: 70px; + margin-bottom: 10px; + border-radius: 5px; + object-fit: cover; +} .back-button { position: absolute; top: 20px; diff --git a/paras/src/Game.js b/paras/src/Game.js index b56cfeb..4ea8b3c 100644 --- a/paras/src/Game.js +++ b/paras/src/Game.js @@ -148,10 +148,18 @@ const App = () => {