/************************************************************
 *  File name   : indexMediaQueries.css                     *
 *  Author      : Yohanes Benny Bennedictus                 *
 *  Date        : June, 26 2025                             *
 *  Description : CSS rules used for managing the           *
 *                the layout of small screen resolution     *
*************************************************************/

@media screen and (max-width: 678px) {
    header > h2 { font-size: 1em; }
    nav a { font-size: 1.2em; }
    main { grid-template-rows: auto 1fr repeat(2, 1fr); }
    main > button { width: 40%; }
    main > img { margin-top: 70px; }
    main > h1 {
        font-size: 3em;
        margin-top: 70px;
        align-self:self-start;
    }
    
    #fb, #ig, #tiktok, #wa, #yt {
        width: 40px;
        height: 40px;
    }
    #social-media { min-width: 0; }
    footer { height: 70px; }
    #copyright > p { font-size: 0.7em;}
}