#content {
    background-color: var(--primary-color);
}

.website-main {
    background-color: var(--surface);
    .hero-section {
        min-height: 100vh; /* full browser height */
        background-color: var(--tertiary-color);
        color: var(--white);
        background-image: url(assets/hero_background.avif);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        display: flex;
        flex-direction: column;
        justify-content: center;/* horizontal center */
        align-items: center;/* vertical center */
        text-align: center;/* optional: center text */

        .hero-section-text {
            padding: 5%;
            backdrop-filter: grayscale(100%);
            border: 1px solid var(--galactic-purple);
            border-radius: 20px;
        }
    }
    .about-section {
        padding: 10px;
        background-color: var(--primary-color);
        color: var(--primary-contrast-color);
        .about-me-avatar {
            img {
                border-radius: 50%;
            }
        }
        .about-me-text {
            .calls_to_action_buttons {
                display: grid;
                grid-template-columns: 30% 30%;
                margin-top: 10px;
                gap: 10px;

                a, button {
                    width: 100%;
                }
            }
        }
    }
    .services-section {
        .featured-apps-article {
            background-color: var(--secondary-color);
            color: var(--secondary-contrast-color);
            padding: 10px;

            .featured-apps-grid {
                margin-top: 10px;
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 10px;

                .app-showcase {
                    padding: 10px;
                    border: 2px solid var(--grey);
                    border-radius: 10px;
                }
            }
        }
        .latest-artifacts-article {
            background-color: var(--primary-color);
            color: var(--primary-contrast-color);
            padding: 10px;

            .artifacts-grid {
                margin-top: 10px;
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 10px;

                .artifacts-showcase {
                    padding: 10px;
                    border: 2px solid var(--grey);
                    border-radius: 10px;
                }
            }
        }
        .new-blog-posts-article {
            background-color: var(--tertiary-color);
            color: var(--tertiary-contrast-color);
            padding: 10px;
            
            .blog-posts-grid {
                margin-top: 10px;
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 10px;

                .blog-showcase {
                    padding: 10px;
                    border: 2px solid var(--grey);
                    border-radius: 10px;
                }
            }
        }
        .services-section-right {
            padding: 10px;
        }
    }
}

/* Responsive Design */
/* Extra small devices (phones, 600px and down) like 385x854 */
@media only screen and (max-width: 600px) {
    .website-main {

        .about-section {

            .about-me-avatar {
                max-height: min-content;
                text-align: center;

                img {
                    width: 50%;
                }
            }
        }

        .services-section {
            .featured-apps-article {
                margin: var(--space-sm);
                border-radius: var(--space-md) var(--space-md) var(--space-xs) var(--space-xs);
            }
            .latest-artifacts-article {
                margin: var(--space-sm);
                border-radius: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-xs);
            }
            .new-blog-posts-article {
                margin: var(--space-sm);
                border-radius: var(--space-xs) var(--space-xs) var(--space-md) var(--space-md);
            }
        }
    }
}

/* Small devices (portrait tablets and large phones, 600px to 768px) */
@media only screen and (min-width: 600px) {
    .website-main {

        .about-section {
            gap: 10px;
            display: flex;

            .about-me-avatar {
                max-height: min-content;

                img {
                    border-radius: 50%;
                }
            }

            .about-me-text {
                margin: auto;
            }
        }

        .services-section {
            display: grid;
            grid-template-columns: 1fr 240px;

            .featured-apps-article {
                border-radius: 0 var(--space-md) var(--space-xs) 0;
                margin: var(--space-sm) 0 0 0;
            }
            .latest-artifacts-article {
                border-radius: 0 var(--space-xs) var(--space-xs) 0;
                margin: var(--space-sm) 0 var(--space-sm) 0;
            }
            .new-blog-posts-article {
                border-radius: 0 var(--space-xs) var(--space-md) 0;
                margin: var(--space-sm) 0 var(--space-sm) 0;
            }
        }
    }
}

/* Medium devices (landscape tablets, 768px to 992px) like 854x385 */
/*@media only screen and (min-width: 768px) {}*/

/* Large devices (laptops/desktops, 992px to 1200px) */
/*@media only screen and (min-width: 992px) {}*/

/* Extra large devices (large desktops, 1200px and up) */
/*@media only screen and (min-width: 1200px) {}*/