/* Import Components */
@import url('components/_reset.css');
@import url('components/_base.css');
@import url('components/_navigation.css');
@import url('components/_buttons.css');


h1 {
    color: var(--orange);
    text-align: center;
}

.main-blog {
    max-width: 1320px;
    width: 100%;
    margin: 64px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px 48px;
}

#nav {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#content {
    max-width: 880px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Search Form */
.search-container {
    display: flex;
    gap: 6px;
    padding: 24px;
    align-items: center;
    justify-content: center;

    .search-form {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 6px;
        max-width: 100%;

        input {
            background-color: var(--pageBackGround);
            border-radius: 20px;
            border: 1px solid var(--borderColor);
            padding: 12px;
            color: var(--textColor);
            font-size: 20px;
            width: 100%;
            transition: outline 0.3s linear;
            outline: 1px solid transparent;

            &:focus {
                outline: 1px solid var(--orange);
            }
        }

        .submit-search-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--pageBackGround);
            cursor: pointer;
            border-radius: 100%;
            border-color: transparent;
            transition: border-color, background-color 0.3s linear;
            width: 50px;
            height: 50px;

            &:hover {
                border-color: var(--textColor);
                background-color: var(--borderColor);
            }

            img {
                width: 100%;
                height: 100%;

                &:focus {
                    outline: none;
                    border: none;
                }
            }
        }
    }
}

/* Posts */
.posts-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;

    .post-container {
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 8px;

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

            .title {
                a {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    gap: 12px;
                }

                h2 {
                    color: var(--white);
                    font-size: 126x;
                    margin: 0;
                    font-weight: 400;
                    transition: transform 0.1s linear;

                    &:hover {
                        color: var(--orange);
                        transform: scale(1.04);
                    }
                }

                img {
                    transition: transform 0.1s linear;

                    &:hover {
                        transform: scale(1.04);
                    }
                }
            }
        }

        .blog-date {
            font-size: 12px;
            font-weight: 300;
            color: var(--textColor);
            white-space: nowrap;
        }

        .excerpt {
            font-size: 16px;
            line-height: 180%;
            color: var(--halfWhite);
        }
    }
}

@media screen and (max-width: 1280px) {
    .main-blog {
        margin: 40px auto;
        gap: 20px;
        padding: 20px 20px;
    }
}

@media screen and (max-width: 768px) {
    h1 {
        font-size: 24px;
    }
    /*layout*/
    .main-blog {
        gap: 24px 0;
        margin: 20px auto;
        padding: 20px;
    }

    #nav {
        height: 80px;
    }

    .search-container {
        gap: 12px;
        padding: 12px 16px;

        .search-form {
            gap: 12px;
            max-width: 100%;

            input {
                padding: 8px 12px;
                font-size: 16px;
            }

            .submit-search-btn {
                width: 40px;
                height: 40px;
            }
        }
    }

    /* Posts */
    .posts-container {
        gap: 20px;

        .post-container {
            padding: 12px 16px;
            gap: 8px;

            .header {
                .title {
                    a {
                        gap: 8px;
                    }

                    h2 {
                        font-size: 16px;
                    }

                    img {
                        width: 32px;
                        height: 32px;
                    }
                }
            }
        }
    }

}