use tailwind for frontpage

src/client/styles.css

@@ -1,256 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-html,
-body {
-    touch-action: manipulation;
-    -ms-touch-action: manipulation;
-    height: 100%;
-    overflow: hidden;
-}
-
-* {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-}
-
-@font-face {
-    font-family: 'Overpass';
-    src: url('/resources/fonts/overpass.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-}
-
-body {
-    font-family: 'Overpass', sans-serif;
-    margin: 0;
-    padding: 0;
-    min-height: 100vh;
-    background-color: #15151500;
-    background-size: cover;
-    background-position: center;
-    background-attachment: fixed;
-    background-blend-mode: overlay;
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-}
-
-.content {
-    text-align: center;
-    padding: 20px;
-    max-width: 100%;
-    margin: 0 auto;
-    position: relative;
-}
-
-body {
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-    background: rgba(45, 45, 51, 0.173);
-    backdrop-filter: blur(6px);
-    -webkit-backdrop-filter: blur(8px);
-    min-height: 100vh;
-    margin: 0;
-}
-
-/* Typography */
-h1 {
-    font-family: Arial, serif;
-    text-align: center;
-    color: #2e2e2e;
-    font-size: 3em;
-    margin: 1em 0 10px;
-}
-
-h1 img {
-    height: auto;
-    width: auto;
-    max-width: 100%;
-    transform: scale(2);
-}
-
-h2 {
-    font-family: Arial, serif;
-    text-align: center;
-    color: #2e2e2e;
-    font-size: 1.5em;
-    margin-bottom: 50px;
-}
-
-h3 {
-    font-family: Arial, serif;
-    text-align: center;
-    color: #000000;
-}
-
-
-.version {
-    font-family: Arial, serif;
-    text-align: center;
-    color: #000000;
-    font-size: 1em;
-}
-
-/* Username input */
-#username-container {
-    margin-bottom: 50px;
-    display: flex;
-    justify-content: center;
-}
-
-#username {
-    width: 90%;
-    max-width: 500px;
-    padding: 10px;
-    font-size: 16px;
-    text-align: center;
-    border: 2px solid #007bff;
-    border-radius: 5px;
-    background-color: rgba(255, 255, 255, 0.8);
-    margin: 1em auto;
-    display: block;
-}
-
-/* Buttons */
-.button-container {
-    display: flex;
-    gap: 1rem;
-    max-width: 20rem;
-    max-height: 10rem;
-    margin: 0 auto;
-}
-
-.primary-button {
-    background-color: #2563eb;
-    color: white;
-    padding: 1rem 1rem;
-    font-weight: bold;
-    font-size: 1.25rem;
-    border-radius: 0.5rem;
-    flex: 1;
-    border: none;
-    cursor: pointer;
-    transition: background-color 0.3s;
-}
-
-.secondary-button {
-    background-color: #dbeafe;
-    color: #1e40af;
-    padding: 1rem;
-    font-weight: 500;
-    font-size: 0.875rem;
-    border-radius: 0.375rem;
-    width: 100%;
-    border: none;
-    cursor: pointer;
-    transition: background-color 0.3s;
-}
-
-.link-button {
-    display: block;
-    max-width: 400px;
-    margin: 1rem auto;
-    padding: 0.5rem 1rem;
-    text-align: center;
-    text-decoration: none;
-    font-weight: bold;
-    border-radius: 0.375rem;
-    transition: background-color 0.3s;
-}
-
-.link-button.green {
-    background-color: #059669;
-    color: white;
-}
-
-.link-button.purple {
-    background-color: #4f46e5;
-    color: white;
-}
-
-/* Discord */
-.discord-link {
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 50px;
-    height: 50px;
-    background-color: #5865F2;
-    border-radius: 50%;
-    transition: background-color 0.3s ease;
-}
-
-.discord-link:hover {
-    background-color: #4752C4;
-}
-
-.discord-logo {
-    width: 30px;
-    height: 30px;
-}
-
-/* Media Queries */
-@media (min-width: 768px) {
-    h1 {
-        font-size: 2em;
-    }
-
-
-    h3 {
-        font-size: 1em;
-    }
-
-    .lobby-section {
-        padding: 1rem;
-    }
-
-    #username {
-        font-size: 24px;
-    }
-
-    .lobby-container {
-        display: flex;
-        flex-direction: column;
-        gap: 1rem;
-        align-items: center;
-        width: 100%;
-        padding: 1rem;
-    }
-
-    .lobby-button {
-        width: 50rem;
-        display: block;
-        margin: 0 auto;
-    }
-
-    .lobby-name {
-        font-size: 36px;
-    }
-
-    .lobby-timer,
-    .player-count {
-        font-size: 24px;
-    }
-
-    .discord-link {
-        top: 50px;
-        right: 50px;
-        width: 70px;
-        height: 70px;
-    }
-
-    .discord-logo {
-        width: 40px;
-        height: 40px;
-    }
-}