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


@layer components {
    /* button back */
    .back-button {
        @apply flex bg-none text-xl;
    }
    .arrow-icon {
        @apply ml-[]; 
    }

    /* fonts */
    .inter {
        font-family: 'Inter', sans-serif; 
    }
    .advent-pro {
        font-family: 'Advent Pro', sans-serif; 
    }

    .arrow {
        font-family: 'Segoe UI Symbol', sans-serif;
        font-size: 1.1em;
        display: flex;
        align-items: center;
    }
    .arrow i {
        margin: 0 5px;
    }
    

    /* colors */
    .dark-grey{
        background: #58545B;
    }
    .pink{
        background: #90FFB2;
    }
    .purple{
        background: #FF6C6A;
    }
    .light-green {
        background: #C3FFCA;
    }

    .green{
        background: #90FFB2;
    }

    .mint-green{
        background: #E3FFED;
    }

    .red{
        background: #FF6C6A;
    }

    .light-red{
        background: #FFDFDF;
    }

    .grey{
        background: #D2D0D0; 
    }
    .light-grey{
        background: #E9E9E9; 
    }
    .yellow{
        background: #FFD009;
    }
    .purples{
        background: #8A52F5;
    }

    .idea{
        @apply w-[360px] h-[70px] rounded-2xl; 
    }

    .idea-header{
        @apply w-[360px] h-[20px] rounded-tl-2xl rounded-tr-2xl;
    }
    /* some buttons */
    .void-button {
        @apply w-full h-[25vh] text-[128px] inter; 
    }
    .void-button--small {
        @apply h-[10vh] text-[40px] inter; 
    }
    .button--medium {
        @apply w-[300px] h-[60px] rounded-2xl;
    }

    /* inputs */
    .input--medium {
        @apply w-[300px] h-[60px] rounded-2xl pl-[10px];
    }

    .input-description {
        @apply w-[300px] h-[400px] pl-[10px] pt-[10px] rounded-2xl;
    }

    /* text */
    .title {
        @apply text-[40px] text-center;
    }
    .title-description {
        @apply w-full text-[24px] advent-pro text-center mx-auto;
    }

    .rules {
        @apply w-full text-[14px] mx-auto;
    }
    .idea-name {
        @apply w-[360px] h-[20px] text-[14px] mx-auto text-center;
    }
    /* adaptive interface */
    @media (max-width: 1024px) {
        .title {
            @apply text-[30px] text-center;
        }
        .title-description {
            @apply w-full text-[24px] advent-pro text-center;
        }
        .void-button {
            @apply w-full h-[25vh] text-[64px] inter; 
        }
        .void-button--small {
            @apply h-[10vh] text-[40px] inter; 
        }
    }

    @media (max-width: 630px) {
        .title {
            @apply text-[30px] text-center;
        }
        .title-description {
            @apply w-full text-[18px] advent-pro text-center;
        }
        .void-button {
            @apply w-full h-[25vh] text-[64px] inter; 
        }
        .void-button--small {
            @apply h-[10vh] text-[20px] inter w-full mb-2 flex justify-center items-center text-center;
        }
    }
    
    
}