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

@layer utilities {

    body {
        @apply bg-background text-white pb-28 min-h-screen;  background-image: url('/mystaticfiles/media/background/vector.png') ;background-repeat: no-repeat;background-position: center bottom;background-size: 100% auto;
    }

    input[type="text"], input[type="password"] {
        @apply  bg-input-color rounded-lg h-10 
    }

    input[type="checkbox"]{
        @apply accent-primary cursor-pointer
    }
    
    h1 {
        @apply text-5xl text-center
    }

    h2 {
        @apply text-4xl text-left
    }

    button {
        @apply font-bold py-2 px-4 rounded
    }

}

@layer components {
    .btn-primary {
        @apply bg-primary text-white
    }

    .btn-secondary{
        @apply bg-background border-solid border border-white
    }

    .container {
        @apply m-auto max-sm:px-10
    }

    .vector-img{
        @apply w-full
    }

    .container div{
        @apply  max-sm:w-full
    }

    .form-item input{
       @apply w-full px-2 
    }

    .form-item {
        @apply flex items-center justify-center pt-5 
    }

    .head-container {
        @apply flex justify-between py-20
    }

    .movie-container {
        @apply grid md:grid-cols-4 grid-cols-2 gap-6 content-start
    }

    .movie {
        @apply bg-card-color p-2 rounded-lg mx-auto
    }

    .movie-container img {
        /* @apply rounded-lg object-fill  */
        /* h-80 w-60 max-md:h-60 max-md:w-40 */
    }


    .movie p{
        /* @apply p-2 */
    }

    .new-container{
        @apply px-20 max-sm:px-10
    }

    /* .input-container{
        @apply grid md:grid-cols-2 grid-cols-1 
    } */

    .input-container{
        @apply flex max-sm:flex-col-reverse
    }

    .upload-input{
        @apply border-2 border-dotted bg-input-color rounded-lg w-2/5 h-auto aspect-square flex items-center justify-center
    }

    .upload-input div{
        @apply text-center
    }

    .field-input{
        @apply sm:mx-20 w-1/2 max-sm:w-full
    }

    .field-input input{
        @apply block mb-4 
    }

    .title-input{
        @apply w-7/12
    }

    .year-input{
        @apply w-4/12
    }

    .btn-container{
        @apply flex gap-2 pt-9 w-3/5
    }

}