@import 'swiper.css';
@import 'bootstrap-icons';
@import 'fonts.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Fix for 100vh on iOS */
@supports (-webkit-touch-callout: none) {
    .h-screen {
      height: -webkit-fill-available !important;
    }
}

h1,h2,h3,h4,h5,h6 {
    font-family: 'Brinnan';
    font-weight: 900;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* Fix for tinymce */
.tox-tinymce-aux {
    width: 0;
}

#description h2 {
    font-size: 1.8rem;
    margin-top: 3rem;
}

#description h3 {
    font-size: 1.6rem;
    margin-top: 2rem;
}

#description h4 {
    font-size: 1.4rem;
    margin-top: 1.5rem;
}

.scrolling-text {
    /* animation properties */
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);

    -moz-animation: my-animation 15s linear infinite;
    -webkit-animation: my-animation 15s linear infinite;
    animation: my-animation 15s linear infinite;
}

@media (min-width: 768px) {
    .scrolling-text {
        -moz-animation: my-animation 24s linear infinite;
        -webkit-animation: my-animation 24s linear infinite;
        animation: my-animation 24s linear infinite;
    }
}

@media (min-width: 1280px) {
    .scrolling-text {
        -moz-animation: my-animation 30s linear infinite;
        -webkit-animation: my-animation 30s linear infinite;
        animation: my-animation 30s linear infinite;
    }
}

@media (min-width: 1536px) {
    .scrolling-text {
        -moz-animation: my-animation 34s linear infinite;
        -webkit-animation: my-animation 34s linear infinite;
        animation: my-animation 34s linear infinite;
    }
}

/* for Firefox */
@-moz-keyframes my-animation {
    from { -moz-transform: translateX(100%); }
    to { -moz-transform: translateX(-100%); }
}

/* for Chrome */
@-webkit-keyframes my-animation {
    from { -webkit-transform: translateX(100%); }
    to { -webkit-transform: translateX(-100%); }
}

@keyframes my-animation {
    from {
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    to {
        -moz-transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}