diff --git a/src/styles/main.css b/src/styles/main.css index 15f94d7..a754dac 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -26,12 +26,6 @@ } /* Base styles */ -html, body { - height: 100%; - height: 100dvh; - overflow: hidden; -} - body { font-family: "Nunito", sans-serif; background: var(--bg-cream); @@ -59,9 +53,7 @@ h3 { flex-direction: column; align-items: center; opacity: 1; - height: 100vh; - height: 100dvh; - overflow: hidden; + min-height: 100vh; } /* Welcome screen */ @@ -69,11 +61,9 @@ h3 { display: flex; flex-direction: column; align-items: center; - justify-content: center; - padding: 1.5rem; + padding: 2rem; max-width: 600px; margin: 0 auto; - flex: 1; } .welcome h1 { @@ -185,18 +175,16 @@ h3 { display: flex; flex-direction: column; align-items: center; - padding: 1rem 1.5rem; - flex: 1; + padding: 2rem; + min-height: 100vh; background: var(--bg-forest); - overflow: auto; } .forest__title { font-family: "Quicksand", sans-serif; - font-size: 1.5rem; + font-size: 2rem; color: var(--text-dark); - margin-bottom: 0.5rem; - flex-shrink: 0; + margin-bottom: 1.5rem; } .forest__level-map { @@ -263,15 +251,14 @@ h3 { } .forest__continue-btn { - padding: 0.75rem 2rem; + padding: 1rem 3rem; border-radius: 12px; background: var(--accent-green); color: white; border: none; font-family: "Quicksand", sans-serif; font-weight: 700; - font-size: 1.1rem; - flex-shrink: 0; + font-size: 1.3rem; cursor: pointer; transition: transform 0.2s ease; } @@ -295,9 +282,9 @@ h3 { flex-direction: column; align-items: center; justify-content: center; - gap: 1rem; - padding: 1rem; - flex: 1; + gap: 2rem; + padding: 2rem; + min-height: 100vh; background: var(--bg-cream); position: relative; } @@ -461,9 +448,7 @@ h3 { position: relative; width: 100%; max-width: 800px; - flex: 1; - min-height: 0; - margin: 0 auto 0.75rem; + margin: 0 auto 1.5rem; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); @@ -534,11 +519,9 @@ h3 { display: flex; flex-direction: column; align-items: center; - justify-content: center; - padding: 1.5rem; + padding: 2rem; max-width: 600px; margin: 0 auto; - flex: 1; text-align: center; }