70 lines
1.2 KiB
CSS
70 lines
1.2 KiB
CSS
@import "tailwindcss";
|
|
|
|
body {
|
|
background: #1e2a38;
|
|
color: #fff;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
@theme {
|
|
--animate-wiggle: wiggle 1s ease-in-out infinite;
|
|
|
|
@keyframes wiggle {
|
|
0%,
|
|
100% {
|
|
transform: rotate(-3deg);
|
|
}
|
|
50% {
|
|
transform: rotate(3deg);
|
|
}
|
|
}
|
|
|
|
--animate-bounce: bounce 1s ease-in-out infinite; /* bounce 1s infinite */
|
|
@keyframes bounce {
|
|
0%,
|
|
100% {
|
|
transform: translateX(-25%);
|
|
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
|
}
|
|
50% {
|
|
transform: none;
|
|
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
.arrow-outline path {
|
|
stroke: black;
|
|
stroke-width: 20px;
|
|
stroke-linejoin: round;
|
|
}
|
|
|
|
/* Modal animations */
|
|
.ReactModal__Overlay {
|
|
opacity: 0;
|
|
transition: opacity 200ms ease-in-out;
|
|
}
|
|
|
|
.ReactModal__Overlay--after-open {
|
|
opacity: 1;
|
|
}
|
|
|
|
.ReactModal__Overlay--before-close {
|
|
opacity: 0;
|
|
}
|
|
|
|
.ReactModal__Content {
|
|
transform: scale(0.9) translateY(-20px);
|
|
opacity: 0;
|
|
transition: all 200ms ease-in-out;
|
|
}
|
|
|
|
.ReactModal__Content--after-open {
|
|
transform: scale(1) translateY(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.ReactModal__Content--before-close {
|
|
transform: scale(0.9) translateY(-20px);
|
|
opacity: 0;
|
|
}
|