fix: delete readme è adjust some sizes

.nvmrc

@@ -0,0 +1 @@
+18

README.md

@@ -1,30 +0,0 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
-```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

package.json

@@ -39,5 +39,8 @@
     "eslint-plugin-react-refresh": "^0.4.5",
     "typescript": "^5.2.2",
     "vite": "^5.1.0"
+  },
+  "engines": {
+    "node": "18"
   }
 }

src/components/card.tsx

@@ -67,6 +67,7 @@ const Content = styled(animated.div)`
   width: 100%;
   height: 100%;
   transform-style: preserve-3d;
+  perspective: 500px;
 `;
 
 const Card = styled.div`
@@ -96,7 +97,10 @@ export const ContentShared = styled.div`
 
   border-radius: 14px;
   background: #9c27b0;
-  border: 6px solid #009688;
+  border: 3px solid #009688;
+  @media (min-width: 768px) {
+    border-width: 6px;
+  }
 `;
 
 const ContentFront = styled(ContentShared)`

src/components/countdown.tsx

@@ -26,5 +26,9 @@ const Container = styled.div`
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-rows: 1fr;
-  grid-column-gap: 2rem;
+  grid-column-gap: 1rem;
+
+  @media (min-width: 768px) {
+    grid-column-gap: 2rem;
+  }
 `;

src/index.css

@@ -24,10 +24,10 @@ body {
 #root {
   max-width: 1280px;
   margin: 0 auto;
-  padding: 2rem;
+  padding: 1rem;
   text-align: center;
 }
 
 * {
-  box-sizing: border-box;
+  box-sizing: border-box!important;
 }