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

*{
    box-sizing: border-box;
}


/* Keyframes for the “shake” animation */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-70px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(70px);
    }
}

/* Applies the shake animation */
.animate-shake {
    animation-name: shake;
}

/* Makes any animation repeat infinitely */
.animate-infinite {
    animation-iteration-count: infinite;
}

/* Sets animation duration to 1000 ms */
.animate-duration-1000 {
    animation-duration: 20s;
}

/* Delays animation start by 100 ms */
.animate-delay-150 {
    animation-delay: 1s;
}

.animate-delay-200 {
    animation-delay: 1.5s;
}

.animate-delay-50 {
    animation-delay: 0.5s;
}



/* Uses a linear timing function */
.animate-ease-linear {
    animation-timing-function: linear;
}


.clr1 {
    background: #8a8000;
}

.clr2 {
    background: #0033cc;
}

.clr3 {
    background: #ff8000;
}

.clr4 {
    background: #800000;
}

.clr5 {
    background: #cc0000;
}

.clr6 {
    background: #006600;
}

.clr7 {
    background: #ff3399;
}

.clr8 {
    background: #0099ff;
}

.box a {
    color: inherit;
    text-decoration: none;
}

.categories li p {
    cursor: pointer;
    text-decoration: underline;
    color: #2563eb;
}

.navbar{
    gap: 15px;
}

.navbar p{
    padding: 15px 20px;
}

@media screen and (max-width: 1000px) {
    .navbar{
        gap: 5px;
    }
    .navbar p{
        padding: 10px 10px;
        font-size: 12px;
    }
}


@media screen and (max-width: 800px) {
    header h1{
        font-size: 35px !important;
    }
}

@media screen and (max-width: 650px) {
    header h1{
        font-size: 20px !important;
    }
}