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


@layer base {
    @font-face {
        font-family: "dana regular";
        font-weight: 100;
        src: url("../assets/font/woff2/DanaFaNum-Regular.woff2") format("woff2");
        font-display: swap;
    }

    @font-face {
        font-family: "dana medium";
        font-weight: 500;
        src: url("../assets/font/woff2/DanaFaNum-Medium.woff2") format("woff2");
        font-display: swap;
    }

    @font-face {
        font-family: "dana bold";
        font-weight: 700;
        src: url("../assets/font/woff2/DanaFaNum-Bold.woff2") format("woff2");
        font-display: swap;
    }

    * {
        @apply font-dana-m;
        font-weight: 500;
        box-sizing: border-box;
    }

    input[type="search"] {
        -webkit-appearance: none;
        appearance: none;
        box-sizing: border-box;
        padding: 0;
    }

    input[type="search"]::-webkit-search-cancel-button {
        display: none;
    }

    input[type="search"]:focus {
        outline: none;
        box-shadow: none;
    }
}

@layer utilities {

    /* bg */
    .bg_gradient {
        background-image: linear-gradient(90deg, #f87f06 0%, #fba105 100%);
    }

    .bg_gradient_revers {
        background-image: linear-gradient(270deg, #f87f06 0%, #fba105 100%);
    }


    /* scrollbar */
    .scrollbar_custom::-webkit-scrollbar-track {
        padding: 2px 0;
        background-color: #f6f6f6;
    }

    .scrollbar_custom::-webkit-scrollbar {
        width: 4px;
        height: 2px;
    }

    .scrollbar_custom::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: orange;
    }

    .scrollbar_custom_none::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .scrollbar_custom_none::-webkit-scrollbar-thumb {
        background-color: transparent;
    }

    .scrollbar_custom_none::-webkit-scrollbar-track {
        background-color: transparent;
    }


    /* mask image */
    .cover {
        -webkit-mask-image: url("../../public/image/slider/cover.svg");
        mask-image: url("../../public/image/slider/cover.svg");
        mask-size: 100%;
        mask-repeat: no-repeat;
        box-shadow: 0 0 0 0 #000;
    }


    /* aspect ratio */
    .aspect1 {
        aspect-ratio: 1/0.35;
    }

    .aspect2 {
        aspect-ratio: 1 / 0.59;
    }

    .aspect3 {
        aspect-ratio: 1 / 1.38;
    }


    /* slider */
    .active_ball {
        background: linear-gradient(270deg, #f87f06 0%, #fba105 100%);
        width: 20px;
        border-radius: 10px;
    }

    /* shadow custom */
    .shadow_custom {
        box-shadow: -12px 10px 18px -17px #00000075;
    }


    /* slide */
    .slide:first-child {
        filter: grayscale(100%);
        position: absolute;
        right: 100px;
        scale: 0.9;
    }

    .slide:last-child {
        filter: grayscale(100%);
        position: absolute;
        left: 100px;
        scale: 0.9;
    }

    .moraba::after {
        content: '';
        display: block;
        width: 8px;
        height: 8px;
        background: #f87f06;
        border-radius: 3px;
        position: absolute;
        right: -12px;
        top: 10px;
    }


    .style_comment:first-child,
    .style_comment:last-child {
        opacity: 0.4;
        width: 420px;
    }

    .style_comment:first-child {
        opacity: 0.2;
    }


    .new_project:first-child,
    .new_project:last-child {
        opacity: 0.4;
        width: 310px;
    }
}