diff --git a/src/App.css b/src/App.css index b9d355d..b9b827c 100644 --- a/src/App.css +++ b/src/App.css @@ -1,10 +1,16 @@ #root { max-width: 1280px; margin: 0 auto; - padding: 2rem; + padding: 0.5rem; text-align: center; } +@media (min-width: 640px) { + #root { + padding: 2rem; + } +} + .logo { height: 6em; padding: 1.5em; @@ -39,4 +45,4 @@ .read-the-docs { color: #888; -} +} \ No newline at end of file diff --git a/src/components/game/ExpertMemo.css b/src/components/game/ExpertMemo.css index d882117..77c27fd 100644 --- a/src/components/game/ExpertMemo.css +++ b/src/components/game/ExpertMemo.css @@ -2,14 +2,21 @@ .expert-memo { background-color: rgba(0, 0, 0, 0.3); - padding: 2rem; + padding: 1rem; border: 1px solid rgb(234 179 8); font-family: monospace; box-shadow: 0 0 10px rgba(234, 179, 8, 0.2); + width: 100%; max-width: 800px; margin: 0 auto; } +@media (min-width: 640px) { + .expert-memo { + padding: 2rem; + } +} + .expert-memo.alert { border-color: rgb(239 68 68); box-shadow: 0 0 10px rgba(239, 68, 68, 0.2); @@ -27,11 +34,18 @@ margin-bottom: 1rem; text-align: center; letter-spacing: 0.1em; - padding: 0.75rem; - font-size: 1.5rem; + padding: 0.5rem; + font-size: 1.25rem; text-transform: uppercase; } +@media (min-width: 640px) { + .memo-label { + padding: 0.75rem; + font-size: 1.5rem; + } +} + .memo-label.standard { background-color: rgb(234 179 8); color: black; @@ -62,7 +76,6 @@ line-height: 1.5; } -/* Add spacing between paragraphs */ .memo-body p { margin-bottom: 1.5rem; }