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

@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap");

@layer base {
  /* pendaftaran */
  input[type="number"] {
    border: none;
    outline: none;
    border-bottom: 0.2em solid #0284c7;
    background-color: #f1f5f9;
    border-radius: 0.2em 0.2em 0 0;
    padding: 4px;
    width: 220px;
    color: black;
  }

  label {
    @apply mb-2 block font-medium;
  }

  input[type="text"] {
    appearance: none;
    border: none;
    outline: none;
    border-bottom: 0.2em solid #0284c7;
    background-color: #f1f5f9;
    border-radius: 0.2em 0.2em 0 0;
    padding: 4px;
    width: 220px;
    color: black;
  }

  input[type="email"] {
    appearance: none;
    border: none;
    outline: none;
    border-bottom: 0.2em solid #0284c7;
    background-color: #f1f5f9;
    border-radius: 0.2em 0.2em 0 0;
    padding: 4px;
    width: 220px;
    color: black;
  }

  input[type="file"]::file-selector-button {
    @apply mr-4 border-none bg-blue-600 py-2 px-4 rounded-xl text-slate-100 cursor-pointer hover:bg-blue-700;
  }

  .formRegister div {
    @apply pb-3;
  }

  select {
    padding: 4px;
    border: none;
    border-bottom: 0.2em solid #0284c7;
    border-radius: 0.2em 0.2em 0 0;
    background: rgba(#0284c7, 0.2);
    box-shadow: 0 1px 3px -2px #9098a9;
    cursor: pointer;
    font-size: 16px;
  }
  /* pendaftaran end */

  /* info Car */
  td {
    @apply p-1 px-2;
  }
  /* info Car end */
}

@layer components {
  .fixnavbar {
    @apply bg-white bg-opacity-85 backdrop-blur-sm shadow-lg shadow-slate-700;
  }

  .atur-url {
    @apply flex justify-center items-center sm:mr-5 max-[640px]:mr-5;
  }

  .atur-svg {
    @apply w-8 h-8 grayscale transition ease-in-out duration-300;
  }

  .garis-kiri {
    content: "";
    width: 100px;
    height: 5px;
    background-color: black;
    border-radius: 10px;
    position: absolute;
    bottom: 0px;
    left: 290px;
    top: 22px;
  }

  .garis-kanan {
    content: "";
    width: 100px;
    height: 5px;
    background-color: black;
    border-radius: 10px;
    position: absolute;
    bottom: 0px;
    right: 290px;
    top: 22px;
  }

  .garis-bawah {
    content: "";
    width: 90px;
    height: 3px;
    background-color: black;
    border-radius: 20px;
    position: absolute;
    bottom: -5px;
  }

  .grid-pelajar1 {
    grid-template-areas:
      "img1 img3 img3 img4 img4"
      "img2 img3 img3 img5 img6";
  }

  .img-kegiatan1 {
    grid-area: img1;
    @apply w-full h-full bg-center bg-cover;
  }

  .img-kegiatan2 {
    grid-area: img2;
    @apply w-full h-full bg-center bg-cover;
  }

  .img-kegiatan3 {
    grid-area: img3;
    @apply w-full h-full bg-center bg-cover;
  }

  .img-kegiatan4 {
    grid-area: img4;
    @apply w-full h-full bg-center bg-cover;
  }

  .img-kegiatan5 {
    grid-area: img5;
    @apply w-full h-full bg-center bg-cover;
  }

  .img-kegiatan6 {
    grid-area: img6;
    @apply w-full h-full bg-center bg-cover;
  }

  .grid-pelajar2 {
    grid-template-areas:
      "img1 img2 img2"
      "img1 img3 img4"
      "img5 img3 img4"
      "img5 img3 img6";
  }

  .img-pelajar1 {
    grid-area: img1;
    @apply w-full h-full bg-center bg-cover;
  }

  .img-pelajar2 {
    grid-area: img2;
    @apply w-full h-full bg-center bg-cover;
  }

  .img-pelajar3 {
    grid-area: img3;
    @apply w-full h-full bg-center bg-cover;
  }

  .img-pelajar4 {
    grid-area: img4;
    @apply w-full h-full bg-center bg-cover;
  }

  .img-pelajar5 {
    grid-area: img5;
    @apply w-full h-full bg-center bg-cover;
  }

  .img-pelajar6 {
    grid-area: img6;
    @apply w-full h-full bg-center bg-cover;
  }

  .hov-img {
    @apply transition ease-in-out duration-300 hover:scale-95 hover:opacity-80;
  }
  /* khusus dark mode */

  /* #mode:checked ~ label div.ubah-bg{
        @apply bg-slate-700 ring-offset-white
    }

    #mode:checked ~ label .ubah-bg .switch span {
        @apply text-black
    }

    #mode:checked ~ label div.switch {
        @apply translate-x-6 bg-white
    } */

  /* khusus haburger menu */
  .active > span:nth-child(1) {
    @apply rotate-[48deg];
  }

  .active > span:nth-child(3) {
    @apply -rotate-[48deg];
  }

  .active > span:nth-child(2) {
    @apply scale-0 opacity-0;
  }

  nav ul.geser {
    transform: translateX(0%);
  }

  .hamburger-menu {
    @apply w-[30px] h-[3px] my-2 block bg-black rounded-xl;
  }

  .small {
    @apply absolute right-0 flex-col items-center justify-center pl-3 pt-5 gap-12 h-screen w-1/2 bg-[#549DBB] -z-20 translate-x-full transition duration-500 ease-in-out;
  }

  .all {
    @apply translate-x-0 bg-inherit flex-row z-10 h-full w-full static mt-0;
  }

  /* untuk program magang */
  .img-grid {
    @apply min-h-[230px] bg-center bg-cover rounded-2xl transition ease-in-out duration-300 hover:scale-95 hover:opacity-80 shadow-xl shadow-slate-600;
  }

  .text-mid {
    @apply h-full flex justify-center items-center cursor-pointer font-medium text-lg;
  }

  .img-prog {
    @apply min-h-[180px] max-[640px]:min-h-[150px] max-[640px]:min-w-36 min-w-44 bg-center max-[640px]:bg-bottom bg-cover rounded-xl;
  }

  .text-mid-prog {
    @apply h-full flex justify-center items-center text-white text-center;
  }

  .underscore {
    @apply w-full h-1 bg-sky-500 absolute -bottom-1;
  }
  /* untuk program magang end */

  /* rent car */
  .bgCar {
    @apply bg-[#7E8EF1];
  }

  .textTitleCar {
    @apply transition ease-in-out delay-75 hover:-translate-y-1 hover:scale-110 hover:bg-[#7E8EF1] duration-100 rounded-md basis-11 cursor-pointer flex justify-center items-center max-[640px]:p-1 sm:px-3 sm:py-0.5;
  }
  /* rent car end */
}