/* Fonts here */
@font-face {
    font-family: 'Wild_Words_Bold_Italics';
    src: url(wild_words_bold_italics.ttf);
}

@font-face {
    font-family: 'Wild_Words_Regular';
    src: url(wild_words_regular.ttf);
}

@font-face {
    font-family: 'Wild_Words_Italics';
    src: url(wild_words_italics.ttf);
}

#home-page {

    #home-nav-link {
    color: var(--red) !important;
}

    #welcome {
        background-color: var(--black);

        .flex_container {
            display: flex;
            gap: 30px;
            flex-wrap: wrap;
            justify-content: center;
            text-align: center;

            .text_content {
                max-width: 650px;
            }

            .image_normal {
                border-radius: 20px;
            }


        }

    }

     #latest-blogs {
        background-color: #323232;
        max-width: 100%;

        .flex_container {
            max-width: 1300px;
            margin: 0 auto;
            display: flex;
            gap: 100px;
            flex-wrap: wrap;
            justify-content: center;
            text-align: center;

            button {
                a {
                    color: var(--white);
                };

                a:hover {
                    color: var(--red);
                };
            };

            .image_normal {
                max-width: 280px;
                margin-bottom: 20px;
                padding-top: 20px;
                border-radius: 40px 40px 80px 80px;
            };

        };

        .summary {
                display: -webkit-box;
                max-width: 320px;
                line-clamp: 3;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
                overflow: hidden;
                padding-bottom: 0;
            }

        .heading {
            text-align: center;
        }

        .character_name {
            text-shadow: 0 2px 2px var(--black);
        }

    }

    #latest-game {
        max-width: 100%;
        background-image: url(../assets/images/nier-automata.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: rgba(0, 0, 0, 0.3);
        background-blend-mode: darken;

        .flex_container {
            max-width: 1300px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: flex-start;

            .text_content {
                padding-left: 2px;
                padding-right: 2px;
                .heading {
                    color: var(--white);
                }

                .paragraph {
                    max-width: 600px;
                    color: var(--white);
                }
            };

        };

    };

@media screen and (min-width: 320px) {

    #welcome {
        text-align: center;
    }

     #latest-blogs {
        .flex_container {
            gap: 60px;

        .image_normal {
            max-width: 270px;
        };
     };

     };

     #latest-game {
        .flex_container {
            .text_content {
                text-align: center;
            };
        };
     };

};

@media screen and (min-width: 425px) {

    #latest-blogs {
        .flex_container {

        .image_normal {
            max-width: 280px;
        };
     };

     };

     #latest-game {
        .flex_container {
            .text_content {
                text-align: left;
            };
        };
     };

};

@media screen and (min-width: 1155px) {
     #latest-blogs {
        .flex_container {
            gap: 100px;
     }

     }

};

@media screen and (min-width: 1285px) {
    #welcome {
        .flex_container {
            text-align: left;
            .image_normal {
                margin-top: -5px;
            };
        };
    };
};

@media screen and (min-width: 1600px) {
    #latest-game {
        padding-top: 150px;
        padding-bottom: 150px;
    }
};

};