.background {
     background-color: #FBE8BD;
 }

 /*banner*/
 .bannerimage {
     background-image: url(../image/midautumnbanner.png);
     background-repeat: no-repeat;
     background-size: 100% auto;
     min-height: 100vh;
 }

 .pagetitle {
     position: absolute;
     display: flex;
     top: 150px;
     right: 70px;
 }

 .titlemobile {
     display: none;
 }

 .bannertext h2 {
     width: 250px;
     text-align: center;
     position: absolute;
     top: 470px;
     right: 300px;
 }

 /*intro*/
 .intro {
     display: flex;
     flex-wrap: wrap;
     max-width: 80%;
     justify-content: center;
     align-items: center;
     margin: 60px auto;
     gap: 30px;
 }

 .midautumn {
     text-align: left;
     margin-left: 50px;
     max-width: 40%;
 }


 /*history*/
 .history {
     display: flex;
     flex-direction: column;
     margin-bottom: 70px;
     justify-content: center;
 }

 .title {
     width: 300px;
     padding: 10px 0 10px 0px;
     background-color: #AB141C;
     border-radius: 0 50px 50px 0;
     margin: none;
     justify-content: flex-start;
     align-items: center;
 }

 .historytext {
     align-self: center;
     display: flex;
     max-width: 80%;
 }

 .history p {
     text-align: left;
     max-width: 870px;
 }

 /*mythology*/
 .titlebanner {
     background-color: #AB141C;
     padding: 20px 0;
 }

 /*moongodness*/
 .moongodnessbanner {
     background-image: url(../image/moon.jpg);
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     width: 100%;
     height: 100vh;
     display: flex;
 }


 .moongodness img {
     display: none;
 }

 .moongodness {
     background-color: #193060;
     border-radius: 0 250px 250px 0;
     height: 380px;
     width: 630px;
     margin-top: 95px;
 }

 .moongodness h2 {
     padding-left: 80px;
     width: 430px;
     text-align: left;
 }

 .moongodness p {
     max-width: 415px;
     text-align: justify;
     padding-left: 80px;
 }

 /*thearcher*/
 .archerbanner {
     background-image: url(../image/archer.jpg);
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     width: 100%;
     height: 100vh;
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-end;
     align-content: end;
 }

 .archerbanner img {
     max-width: 100%;
     height: auto;
 }

 .thearcher img {
     display: none;
 }

 .thearcher h2 {
     margin: 0 70px 0 0;
     width: 230px;
     margin-bottom: 0;
     text-align: justify;
     background-color: #FBE8BD;
     border-radius: 700px 700px 0 0;
     padding: 105px 150px 10px 60px;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .thearcher p {
     background-color: #FBE8BD;
     margin: 0 70px 0 0;
     width: 300px;
     text-align: justify;
     padding: 20px 80px 40px 60px;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 /*jaderabbit*/
 .rabbitbanner {
     background-image: url(../image/rabbit.jpg);
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     width: 100%;
     height: 100vh;
     display: flex;
     justify-content: flex-end;
     align-content: start;
 }

 .rabbitbanner img {
     max-width: 100%;
     height: auto;
 }

 .rabbit img {
     display: none;
 }

 .rabbit h2 {
     background-image: url(../image/cloud.png);
     background-repeat: no-repeat;
     background-size: 90%;
     background-position: right;
     background-color: #193060;
     width: 300px;
     text-align: left;
     padding: 50px 80px 20px 60px;
     margin: 0 70px 0 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .rabbit p {
     background-color: #193060;
     margin: 0 70px 0 0;
     width: 300px;
     text-align: justify;
     border-radius: 0 0 500px 500px;
     padding: 0 80px 120px 60px;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 @media screen and (max-width: 1080px) {
     .bannerimag {
         margin-top: 50px;
     }

     .pagetitle {
         position: absolute;
         aspect-ratio: 4/1;
     }

     .titlemobile {
         display: none;
     }

     .bannertext h2 {
         display: flex;
         top: 430px;
         right: 150px;
     }

     /*intro*/
     .intro {
         display: flex;
         flex-wrap: wrap;
         gap: 5px;
         margin: 60px;
         justify-content: center;
     }

     .intro img {
         width: 0%;
     }

     /*titlebanner*/
     .titlebanner {
         padding: 1px 0;
         width: 100%;
     }

     /*
     /*mythology*/
     .mythology {
         margin: 0;
         padding: 0;
         display: flex;
         flex-direction: column;
         flex-wrap: wrap;
     }

     /*moongodness*/
     .moongodness {
         margin: 0;
         width: 500px;
         height: 360px;
         margin-top: 60px;
     }

     .moongodness h2 {
         font-size: 40px;
         margin: none;
         max-width: 300px;
         align-items: center;
     }

     .moongodness p {
         width: 300px;
     }

     /*archer*/

     .thearcher h2 {
         font-size: 40px;
         margin-right: 50px;
         max-width: 300px;
     }

     .thearcher p {
         width: 300px;
         margin-right: 50px;

     }

     /*jaderabbit*/


     .rabbit h2 {
         font-size: 40px;
         margin-right: 50px;
         width: 300px;
     }

     .rabbit p {
         margin-right: 50px;
         width: 300px;
     }
 }

 /*mobile*/
 @media screen and (max-width: 600px) {

     /*banner*/
     .bannerimage {
         background-repeat: no-repeat;
         background-image: url(../image/mainbannermobile.png);
         background-repeat: no-repeat;
         background-position: center;
         background-size: cover;
         margin-top: 50px;
         width: 100%;
         height: 130vh;
         display: flex;
     }

     .pagetitle {
         display: none;
     }

     .titlemobile {
         display: block;
         position: absolute;
         top: 135px;
         left: 200px;
     }

     .bannertext h2 {
         display: flex;
         top: 430px;
     }

     /*intro*/
     .intro {
         display: flex;
         flex-wrap: wrap;
         gap: 5px;
         margin: 60px;
     }

     .intro img {
         width: 100%;
     }


     /*history*/
     .title {
         width: 40%;
         padding: 5px 0;
         background-color: #AB141C;
         border-radius: 0 50px 50px 0;
     }

     .history p {
         display: flex;
         flex-wrap: wrap;
         width: 300px;
     }

     /*titlebanner*/
     .titlebanner {
         padding: 1px 0;
         width: 100%;
     }

     /*mythology*/
     .mythology {
         margin: 0;
         padding: 0;
         max-width: 100%;
         display: grid;
         justify-self: center;

     }

     /*moongodness*/
     .moongodnessbanner {
         background-image: none;
         min-height: 100vh;
         height: auto;
         display: block;
     }

     .moongodness {
         min-height: 100vh;
         height: auto;
         margin: 0;
         padding: 0;
         display: flex;
         flex-wrap: wrap;
         width: 100%;
     }

     .moongodness img {
         display: block;
         object-fit: fill;
         width: 100%;
     }

     .moongodness .mythtitle {
         background-color: #193060;
         width: 100%;
         padding: none;
     }

     .moongodness h2 {
         font-size: 40px;
         margin: 0;
         max-width: 300px;
         text-align: center;
         width: 100%;
         padding: 20px 0;
         justify-self: center;
     }

     .moongodness .mythstory {
         background-color: #193060;
         width: 100%;
     }

     .moongodness p {
         background-color: #193060;
         max-width: 100%;
         width: 300px;
         text-align: justify;
         justify-self: center;
         padding: 30px 0;
         margin: 0;
     }

     /*archer*/
     .archerbanner {
         background-image: none;
         align-content: start;
         min-height: 100vh;
         height: auto;
         display: block;
     }

     .thearcher {
         min-height: 100vh;
         height: auto;
         margin: 0;
         padding: 0;
         display: flex;
         flex-wrap: wrap;
         width: 100%;
     }

     .thearcher img {
         display: block;
         object-fit: fill;
         width: 100%;
     }

     .thearcher .mythtitle {
         background-color: #FBE8BD;
         width: 100%;
     }

     .thearcher h2 {
         font-size: 40px;
         margin: 0;
         max-width: 300px;
         text-align: center;
         justify-self: center;
         width: 100%;
         padding: 20px 0;
     }

     .thearcher .mythstory {
         background-color: #FBE8BD;
         width: 100%;
         padding: 15px 0;
     }

     .thearcher p {
         background-color: #FBE8BD;
         width: 300px;
         text-align: justify;
         justify-self: center;
         padding: 20px 0;
     }

     /*jaderabbit*/
     .rabbitbanner {
         background-image: none;
         min-height: 100vh;
         height: auto;
         display: block;
         align-items: start;
     }

     .rabbit {
         min-height: 100vh;
         height: auto;
         margin: 0;
         padding: 0;
         display: flex;
         flex-wrap: wrap;
         width: 100%;
     }

     .rabbit img {
         display: block;
         object-fit: fill;
         width: 100%;
     }

     .rabbit .mythtitle {
         background-color: #193060;
         width: 100%;
     }

     .rabbit h2 {
         font-size: 40px;
         margin: 0;
         max-width: 200px;
         text-align: center;
         justify-self: center;
         padding: 20px 0;
     }

     .rabbit .mythstory {
         background-color: #193060;
         width: 100%;
         padding: 15px 0;
     }

     .rabbit p {
         width: 300px;
         padding: 15px 0;
         text-align: justify;
         justify-self: center;
     }
 }