@tailwind base;

.btn {
    @apply outline-none py-2 px-4 text-white font-semibold rounded-md;
}

.btn-blue {
    @apply bg-blue-600;
}

.btn-blue:hover {
    @apply bg-blue-500;
}

.bg-main {
    background-image: linear-gradient(181deg, rgba(2, 0, 97, 1) 15%, rgba(97, 149, 219, 1) 158.5%);
}

.btn-anime {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

input-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input,
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius:
        3px;
}

button {
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

button:hover {
    background-color: #007bff;
}

/* Animations */

.container {
    animation: fadeInUp 0.5s ease-in-out;
}

h1,
h2 {
    animation: fadeInDown 0.5s ease-in-out;
}

.input-group {
    animation: fadeInUp 0.5s ease-in-out;
}

/* Keyframe definitions */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);

    }
}

.object-cover {
    height: 320px !important;
}

.delete {
    display: block;
    margin-top:20px;
    padding: 5px 10px;
    border-radius: 5px;
    max-width: 65px
}

.card {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    padding-bottom: 35px;

}

.card h2 {
    height: 55px;
}

.card p {

}

.card-event img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

#list-events {
    background-color: #007bff;
    padding-bottom: 50px;
}


.child {
    animation-duration: 5s;
    animation-iteration-count: infinite;
    transform-origin: bottom;
    animation-delay: .3;
}
.bounce:hover {
    animation-name: bounce;
    animation-timing-function: ease;
}
@keyframes bounce {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-30px); }
  100% { transform: translateY(-20px); }
}



@tailwind components;

@tailwind utilities;