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

/* font faces */

@font-face {
 font-family: 'dobai';
 src: url('/src/fonts/DUBAI-REGULAR.TTF');
 font-style: normal;
 font-weight: normal;
}

@font-face {
 font-family: 'dobai';
 src: url('/src/fonts/DUBAI-BOLD.TTF');
 font-style: normal;
 font-weight: bold;
}

/* layers */

* {
 @apply m-0 p-0 box-border;
}

@layer base {
 body {
     @apply font-dobai bg-gradient-to-l from-[#114480] from-[15.5%] to-[#000000] text-white;
 }

 body > section {
     @apply relative;
 }

 button {
     @apply border-none outline-none;
 }

 ul {
     @apply list-none;
 }
}

@layer components {
 .button {
     @apply w-fit px-8 py-2 bg-primary text-lg self-end rounded-md;
 }
 
 .STitle {
     @apply w-full text-center text-3xl font-bold pt-6;
 }
}

@layer utilities {
 .bg-SConfig {
     @apply bg-no-repeat bg-center bg-cover;
 }

 .transition-click {
     @apply transform filter scale-100 brightness-100 transition-[transform,_filter] duration-200 hover:brightness-110 hover:scale-105 active:scale-95;
 }

 .transition-link {
     @apply cursor-pointer underline underline-offset-4 decoration-transparent transform transition-[transform,_text-decoration-color] duration-200 hover:scale-105 hover:decoration-[#EBA400] active:scale-95;
 }
}

#S2nd_section > .item {
 @apply flex w-[150px] flex-col items-center;
}

#S2nd_section > .item > .vector {
 @apply flex flex-row items-center justify-center w-[70px] h-[70px] bg-primary rounded-full;
}

#S2nd_section > .item > .vector > img {
 @apply w-[50%] h-auto;
}

#S2nd_section > .item > .value {
 @apply text-textColor text-2xl mt-2 text-center;
}

#S2nd_section > .item > .title {
 @apply text-lg text-white;
}

/**/

#S3th_section .layers > .Container > .card {
 @apply w-[260px] h-[450px] bg-secondary flex-none;
}

#S3th_section .layers > .Container > .card > img {
 @apply w-full h-auto;
}

#S3th_section .layers > .Container > .card > h2 {
 @apply w-full text-center font-bold text-lg py-5;
}

#S3th_section .layers > .Container > .card > p {
 @apply text-sm text-center px-5;
}

/**/

#S4th_section > .layerSelector > .item {
 @apply relative flex w-[120px] h-fit flex-row items-center justify-center text-2xl font-bold border-4 border-activeButton rounded-md flex-none overflow-hidden;
}

#S4th_section > .layerSelector > .item > input {
 @apply absolute w-full h-full opacity-0;
}

#S4th_section > .layerSelector > .item > p {
 @apply w-full h-full bg-primary text-center py-2 transition-colors duration-150 ease-in-out;
}

#S4th_section > .layerSelector > .item > input:checked + p {
 @apply bg-activeButton;
}

#S4th_section > .layers > .layer > .card {
 @apply relative w-[300px] h-[500px] bg-secondary border-4 border-activeButton overflow-hidden;
}

#S4th_section > .layers > .layer > .card > img {
 @apply block w-full h-auto;
}

#S4th_section > .layers > .layer > .card > span {
 @apply absolute text-sm text-[#0E5BB3] py-3 px-6 bg-[#B1B1B1] right-0 -mt-5;
}

#S4th_section > .layers > .layer > .card > .par {
 @apply text-[15px] px-3 mt-9;
}

#S4th_section > .layers > .layer > .card > .moreDiv {
 @apply absolute flex items-center justify-center bottom-0 py-3 border-t-[1px] border-t-activeButton w-full;
}

#S4th_section > .layers > .layer > .card > .moreDiv > p {
 @apply text-sm text-[#EBA400];
}

#S4th_section > .layers > .layer {
 @apply flex flex-row justify-evenly gap-x-3 gap-y-9 flex-wrap;
}

/**/

#S5th_section > .Container > .item {
 @apply flex w-[450px] h-[250px] bg-secondary flex-row justify-between pr-5 rounded-md overflow-hidden;
}

#S5th_section > .Container > .item > img {
 @apply w-[45%] h-full;
}

#S5th_section > .Container > .item > div {
 @apply flex flex-col gap-y-5
}

#S5th_section > .Container > .item .title {
 @apply text-activeButton pt-8
}

#S5th_section > .Container > .item .auther {
 @apply text-[#9C9C9C] text-xs;
}

#S5th_section > .Container > .item .par {
 @apply text-sm text-white pl-3;
}