/* screen mobile - smartphone */
@media only screen and (max-width: 320px) {
    #akun {
        max-width: 50% !important;
    }
    #avatar-akun {
        max-width: 40% !important;
    }
}
@media only screen and (max-width: 425px) {
    #akun,
    #avatar-akun {
        max-width: 40% !important;
    }
}
@media only screen and (max-width: 470px) {
    #calendar {
        padding: 0 2rem !important;
    }
}
@media screen and (max-width: 570px) {
    /* Halaman Pendaftaran */
    #pendaftaran-aken {
        width: 100% !important;
    }
    #pendaftaran-sukses {
        width: 100% !important;
    }

    /* Halaman AKEN */
    .title-text {
        padding: 17rem 3rem !important;
    }
    .title-text>p {
        max-width: 100% !important;
        font-size: .8rem;
    }
    #struktur {
        padding: 6rem 0 !important;
    }
    #aboutUs,
    #member,
    #visiMisi,
    #function,
    #goals,
    #agenda,
    #gabung-sekarang {
        padding: 6rem 1rem !important;
    }
    #calendar {
        padding: 0 7rem;
    }
    footer {
        padding: 3rem 1rem !important;
    }
    nav {
        padding: .5rem 1rem !important;
    }

    /* Halaman Admin */
    #nama-akun {
        display: none;
    }
    #avatar-akun {
        max-width: 40%;
    }
    #akun {
        max-width: 30%;
    }
    #admin-1 {
        display: none !important;
    }
    #admin-2 {
        display: block !important;
    }
}

/* screen mobile - tablet */
@media screen and (max-width: 991px) {
    /* Halaman AKEN */
    h1, .fs-1 {
        font-size: 1.5em !important;
    }
    h2, .fs-2 {
        font-size: 1.3em !important;
    }
    h3, .fs-3 {
        font-size: 1.2em !important;
    }
    h4, .fs-4 {
        font-size: 1.1em !important;
    }
    h5, .fs-5 {
        font-size: 1em !important;
    }
    h6, .fs-6 {
        font-size: 0.8em !important;
    }
    p, a {
        font-size: .8em;
    }
    nav {
        padding: .5rem 1rem;
    }
    footer {
        padding: 3rem 1rem !important;
    }
    .title-text {
        padding: 11rem 5rem;
    }
    .title-text > h1 {
        font-size: 1.5rem;
    }
    .title-text > p {
        max-width: 66%;
        font-size: .8rem;
    }
    .title-text > a {
        font-size: .8rem;
    }
    .section-tittle {
        text-align: left;
        letter-spacing: 1px !important;
    }
    .logo-kemen {
        width: 33.33333333%;
    }

    #aboutUs,
    #member,
    #visiMisi,
    #function,
    #goals,
    #struktur,
    #agenda,
    #gabung-sekarang {
        padding: 6rem 1rem !important;
    }

    #carousel-logo {
        padding: 0 1rem !important;
    }

    /* Halaman Admin */
    #nama-akun {
        display: none;
    }
    #avatar-akun {
        max-width: 50%;
    }
    #akun {
        max-width: 20%;
    }
}

/* screen tablet */
@media screen and (max-width: 1199px) {
    /* Halaman Pendaftaran */
    #pendaftaran-aken {
        width: 75%;
    }
    #pendaftaran-sukses {
        width: 75%;
    }

    /* Halaman AKEN */
    nav {
        padding: .5rem 1rem;
    }
    .title-text {
        padding: 18rem 7rem;
    }
    .title-text>p {
        max-width: 65%;
    }

    /* Halaman Admin */
    #nama-akun {
        display: none;
    }
    #avatar-akun {
        max-width: 50%;
    }
    #akun {
        max-width: 20%;
    }
    #admin-1 {
        display: inline;
    }
    #admin-2 {
        display: none;
    }
}

/* screen desktop */
@media screen and (min-width: 1200px) {
    /* Halaman Pendaftaran */
    #pendaftaran-aken {
        width: 50% !important;
    }
    #pendaftaran-sukses {
        width: 50% !important;
    }

    /* Halaman AKEN */
    .title-text > p {
        max-width: 40%;
    }
    .fungsi-kiri {
        margin-left: 13rem;
    }
    .fungsi-kanan {
        margin-right: 13rem;
    }

    /* Halaman Admin */
    #avatar-akun {
        max-width: 25%;
    }
    #akun {
        max-width: 25%;
    }
    #admin-1 {
        display: inline;
    }
    #admin-2 {
        display: none;
    }
}
@media screen and (min-width: 1900px) {
    #akun {
        max-width: 20%;
    }
}
@media screen and (min-width: 2500px) {
    #akun {
        max-width: 15% !important;
    }
}