main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-right: 2vw;
    padding-left: 2vw;


    .infoContainer {
        width: 100%;
        height: 20dvh;
        padding-top: 1dvh;
        min-height: max-content;

        display: grid;
        grid-template-columns: 2fr 1fr;

        .textContainer {
            grid-column: span 1;

            h2 {
                font-size: 2rem;
                font-weight: 800;
                margin: 0;
            }

            h3 {
                font-size: 0.9rem;
                font-weight: 400;
                margin-bottom: 0;
                color: var(--color-text-primary);
            }

            p {
                color: var(--color-text-secondary);
            }

        }

        .buttonContainer {
            grid-column: span 1;
            display: flex;
            justify-content: right;
            align-items: center;

            a {
                width: max-content;
                margin-right: 3vw;
                padding: 1vw;

                text-decoration: none;

                background-color: var(--color-button-secondary-bg);
                color: var(--color-button-secondary-text);

                border-radius: var(--radius-md);
                border: 1px solid var(--color-border);
                box-shadow: var(--shadow-md);

                &:hover {
                    background-color: var(--color-button-secondary-bg-hover);
                }
            }
        }
    }

    .filterContainer {
        width: 60%;
        min-width: max-content;
        height: 6dvh;

        display: flex;
        justify-content: space-evenly;
        align-items: center;

        border-radius: var(--radius-md);
        background-color: var(--color-surface);
        box-shadow: var(--shadow-md);
        border: 0.5px solid var(--color-border);

        .searchBox:focus-within {
            border: 3px solid var(--color-accent);
            box-shadow: var(--shadow-sm);
        }

        .searchBox {
            width: 50%;
            height: 70%;

            display: flex;
            align-items: center;
            border-radius: var(--radius-md);

            border: 0.5px solid var(--color-border);
            color: var(--color-badge-text);
            background-color: var(--color-badge-bg);

            /* To look like the one container, use focus-within to searchBox and erase the input's default style */
            /* https://developer.mozilla.org/ko/docs/Web/CSS/Reference/Selectors/:focus-within */
            &:focus-within {
                border: 2.5px solid var(--color-accent);
            }

            i {
                width: max-content;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                padding-left: 0.5rem;
                padding-right: 0.5rem;
                background: transparent;
            }

            input {
                width: 90%;
                height: 90%;
                border: none;
                outline: none;
                font-size: 16px;
                background: transparent;
            }
        }

        /* basic design of filter */
        .filter {
            width: 10%;
            height: 70%;
            
            button {
                width: 100%;
                height: 100%;
                font-weight: 500;

                border: 0.5px solid var(--color-border);
                border-radius: var(--radius-sm);
                color: var(--color-text-primary);
                background-color: var(--color-surface);
            }
        }

        /* style for dropdown contents */
        .dropdown {
            z-index: 3;

            .dropdownContent {
                width: 120%;
                height: max-content;
                display: none;
                margin-top: 0.5dvh;
                padding: 0.5dvw;
                grid-template-rows: auto;
                box-shadow: var(--shadow-md);
                background-color: var(--color-surface);
                border-radius: var(--radius-sm);

                label {
                    grid-row: span 1;
                    padding-top: 1dvh;
                    padding-bottom: 1dvh;
                    border-radius: var(--radius-sm);
                }

                label:hover {
                    background-color: var(--color-accent-soft);
                }
            }
        }

        /* style for sort button. Since there is no sort button now, just leave the style to use later */
        .sort {
            width: 10%;
            height: 70%;

            i {
                margin-right: 0.5dvw;
            }

            button {
                width: 100%;
                height: 100%;
                font-weight: 500;

                border: 0.5px solid var(--color-border);
                border-radius: var(--radius-sm);
                color: var(--color-text-primary);
                background-color: var(--color-accent-soft);
            }
        }

    }

    .projectContainer {
        width: 100%;
        height: 100dvh;
        min-height: max-content;
        padding-bottom: 10dvh;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 1fr 1fr;
        gap: 1.5vw;
        grid-auto-flow: row;

        .cardDeck {
            grid-column: span 1;
            grid-row: span 1;
            display: flex;
            justify-content: center;
            align-items: center;

            a {
                width: 90%;
                height: 84%;
                color: inherit;
                display: flex;
                justify-content: center;
                align-items: center;

                text-decoration: none;

                .card {
                    width: 100%;
                    height: 100%;
                    background-color: var(--color-surface);
                    box-shadow: var(--shadow-md);
                    border-radius: var(--radius-sm);
                    padding-left: 1rem;
                    padding-right: 1rem;

                    display: grid;
                    grid-template-rows: 5fr 1fr;

                    .cardTitleLine {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        span {
                            width: 10%;
                            min-width: max-content;
                            aspect-ratio: 1 / 1;
                            padding: 0.5 rem;

                            display: flex;
                            justify-content: center;
                            align-items: center;
                            border-radius: var(--radius-md);
                            background-color: var(--color-accent-soft);
                        }
                    }

                    .metaGroup {
                        span {
                            width: max-content;
                            padding-top: 0.2rem;
                            padding-bottom: 0.2rem;
                            padding-left: 0.4rem;
                            padding-right: 0.4rem;
                            margin-top: 0;
                            margin-right: 0.3rem;
                            background-color: var(--color-button-primary-bg);
                            color: var(--color-button-primary-text);
                            border: 1px solid var(--color-border);
                            border-radius: var(--radius-md);
                        }

                        span:first-child {
                            font-weight: 700;
                            color: var(--color-text-primary);
                            background-color: var(--color-accent-soft);
                        }
                    }

                    .roles {
                        width: max-content;
                        padding: 0.5rem;
                        padding-top: 0.2rem;
                        background-color: var(--color-bg);
                        color: var(--color-text-secondary);
                        font-weight: 500;
                        border-radius: var(--radius-md);
                    }

                    .stacks {
                        display: flex;
                        width: 100%;
                        height: max-content;

                        /* later, this stack's color will differ depending on the stack category  */
                        /* currently, just odd and even criteria */
                        p {
                            width: max-content;
                            padding-top: 0.2rem;
                            padding-bottom: 0.2rem;
                            padding-left: 0.4rem;
                            padding-right: 0.4rem;
                            margin-top: 0;
                            margin-right: 0.3rem;
                            background-color: var(--color-button-primary-bg);
                            color: var(--color-button-primary-text);
                            border: 1px solid var(--color-border);
                            border-radius: var(--radius-md);
                        }

                        p:nth-child(odd) {
                            background-color: var(--color-button-secondary-bg);
                            color: var(--color-button-secondary-text);

                        }
                    }

                    .result {
                        width: 100%;
                        display: inline-flex;
                        align-items: center;
                        border-top: 2px solid var(--color-border);

                        .dot {
                            width: 7px;
                            height: 7px;
                            margin: 7px;
                            background-color: var(--color-accent);
                            border-radius: 5px;
                        }
                    }
                }
            }

            .card:hover {
                /* move card a little bit up */
                /* https://developer.mozilla.org/ko/docs/Web/CSS/Reference/Properties/transform */
                transform: translateY(-5px);

                .cardTitleLine span {
                    color: var(--color-button-secondary-bg-hover);
                    background-color: var(--color-accent);
                }

                box-shadow: var(--shadow-lg)
            }
        }
    }
}

