Initial commit

src/app/globals.css

@@ -0,0 +1,56 @@
+@import "tailwindcss";
+
+body {
+  @apply bg-[rgb(24,24,48)] text-[rgb(200,200,250)] select-none flex items-center justify-center min-h-screen;
+}
+
+.box {
+  @apply bg-[rgb(48,48,72)] border border-[rgb(72,72,96)] rounded-lg shadow-[rgba(0,0,0,0.5)];
+  @apply w-auto p-6 m-2;
+}
+
+.games-grid {
+  @apply flex flex-wrap gap-4 mt-2 justify-center;
+}
+
+.games-grid a {
+  @apply flex flex-col items-center justify-center px-5 py-2.5 m-1 bg-[rgb(64,64,88)] border border-[rgb(88,88,112)] rounded-lg transition-all duration-200;
+  @apply hover:bg-[rgb(88,88,112)] hover:border-[rgb(112,112,136)] hover:-translate-y-0.5 min-w-[120px] w-auto h-32 shadow shadow-[rgba(0,0,0,0.5)];
+}
+
+.games-grid a img {
+  @apply mb-auto w-16 h-16;
+}
+
+.games-grid a:hover img {
+  @apply drop-shadow-[0_0_8px_rgb(120,120,180)];
+}
+
+.games-grid a span {
+  @apply text-[18px] sm:text-[20px] text-center whitespace-nowrap mt-2;
+}
+
+.swiper {
+  @apply rounded-2xl max-md:rounded-xl max-sm:rounded-lg;
+}
+
+.swiper-button-next svg,
+.swiper-button-prev svg {
+  @apply text-[rgb(200,200,250)];
+}
+
+.downloads {
+  @apply flex flex-wrap gap-2 justify-center mt-2;
+}
+
+.downloads a {
+  @apply bg-[rgb(72,72,96)] hover:bg-[rgb(96,96,120)] border border-[rgb(96,96,120)] hover:border-[rgb(120,120,144)] hover:-translate-y-0.5 rounded-lg px-4 py-2 inline-block transition-all duration-200;
+}
+
+.home-button {
+  @apply bg-[rgb(72,72,96)] hover:bg-[rgb(96,96,120)] border border-[rgb(96,96,120)] hover:border-[rgb(120,120,144)] hover:-translate-y-px rounded-full transition-all h-10 w-10 flex items-center justify-center;
+}
+
+.home-button svg {
+  @apply h-5 w-5;
+}