/* ---------------------------------------------------------------------------------------------------------------- */
/* Media Query Dengan Lebar 1200 piksel (Sudah) */
/* ---------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
  /* ukuran background gambar pada login */
  body {
    /* mengatur ukuran background dalam mode cover */
    background-size: 115%;

    /* memunculkan scroll bar jika diperlukan */
    overflow-y: auto;
  }

  /* Mengatur untuk layar dengan lebar maksimal 767px (ukuran layar mengecil) */
  .cardLogin {
    /* ukuran font 10 point */
    font-size: 10pt;

    /* float kosong atau tidak ada */
    float: none;

    /* margin agar elemen berada di tengah layar */
    margin: 14% auto;

    /* tinggi 63 vertical horizontal */
    height: 48vh;

    /* lebar media 150% */
    width: 100%;

    /* lebar maksimal 400 piksel */
    max-width: 400px;
  }

  /*responsive gambar pada kelas gambar */
  .image img {
    /* margin atas 80% */
    margin-top: 80%;
    /* margin kiri 10% */
    margin-left: 50%;
    /* lebar gambar 180 piksel */
    width: 300px;
  }

  /* responsive button siswa dan button daftar */

  .btn-siswa,
  .btn-daftar {
    /* menyesuaikan ukuran tombol button guru, button siswa, dan button daftar */
    width: 80%;
  }

  /* responsive button guru */

  .btn-guru {
    /* menyesuaikan ukuran tombol button guru, button siswa, dan button daftar */
    top: 90px;
    width: 80%;
  }

  /* spasi registrasi */

  .spasi_reg {
    margin-top: 0;
  }

  /* lebar input dan tombol registrasi */

  .form-select {
    width: 120px;
  }
}
/* ---------------------------------------------------------------------------------------------------------------- */
/* Media Query Dengan Lebar 1000 piksel (Sudah) */
/* ---------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 1000px) {
  /* ukuran background gambar pada login */
  body {
    /* mengatur ukuran background dalam mode cover */
    background-size: cover;

    /* memunculkan scroll bar jika diperlukan */
    overflow-y: auto;
  }

  /* Mengatur untuk layar dengan lebar maksimal 767px (ukuran layar mengecil) */
  .cardLogin {
    /* ukuran font 10 point */
    font-size: 10pt;

    /* float kosong atau tidak ada */
    float: none;

    /* margin agar elemen berada di tengah layar */
    margin: 14% auto;

    /* tinggi 63 vertical horizontal */
    height: 59vh;

    /* lebar media 150% */
    width: 100%;

    /* lebar maksimal 400 piksel */
    max-width: 400px;
  }

  /*responsive gambar pada kelas gambar */
  .image img {
    /* margin atas 80% */
    margin-top: 85%;
    /* margin kiri 10% */
    margin-left: 50%;
    /* lebar gambar 180 piksel */
    width: 250px;
  }

  /* responsive button siswa dan button daftar */

  .btn-siswa,
  .btn-daftar {
    /* menyesuaikan ukuran tombol button guru, button siswa, dan button daftar */
    width: 80%;
  }

  /* responsive button guru */

  .btn-guru {
    /* menyesuaikan ukuran tombol button guru, button siswa, dan button daftar */
    top: 90px;
    width: 80%;
  }

  /* spasi registrasi */

  .spasi_reg {
    margin-top: 0;
  }

  /* lebar input dan tombol registrasi */

  .form-select {
    width: 120px;
  }
}
/* ---------------------------------------------------------------------------------------------------------------- */
/* Media Query Dengan Lebar 850 piksel (Sudah) */
/* ---------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 850px) {
  /* ukuran background gambar pada login */
  body {
    /* mengatur ukuran background dalam mode cover */
    background-size: cover;

    /* memunculkan scroll bar jika diperlukan */
    overflow-y: auto;
  }

  /* Mengatur untuk layar dengan lebar maksimal 767px (ukuran layar mengecil) */
  .cardLogin {
    /* ukuran font 10 point */
    font-size: 10pt;

    /* float kosong atau tidak ada */
    float: none;

    /* margin agar elemen berada di tengah layar */
    margin: 20% auto;

    /* tinggi 63 vertical horizontal */
    height: 60vh;

    /* lebar media 150% */
    width: 100%;

    /* lebar maksimal 400 piksel */
    max-width: 400px;
  }

  /*responsive gambar pada kelas gambar */
  .image img {
    /* margin atas 80% */
    margin-top: 120%;
    /* margin kiri 10% */
    margin-left: 10%;
    /* lebar gambar 180 piksel */
    width: 200px;
  }

  /* responsive button siswa dan button daftar */

  .btn-siswa,
  .btn-daftar {
    /* menyesuaikan ukuran tombol button guru, button siswa, dan button daftar */
    width: 80%;
  }

  /* responsive button guru */

  .btn-guru {
    /* menyesuaikan ukuran tombol button guru, button siswa, dan button daftar */
    top: 90px;
    width: 80%;
  }

  /* spasi registrasi */

  .spasi_reg {
    margin-top: 0;
  }

  /* lebar input dan tombol registrasi */

  .form-select {
    width: 120px;
  }
}
/* ---------------------------------------------------------------------------------------------------------------- */
/* Media Query Dengan Lebar 700 piksel (Sudah) */
/* ---------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 700px) {
  /* ukuran background gambar pada login */
  body {
    /* mengatur ukuran background dalam mode cover */
    background-size: cover;

    /* ukuran background */
    background-size: 155%;

    /* memunculkan scroll bar jika diperlukan */
    overflow-y: auto;
  }

  /* Mengatur untuk layar dengan lebar maksimal 767px (ukuran layar mengecil) */
  .cardLogin {
    /* ukuran font 10 point */
    font-size: 10pt;

    /* float kosong atau tidak ada */
    float: none;

    /* margin agar elemen berada di tengah layar */
    margin: 20% auto;

    /* tinggi 63 vertical horizontal */
    height: 59vh;

    /* lebar media 150% */
    width: 100%;

    /* lebar maksimal 400 piksel */
    max-width: 400px;
  }

  /*responsive gambar pada kelas gambar */
  .image img {
    /* margin atas 80% */
    margin-top: 120%;
    /* margin kiri 5% */
    margin-left: 0;
    /* lebar gambar 180 piksel */
    width: 180px;
  }

  /* responsive button siswa dan button daftar */

  .btn-siswa,
  .btn-daftar {
    /* menyesuaikan ukuran tombol button guru, button siswa, dan button daftar */
    width: 80%;
  }

  /* responsive button guru */

  .btn-guru {
    /* menyesuaikan ukuran tombol button guru, button siswa, dan button daftar */
    top: 90px;
    width: 80%;
  }

  /* spasi registrasi */

  .spasi_reg {
    margin-top: 0;
  }

  /* lebar input dan tombol registrasi */

  .form-select {
    width: 120px;
  }
}
/* ---------------------------------------------------------------------------------------------------------------- */
/* Media Query Dengan Lebar 500 piksel (Sudah)*/
/* ---------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 500px) {
  /* ukuran background gambar pada login */
  body {
    /* mengatur ukuran background dalam mode cover */
    background-size: cover;

    /* ukuran background */
    background-size: 215%;

    /* memunculkan scroll bar jika diperlukan */
    overflow-y: auto;
  }

  /* Mengatur untuk layar dengan lebar maksimal 767px (ukuran layar mengecil) */
  .cardLogin {
    /* ukuran font 10 point */
    font-size: 10pt;

    /* float kosong atau tidak ada */
    float: none;

    /* margin agar elemen berada di tengah layar */
    margin: 25% auto;

    /* tinggi 63 vertical horizontal */
    height: 59vh;

    /* lebar media 150% */
    width: 100%;

    /* lebar maksimal 400 piksel */
    max-width: 400px;
  }

  /*responsive gambar pada kelas gambar */
  .image img {
    /* margin atas 80% */
    margin-top: 140%;
    /* margin kiri 5% */
    margin-left: 0;
    /* lebar gambar 180 piksel */
    width: 180px;
  }

  /* responsive button siswa dan button daftar */

  .btn-siswa,
  .btn-daftar {
    /* menyesuaikan ukuran tombol button guru, button siswa, dan button daftar */
    width: 100%;
  }

  /* responsive button guru */

  .btn-guru {
    /* menyesuaikan ukuran tombol button guru, button siswa, dan button daftar */
    top: 90px;
    width: 100%;
  }

  /* spasi registrasi */

  .spasi_reg {
    margin-top: 0;
  }

  /* lebar input dan tombol registrasi */

  .form-select {
    width: 120px;
  }
}
/* ---------------------------------------------------------------------------------------------------------------- */
/* Media Query Dengan Lebar 400 piksel (Sudah) */
/* ---------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 400px) {
  /* ukuran background gambar pada login */
  body {
    /* mengatur ukuran background dalam mode cover */
    background-size: cover;

    /* ukuran background */
    background-size: 270%;

    /* memunculkan scroll bar jika diperlukan */
    overflow-y: auto;
  }

  /* Mengatur untuk layar dengan lebar maksimal 767px (ukuran layar mengecil) */
  .cardLogin {
    /* ukuran font 10 point */
    font-size: 10pt;

    /* float kosong atau tidak ada */
    float: none;

    /* margin agar elemen berada di tengah layar */
    margin: 25% auto;

    /* tinggi 63 vertical horizontal */
    height: 67vh;

    /* lebar media 150% */
    width: 100%;

    /* lebar maksimal 400 piksel */
    max-width: 400px;
  }

  /*responsive gambar pada kelas gambar */
  .image img {
    /* margin atas 80% */
    margin-top: 140%;
    /* margin kiri 5% */
    margin-left: 0;
    /* lebar gambar 180 piksel */
    width: 180px;
  }

  /* responsive button siswa dan button daftar */

  .btn-siswa,
  .btn-daftar {
    /* menyesuaikan ukuran tombol button guru, button siswa, dan button daftar */
    width: 100%;
  }

  /* responsive button guru */

  .btn-guru {
    /* menyesuaikan ukuran tombol button guru, button siswa, dan button daftar */
    top: 90px;
    width: 100%;
  }

  /* spasi registrasi */

  .spasi_reg {
    margin-top: 0;
  }

  /* lebar input dan tombol registrasi */

  .form-select {
    width: 120px;
  }
}