@media (max-width: 768px) {
    main {
        width: 90%;

        .infoContainer {
            height: auto;
            grid-template-columns: 1fr;
            gap: 1rem;
            padding-top: 2dvh;

            .textContainer h2 {
                font-size: 1.7rem;
            }

            .buttonContainer {
                justify-content: left;
            }
        }


        .projectContainer {
            height: auto;
            grid-template-columns: 1fr;
            gap: 1rem;
            width: 90%;
            padding-bottom: 6dvh;

            .cardDeck a .card {
                margin-left: 0;
                height: auto;

                .cardTitleLine {
                    flex-wrap: wrap;
                    gap: 0.5rem;
                }

                .stacks {
                    flex-wrap: wrap;
                }
            }
        }

    }
}

@media (max-width: 480px) {
    main {
        width: auto;
        padding-right: 1rem;
        padding-left: 1rem;

        .infoContainer {
            .textContainer {
                h2 {
                    font-size: 1.45rem;
                }

                p {
                    font-size: 0.95rem;
                    line-height: 1.6;
                }
            }

            .buttonContainer {
                width: 100%;

                a {
                    width: 100%;
                    margin-right: 0;
                    padding: 0.85rem 1rem;
                    text-align: center;
                    box-sizing: border-box;
                }
            }
        }

        .projectContainer {
            width: 100%;
            gap: 0.85rem;
            padding-bottom: 4dvh;

            .cardDeck a .card {
                width: 100%;
                padding-left: 0.85rem;
                padding-right: 0.85rem;

                .cardTitleLine h3 {
                    font-size: 1rem;
                    margin: 0;
                }

                .roles,
                .stacks p,
                .result p,
                .cardContent>p {
                    font-size: 0.92rem;
                }
            }
        }
    }
}