merge Lino

app/globals.css

@@ -13,6 +13,7 @@
 html {
   box-sizing: border-box;
   font-size: 62.5%;
+  overflow-y: auto;
 }
 
 body {
@@ -101,7 +102,7 @@ footer p {
   border-radius: 4px;
   width: 90%;
   max-width: 1150px;
-  height: 550px;
+  height: 600px;
   min-height: 520px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   overflow: hidden;
@@ -153,18 +154,18 @@ select {
   border: 1px solid #cfcfcf;
   background-color: #fff;
   border-radius: 4px;
-  font-size: 1.5rem;
+  font-size: 2rem;
   color: black;
 }
 
 label {
-  font-size: 1.5rem;
+  font-size: 2rem;
   font-weight: bold;
   display: block;
 }
 
 button {
-  font-size: 1.5rem;
+  font-size: 2rem;
   padding: 1rem 1.75rem;
   border-radius: 4px;
   cursor: pointer;
@@ -252,7 +253,7 @@ a {
   top: 0;
   left: 0;
   width: 100%;
-  font-size: 2.5rem;
+  font-size: 3rem;
   font-weight: bold;
   text-align: start;
   border-bottom: 1px solid #cfcfcf;
@@ -297,13 +298,14 @@ form {
 
 .toggleButton {
   flex: 1;
-  padding: 0.5rem 1rem;
   background-color: transparent;
   border: none;
   cursor: pointer;
   border-radius: 4px;
   transition: background-color 0.3s, color 0.3s;
   font-weight: 500;
+  overflow-y: hidden;
+  max-height: 60px;
 }
 
 .toggleButton.active {
@@ -369,6 +371,22 @@ table tr {
   text-align: start;
 }
 
+.loginContainer {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+
+@media(max-width: 1330px) {
+  .mainContainer {
+    grid-template-rows: 60px 1fr;
+  }
+}
+
 @media (max-width: 1300px) {
   .container {
     width: 100%;
@@ -392,6 +410,10 @@ table tr {
     border-radius: 0;
   }
 
+  .mainContainer {
+    grid-template-rows: 40px 1fr;
+  }
+
   .img {
     right: 50%;
     transform: translateX(50%);
@@ -436,6 +458,20 @@ table tr {
 
   footer p {
     font-size: 1.2rem;
+  }
+
+  label {
+    font-size: 1.5rem;
+  }
+
+  input,
+  select {
+    font-size: 1.5rem;
+  }
+
+  button {
+  font-size: 1.5rem;
+  padding: 1rem 1.5rem;
 }
 }
 
@@ -444,3 +480,10 @@ table tr {
     margin: 0;
   }
 }
+
+@media (max-width: 450px) {
+  .title {
+    max-width: 300px;
+    overflow-wrap: break-word;
+  }
+}

app/layout.tsx

@@ -2,9 +2,8 @@ import type { Metadata } from "next";
 import { Poppins } from "next/font/google";
 import Header from "./Components/Header/Header";
 import Footer from "./Components/Footer/Footer";
-import BarNavigation from "./Components/BarNavigation/BarNavigation";
-import "./globals.css";
 import WavesBackground from "./Components/Wave/wavesBack";
+import "./globals.css"; 
 
 const poppins = Poppins({
   variable: "--font-poppins",
@@ -37,4 +36,4 @@ export default function RootLayout({
     </html>
   );
 }
-//IO
+//IO

app/page.tsx

@@ -3,7 +3,7 @@ import { LoginRedirect } from "./Routes/LoginRedirect";
 
 export default function Home() {
   return (
-    <div className="mainContainer">
+    <div className="loginContainer">
       <LoginRedirect>
         <div className="container">
           <div className="img"></div>
@@ -13,4 +13,4 @@ export default function Home() {
     </div>
   );
 }
-//IO
+//IO