html {
    scroll-behavior: smooth;
}

@font-face {
    font-family: 'Bank Gothic';
    src: url('/assets/fonts/BankGothic-Medium/bank gothic medium bt.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bank Gothic Light';
    src: url('/assets/fonts/BankGothic-Medium/Bank Gothic Light Regular.otf');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('/assets/fonts/Lato/Lato-Regular.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Lato';
    src: url('/assets/fonts/Lato/Lato-Bold.ttf');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@keyframes swing {
    0%,
    100% {
        transform: translateX(-4px);
    }
    50% {
        transform: translateX(10px);
    }
}
.rockingAnimation {
    animation: swing 4s infinite ease-in-out;
    pointer-events: all;
}

@keyframes popin {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

@keyframes popout {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(0);
    }
}

.popinAnimate {
    animation-name: popin;
}

.popoutAnimate {
    animation-name: popout;
}

@keyframes fadeInAndOut {
    0%,
    100% {
        opacity: 0;
        transform: translate(-50%, -100%);
    }
    20%,
    80% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.messageAnimation {
    animation-name: fadeInAndOut;
    animation-duration: 8s;
}

.arrows {
    width: 42px;
    height: 66px;
    position: absolute;
    bottom: 0px;
    cursor: pointer;
}

.arrows path {
    fill: transparent;
    stroke-width: 3px;
    animation: arrow 3s infinite;
    -webkit-animation: arrow 3s infinite;
    stroke-linecap: round;
}

@keyframes arrow {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes arrow /*Safari and Chrome*/ {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    80% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.arrows path.a1 {
    animation-delay: -1s;
    -webkit-animation-delay: -1s; /* Safari 和 Chrome */
}

.arrows path.a2 {
    animation-delay: -0.5s;
    -webkit-animation-delay: -0.5s; /* Safari 和 Chrome */
}

.arrows path.a3 {
    animation-delay: 0s;
    -webkit-animation-delay: 0s; /* Safari 和 Chrome */
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    caret-color: inherit;
}