diff --git a/src/App.css b/src/App.css
index b9d355d..e69de29 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,42 +0,0 @@
-#root {
- max-width: 1280px;
- margin: 0 auto;
- padding: 2rem;
- text-align: center;
-}
-
-.logo {
- height: 6em;
- padding: 1.5em;
- will-change: filter;
- transition: filter 300ms;
-}
-.logo:hover {
- filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
- filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
-
-@media (prefers-reduced-motion: no-preference) {
- a:nth-of-type(2) .logo {
- animation: logo-spin infinite 20s linear;
- }
-}
-
-.card {
- padding: 2em;
-}
-
-.read-the-docs {
- color: #888;
-}
diff --git a/src/App.tsx b/src/App.tsx
index c8e3103..0959659 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,10 +10,11 @@ const App = () => {
sx={{
bgcolor: "background.default",
display: "flex",
- minHeight: "100vh",
- maxHeight: "100vh",
- width: "100vw",
+ minHeight: "100dvh",
+ maxHeight: "100dvh",
+ width: "100dvw",
flexDirection: "column",
+ transition: "all 0.3s ease-in-out",
}}
>
@@ -22,15 +23,16 @@ const App = () => {
sx={{
bgcolor: "background.default",
display: "flex",
- width: "100vw",
+ width: "100dvw",
position: "relative",
mt: "61px",
- minHeight: "calc(100vh - 122px)",
- maxHeight: "calc(100vh - 122px)",
+ minHeight: "calc(100dvh - 122px)",
+ maxHeight: "calc(100dvh - 122px)",
flexGrow: 1,
flexDirection: "column",
alignItems: "center",
overflow: "auto",
+ transition: "all 0.3s ease-in-out",
}}
>