diff --git a/src/assets/stylesheets/globals.css b/src/assets/stylesheets/globals.css index 61d9701..9361797 100644 --- a/src/assets/stylesheets/globals.css +++ b/src/assets/stylesheets/globals.css @@ -19,19 +19,20 @@ html::-webkit-scrollbar { } body { - @apply bg-gradient-to-br from-zinc-50/50 to-blue-100/50; + @apply relative z-10 bg-gradient-to-br from-zinc-50/100 to-blue-100/100; } body::after, body::before { content: ''; - @apply fixed -z-10 w-[480px] h-[480px] rounded-full; + filter: blur(78px); + @apply fixed -z-10 w-[540px] h-[540px] rounded-full; } body::after { - @apply animate-vibrate-1 top-[3%] left-[5%] bg-blue-500 blur-3xl opacity-15; + @apply animate-vibrate-1 top-[8%] left-[8%] bg-blue-500 opacity-20; } body::before { - @apply animate-vibrate-2 top-[48%] left-[55%] bg-yellow-500 blur-3xl opacity-15; + @apply animate-vibrate-2 top-[40%] left-[57%] bg-yellow-500 opacity-15; } diff --git a/tailwind.config.ts b/tailwind.config.ts index 61a0a4b..dde13b1 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -11,21 +11,22 @@ const config: Config = { theme: { extend: { animation: { - 'vibrate-1': 'vibrate 15s linear infinite', - 'vibrate-2': 'vibrate 18s linear infinite', + 'vibrate-1': 'vibrate 25s linear infinite', + 'vibrate-2': 'vibrate 20s linear infinite', }, keyframes: { vibrate: { - '0%, 100%': { transform: 'translate(0)' }, - '10%': { transform: 'translate(-20%, -20%)' }, - '20%': { transform: 'translate(20%, -20%)' }, - '30%': { transform: 'translate(-20%, 20%)' }, - '40%': { transform: 'translate(20%, 20%)' }, - '50%': { transform: 'translate(-20%, -20%)' }, - '60%': { transform: 'translate(20%, -20%)' }, - '70%': { transform: 'translate(-20%, 20%)' }, - '80%': { transform: 'translate(-20%, -20%)' }, - '90%': { transform: 'translate(20%, -20%)' }, + '0%': { transform: 'translate(0, 0)' }, + '10%': { transform: 'translate(-24%, -24%)' }, + '20%': { transform: 'translate(24%, -24%)' }, + '30%': { transform: 'translate(-24%, 24%)' }, + '40%': { transform: 'translate(24%, 24%)' }, + '50%': { transform: 'translate(24%, -24%)' }, + '60%': { transform: 'translate(-24%, 24%)' }, + '70%': { transform: 'translate(-24%, -24%)' }, + '80%': { transform: 'translate(24%, -24%)' }, + '90%': { transform: 'translate(-24%, -24%)' }, + '100%': { transform: 'translate(0, 0)' }, } } },