/*
    filename: mobile.css
    author: Anh-Quan Nguyen
    created: 17/02/2024
    last modified: 29/02/2024
    description: CSS styles for mobile rendering
*

/* This CSS applies for screen that smaller 768px in width - mobile devices */
@media only screen and (max-width: 768px) {
    /* ========== CSS STYLES FOR ALL WEBPAGES ========== */
    /* Header styles */
    header {
        /* Aligning the website name and navigation bars separate */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    /* Letter spacing for h1 */
    h1 {
        font-size: 1.7em;
        letter-spacing: 2px;
    }

    /* Website name width area */
    .website-name {
        width: 100%; 
    }

    /* Navigation bar area */
    .navigation-bar {
        margin-top: 10px;
        width: 100%;
    }

    nav ul {
        /* Aligning navigation links, each link has each own space */
        display: flex;
        flex-direction: column;
        gap: 20px;
        /* Distance between navigation links */
        justify-content: space-between;
        align-items: normal;
        /* Clear the bullets before the navigation links */
        list-style-type: none;
        font-size: 1em;
        padding: 0;
    }

    /* Change the font weight and colour of a navigation link when user hovers their mouse */
    .navigation-links:hover {
        font-size: 1em;
    }

    /* Active pages will have different colour */
    .navigation-active {
        font-size: 1em;
    }

    /* Footer styles */
    footer {
        color: white;
        text-align: center;
        padding: 1rem 0.625rem;
    }

    /* ========== CSS STYLES FOR "HOMEPAGE" WEBPAGE ========== */
    /* Align all contents: vertically centered */
    .about-main-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1vw;
    }

    /* Introduction contrnt style */
    .introduction {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        /* Remove floats */
        float: none;
        width: 90%;
        text-align: center;
        animation: slide 1.5s;
    }

    /* Introduction text style */
    .introduction h2 {
        font-size: 1.75em;
    }

    /* Introduction text font style */
    .introduction p {
        font-size: 1em;
    }

    /* Image styles */
    .image-introduction {
        float: none;
        width: 80%;
        /* Horizontally centered the image */
        display: flex;
        justify-content: center;
    }

    /* Clear floats of main content */
    .about-main-content::after {
        content: "";
        clear: both;
        display: block;
    }

    /* Set the width of a profile picture, and made the picture become circular */
    #profile-picture {
        width: 80%;
        border-radius: 100%;
        /* Animation for the image: Appear in 1.5s, then change border each 3s */
        animation: 1.5s image-slide ease-in-out, 3s ease 1.5s infinite image-border-loop ;
    }

    /* Name highlight styles */
    #name-highlight {
        display: inline-block; /* Make sure that the highlight doesn't break the text to new line */
        padding: 0.625rem;
        color: white;
        border-radius: 10px;
    }

    /* Clear the bullets and reset the padding before the introduction list */
    .introduction-list {
        list-style-type: none;
        padding-inline-start: 0;
    }

    /* Introduction list style */
    ul.introduction-list li {
        display: inline-block; /* Display each item on the list at the same line */
        padding: 1rem;
        color: white;
        border-radius: 10px;
        width: fit-content; /* Fit with text inside */
        margin-bottom: 1rem; /* Gap between lines, when user's screen is small, some items will be thrown to a new line */
        font-size: 1em;
    }

    /* ========== CSS STYLES FOR "PROJECTS" WEBPAGE ========== */

    /* Main hometown content style */
    .main-hometown-content {
        padding: 1.25rem;
    }

    /* Heading 1 of hometown content style */
    .main-hometown-content h1 {
        font-size: 2rem;
    }

    /* Article (hometown page) style */
    .main-hometown-content article {
        margin-top: 3vh;
        margin-bottom: 3vh;
    }

    /* Section (hometown page) style */
    .main-hometown-content section {
        width: 100%;
        border-radius: 10px;
        color:white;
        padding: 1rem;
    }

    /* Aside (hometown page) style */
    .main-hometown-content aside {
        width: 100%;
        float: none;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    /* Heading 2 of article (hometown page) style */
    .main-hometown-content article h2 {
        font-size: 1.5rem;
        margin-bottom: 1.5em;
        text-align: center;
    }

    /* Heading 3 of article (hometown page) style */
    .main-hometown-content article h3 {
        font-size: 1.15rem;
        margin-bottom: 0.5em;
    }

    /* Heading 3 of aside (hometown page) style */
    .main-hometown-content aside h3 {
        font-size: 1.15rem;
        margin-bottom: 0.5em;
    }

    /* Paragraphs in hometown page style */
    .main-hometown-content article p, .main-hometown-content article ul, .main-hometown-content aside p {
        font-size: 1rem;
        margin-bottom: 0.5em;
    }

    .image-article {
        max-width: 100%;
    }
    /* Article image style */
    .image-article img {
        width: 100%;
        height: auto;
    }

    .project-time {
        font-size: 1.3rem;
        font-weight: normal;
        display: block;
        font-style: italic;
    }

    /* ========== CSS STYLES FOR "ABOUT ME" WEBPAGE ========== */

    /* Padding for main content main content of about me page */
    .about-me-main-content {
        padding: 1.25rem;
    }

    /* Heading 2 section styles (about me page) */
    .about-me-main-content section h2 {
        font-size: 2rem;
        text-align: center;
        margin-bottom: 2rem;
    }

    /* Heading 3 section styles (about me page) */
    .about-me-main-content section h3 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    /* Paragraph section styles (about me page) */
    .about-me-main-content section p {
        font-size: 1.1rem;
    }

    /* Left content size of achievement box */
    .left-content {
        flex: 1;
    }

    /* Right content size of achievement box */
    .right-content {
        flex: 1;
    }

    /* Left content size of achievement box */
    .about-me-main-content aside img {
        width: 100%;
        height: auto;
    }

    /* Align items in achievement box into centered vertically */
    .content-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Align content cards with equal gaps */
    .content-cards-container {
        flex-direction: column;
    }

    /* Content card style */
    .content-card {
        width: 100%;
        border-radius: 10px;
        padding: 1.5rem;
        color: white;
        text-align: center;
    }
    /* Form container styles */
    .form-container {
        /* Centered the form to the central of the screen */
        display: flex;
        justify-content: center;
        text-align: left;
        margin-top: 2rem;
    }

    /* Form width */
    form {
        width: 100%;
    }
}