even better styling

package.json

@@ -7,7 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "tunnel": "npx cloudflared tunnel --url http://localhost:3000"
+    "tunnel": "npx cloudflared tunnel --url http://localhost:3001"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.84.2",

src/app/globals.css

@@ -29,5 +29,5 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
 }

src/app/page.tsx

@@ -28,34 +28,34 @@ function SessionInfo({
 }) {
   return (
     <div className="max-w-md mx-auto mt-2 p-2 bg-neuf-black space-y-4">
-      <div className="flex justify-center">
+      <div className="flex items-center relative bg-white rounded-lg overflow-hidden">
         <button
           onClick={onClear}
-          className="w-8 h-8 bg-red-600 text-white rounded-full hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 flex items-center justify-center font-bold text-lg transition-colors duration-200"
+          className="w-10 h-10 absolute top-2 right-2 bg-red-600 text-white rounded-full hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 flex items-center justify-center font-bold text-lg transition-colors duration-200"
           aria-label="Clear session"
         >
-          ×
+          &times;
         </button>
-      </div>
-      <div className="flex flex-col items-center">
         <Image
           src={`data:image/jpeg;base64,${session.documentPhoto}`}
           alt="Document"
           width={200}
           height={261}
-          className="w-40 h-50 object-cover rounded-lg mb-4 border border-black-300 shadow"
+          className="w-40 h-50 object-cover border border-black-300 shadow"
           unoptimized
         />
-        {(session.firstName || session.lastName) && (
-          <div className="text-xl font-bold text-white">
-            {[session.firstName, session.lastName].filter(Boolean).join(" ")}
-          </div>
-        )}
-        {typeof session.age === "number" && (
-          <div className="text-3xl font-extrabold text-white mt-2">
-            {session.age} år
-          </div>
-        )}
+        <div className="py-4 px-4">
+          {(session.firstName || session.lastName) && (
+            <div className="text-xl font-bold">
+              {[session.firstName, session.lastName].filter(Boolean).join(" ")}
+            </div>
+          )}
+          {typeof session.age === "number" && (
+            <div className="text-5xl font-extrabold text-neuf-black mt-2">
+              {session.age} år
+            </div>
+          )}
+        </div>
       </div>
     </div>
   );

src/components/LoginForm.tsx

@@ -37,14 +37,14 @@ export default function LoginForm({ onLogin }: LoginFormProps) {
 
   return (
     <div className="max-w-md mx-auto mt-20 p-6 bg-neuf-black">
-      <h1 className="text-2xl font-bold text-center mb-6 text-white">
+      <h1 className="text-5xl font-bold text-center mb-20 text-white">
         Oldeneuf?
       </h1>
       <form onSubmit={handleSubmit} className="space-y-4">
         <div>
           <label
             htmlFor="password"
-            className="block text-sm font-medium text-gray-300 mb-1"
+            className="block text-md font-medium text-gray-300 mb-1"
           >
             Passord
           </label>
@@ -56,17 +56,15 @@ export default function LoginForm({ onLogin }: LoginFormProps) {
               setPassword(e.target.value);
               setError("");
             }}
-            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="w-full px-3 py-4 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
             required
             disabled={isLoading}
           />
-          {error && (
-            <p className="text-red-500 text-sm mt-1">{error}</p>
-          )}
+          {error && <p className="text-red-500 text-md mt-1">{error}</p>}
         </div>
         <button
           type="submit"
-          className="w-full bg-golden-orange text-neuf-black py-2 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500 disabled:opacity-50"
+          className="w-full font-bold bg-golden-orange text-neuf-black py-4 px-4 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500 disabled:opacity-50"
           disabled={isLoading}
         >
           {isLoading ? "Logger inn..." : "Logg inn"}

src/components/Scanner.tsx

@@ -290,7 +290,7 @@ export default function Scanner({ onScan }: ScannerProps) {
             margin-left: 0 !important;
             margin-right: 0 !important;
             margin-top: 0 !important;
-            height: 50vh !important;
+            height: 55dvh !important;
             background: #000;
             border-radius: 0 !important;
             display: flex;
@@ -299,7 +299,7 @@ export default function Scanner({ onScan }: ScannerProps) {
           }
           .video-container-responsive video {
             width: 100vw !important;
-            height: 50vh !important;
+            height: 55dvh !important;
             object-fit: cover;
             border-radius: 0 !important;
             border: none !important;