/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    /* GENERAL STYLING */
    .header-left > #header-title > a {
        display: none;
    }
    .header-mid {
        display: block; 
        margin: auto; 
    }
    .header-mid > * {
        padding: 1rem;
    }
    .header-right {
        display:none;
    }
    footer {
        bottom: unset;
        padding: 0 1rem;
    }
    .footer-left {
        display: none;
    }
    .footer-mid {
        gap: 0rem;
        margin: 1rem auto;
    }
    .footer-mid > div {
        align-items: center;
        gap: 25px;
        margin: auto 0;
    }
    .footer-mid > div > p {
        margin: 0;
        max-width: 12rem;
    }
    footer .location > iframe {
        width: 18rem;
        margin: 10px 0;
    }
    .row {
        --bs-gutter-x: 0rem;
    }
    /* GENERAL STYLING */

    /*index.html*/ 
    #index-body {
        overflow-y: scroll; 
    }
    .index-container {
        margin: 3rem 0.5rem;
    }
    .index-title {
        padding-top: 1rem;
    }
    .index-logo {
        width: 5rem;
        position: relative;
        left: 2rem;
        filter: drop-shadow(5px 5px 1px black);
    }
    .judul {
        /* font-size: 1rem; */
        /* left: -3rem; */
        position: relative;
    }
    .index-aboutme {
        max-width: 17em;
    }
    .index-content {
        gap: 1rem;
        margin-top: 1rem;
    }
    .index-aboutme > p{
        padding: 5px 10px !important;
        /* font-size: 14px !important; */
        margin: auto;
    }
    #social-button {
        border:1px solid aquamarine;
        background: #32586d;
        border-radius: 15px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
        filter: drop-shadow(1px 1px 10px aqua);
        margin: 1rem auto;
        max-width: 17em;
    }
    .frame {
        padding: 0 0.5rem;
    }
    .frame .summary > p {
        font-size: 1rem;
    }
    .proyek {   
        justify-content: center;
    }
    /* .menu > a > * {
        width: 5.75rem;
        height: 8rem;
    } */
    .index-summary {
        font-size: 1rem;
    }
    /*index.html*/

    /* about.html */
    #about-container {
        margin: 0;
    }
    .about-content {
        padding-top: 3rem;
    }
    #legalities {
        width: 18.5rem;
        height: 35vh;
    }
    .about-logo {
        width: 4rem;
        filter: drop-shadow(5px 5px 1px black);
    }
    .about-logo.web {
        display: none;
    }
    .about-logo.mobile {
        display: inline !important;
    }
    #history_mobile > img {
        width: -webkit-fill-available;
        position: relative;
        z-index: 1;
    }
    .running-img .content-title {
        margin-top: -2.5rem;
        font-size: 1rem;
    }
    .running-img > marquee {
        max-width: 18em;
    }
    .running-img > marquee:nth-child(2) {
        margin-bottom: 3rem;
    }
        /* Iframe reference */
        #legalities-body p {
            margin: 0;
            font-size: 1rem;
        }
        #legalities-body > .legalities {
            padding: 0;
        }
        /* Iframe reference */
    /* about.html */

    /* project.html */
    #carouselExampleCaptions iframe {
        width: -webkit-fill-available;
    }
        /* ALL Iframe references from project.html */
        #machine-body h1, #product-body h1, #service-body h1, #legalities-body h1  {
            font-size: 2rem;
            margin: 1rem auto;
        }
        #machine-body p, #product-body p, #service-body p {
            font-size: 1rem;
        }
        /* ALL Iframe references from project.html */

    /* project.html */
}

@media only screen and (min-width: 768px) {
    /* GENERAL STYLING */

    /* GENERAL STYLING */
    /* index.html */
    .index-content {
        gap: 0;
        margin-top: 1rem;
    }
    /* index.html */
}
    
@media only screen and (min-width: 1700px) {
    /* GENERAL STYLING */
    footer {
        bottom: 0;
    }
    /* GENERAL STYLING */

    /* index.html */
    .index-container {
        background-size: cover;
    }
    /* index.html */
    
    /* about.html */

    /* about.html */
}