.hero-banner {
    display: flex;
    justify-content: center;
    max-width: 100%;
}

.hero-banner img {
    width: 100%;
}

.fnafone-title h1 {
    text-align: center;
    margin: 20px 0;
}

.fnafone-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.fnafone {
    width: 50%;
    text-align: right;
}

.fnafone p {
    text-align: right;
}

.fnafone-pic {
    width: 50%;
    max-width: 400px;
}

.fnafone-pic img {
    width: 100%;
    border: 4px solid #ffffff;
    border-radius: 10px;
}

.fnafone-font {
    display: flex;
    justify-content: center;
    width: 60%;
    margin: 0 auto;
    padding-bottom: 10%;
}


/*2*/
.fnaftwo-title h1 {
    margin: 20px 0;
}

.fnaftwo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

.fnaftwo {
    width: 50%;
    text-align: left;
}

.fnaftwo p {
    text-align: left;
}

.fnaftwo-pic {
    width: 50%;
    max-width: 400px;
}

.fnaftwo-pic img {
    width: 100%;
    border: 4px solid #ffffff;
    border-radius: 10px;
}

.fnaftwo-font {
    display: flex;
    justify-content: center;
    width: 60%;
    margin: 0 auto;
    padding-bottom: 10%;
}

/*lore*/
body {
    max-width: 1440px;
    margin: auto;
}

h1 {
    text-align: center;
}


.lore-series {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1%;
}

.lore-series-item {
    margin: 5px;
    width: 20%
}

.lore-series p {
    text-align: center;
}

.lore-series-item img {
    width: 100%;
    height: auto;
    border: 4px solid #ffffff;
    border-radius: 10px;
}

/*guides*/
.guides-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2%;
}

.guides-gallery p {
    text-align: center;
}

.guides-item {
    margin: 5px;
    width: 15%;
}

.guides-item img {
    width: 100%;
    height: auto;
    border: 4px solid #ffffff;
    border-radius: 10px;
}

/*novel*/
.novel-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5%;
}

.novel-gallery p {
    text-align: center;
}

.novel-item {
    margin: 5px;
    width: 20%
}

.novel-item img {
    width: 100%;
    height: auto;
    border: 4px solid #ffffff;
    border-radius: 10px;
}

/*game*/
.board-game {
    display: flex;
    justify-content: center;
}

.board-game img {
    border: 4px solid #ffffff;
    border-radius: 10px;
}

.board-game-font p {
    text-align: center;
}

@media only screen and (max-width: 768px) {

    .fnafone-container {
        display: flex;
        flex-direction: column-reverse;
        gap: 25px;
        padding: 10px;
    }

    .fnafone {
        text-align: center;
    }

    .fnafone p {
        text-align: center;
    }

    .fnafone-pic {
        width: 55%;
    }

    .fnafone-font {
        width: 80%;
    }

    .fnafone-font p {
        text-align: center;
        width: 100%;
    }


    /*2*/
    .fnaftwo-container {
        display: flex;
        flex-direction: column;
        gap: 25px;
        padding: 10px;
    }

    .fnaftwo {
        text-align: center;
    }

    .fnaftwo p {
        text-align: center;
    }

    .fnaftwo-pic {
        width: 55%;
    }

    .fnaftwo-font {
        width: 80%;
    }

    .fnaftwo-font p {
        text-align: center;
        width: 100%;
    }

    /*book*/
    .lore-series-item {
        width: 40%;
    }

    .guides-item {
        width: 28%;
    }

    .novel-item {
        width: 40%;
    }
}

@media only screen and (max-width: 414px) {

    .fnafone p {
        line-height: 120%;
    }

    .fnaftwo p {
        line-height: 120%;
    }

    /*book*/
    .lore-series-item {
        width: 35%;
    }

    .guides-item {
        width: 25%;
    }

    .novel-item {
        width: 30%;
    }

    .board-game img {
        width: 40%;
    }
}