Fix issues on mobile

src/app/globals.css

@@ -33,12 +33,12 @@ p {
 }
 
 .logo-container {
-  @apply fixed right-100 top-1/2 -translate-y-1/2 z-20;
+  @apply fixed min-[1600px]:right-80 max-[1600px]:right-60 max-[1400px]:right-40 max-[1300px]:top-40 min-[1300px]:top-1/2 min-[1600px]:-translate-y-1/2 max-[800px]:left-1/2 max-[800px]:-translate-x-1/2 z-20;
 }
 
 .logo-container div {
   @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
-  @apply rounded-2xl;
+  @apply min-[1600px]:rounded-2xl max-[1600px]:rounded-lg max-[1300px]:rounded-md;
 }
 
 a {

src/app/layout.tsx

@@ -1,7 +1,8 @@
 import { Lexend } from 'next/font/google'
-import './globals.css'
 import { Metadata } from 'next'
 
+import './globals.css'
+
 const lexend = Lexend({
   subsets: ['latin']
 })

src/app/page.tsx

@@ -24,10 +24,10 @@ export default function Home () {
       </div>
 
       <div className='logo-container'>
-        <div className='bg-[#5331F8] w-100 h-100 rotate-345 animate-[spin_50s_linear_infinite]'></div>
+        <div className='bg-[#5331F8] min-[1600px]:w-100 min-[1600px]:h-100 max-[1600px]:w-60 max-[1600px]:h-60 max-[1300px]:w-40 max-[1300px]:h-40 rotate-345 animate-[spin_50s_linear_infinite]'></div>
-        <div className='bg-[#ED46F8] w-100 h-100 rotate-15 animate-[spin_40s_linear_infinite_reverse]'></div>
+        <div className='bg-[#ED46F8] min-[1600px]:w-100 min-[1600px]:h-100 max-[1600px]:w-60 max-[1600px]:h-60 max-[1300px]:w-40 max-[1300px]:h-40 rotate-15 animate-[spin_40s_linear_infinite_reverse]'></div>
-        <div className='bg-[#000000] w-70 h-70'>
+        <div className='bg-[#000000] min-[1600px]:w-70 min-[1600px]:h-70 max-[1600px]:w-40 max-[1600px]:h-40 max-[1300px]:w-27.5 max-[1300px]:h-27.5'>
-          <h1 className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[#8937F8]! text-5xl whitespace-nowrap'>
+          <h1 className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[#8937F8]! min-[1600px]:text-5xl max-[1600px]:text-3xl max-[1300px]:text-xl whitespace-nowrap'>
             Code Fly
           </h1>
         </div>