* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}

body {
  height: 100vh;
  font-family: 'Roboto Slab', serif;
  background-image: url(img/paper_background.png);
  background-color: beige;
}

/* icon */
.icon {
  justify-content: center;
  display: flex;
  padding: 2%;
}

/* newspaper section */
.newspaper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
}

.book {
  position: relative;
  width: 500px;
  height: 600px;
  /* adjust the book size here */
  transition: transform 0.5s;
  
}

.paper {
  position: absolute;
  /* used position:absolute bc i wanted the papers to overlap on top of each other */
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  /* page flipping part */
  perspective: 1500px;
  /* The perspective CSS property determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective. */
}

.front,
.back {
  background-color: beige;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  /* page flipping part */
  transform-origin: left;
  transition: transform 0.9s;
}

.front {
  backface-visibility: hidden;
  /* for the front-content to not show when flipped */
  z-index: 1;
  /* z-index so that the front page stays on top of the back page */

  /* border-left: 2px solid black; */
}

.back {
  z-index: 0;
  /* border-left: 2px solid black; */
}

/* all pages */
.front-content {
  display: table-row;
  border: 1px solid black;
}

.front-content h3, .back-content h3 {
  padding: 0 2% 0 2%;
  font-size: 17px;
  text-align: center;
}

.back-content{
  transform: rotateY(180deg);
}

.front-content,
.back-content {
  width: 100%;
  height: 100%;
  /* display: flex; */
  /* justify-content: center;
  align-items: center; */
}

/* paper flipping efx*/
.flipped .front,
.flipped .back {
  transform: rotateY(-180deg);
}

/* cover page */
#main_title1{
  padding-top: 3%;
  font-size: 19px;
}

#subtitle1{
  margin-top: 20%;
}

/* myanmar flag one */
#cover_img1{
  border-radius: 10%;
  transition: 0.7s;
}

#cover_img1:hover{
  border-radius: 0;
  transition: 2s;
}

.cover_img1{
  padding: 25% 0 0 13%;
}

/* page 1 */
.btn_link{
  left: 68%;
  position: absolute;
}

.btn_link:hover{
  opacity: 70%;
  transition: 0.5s;
}

#btn_link1{
  width: 100%;
  text-decoration: underline;
  color: black;
  /* margin-right: 1%; */
}

.p1{
  width: 70%;
  top: 70%;
  position: absolute;
  padding: 0 5% 0 2%;
}

.p1 p{
  text-align: end;
}

.p1 img{
  position: absolute;
  left: 96%;
  top: 10%;
}

/* the miserable children one */
#cover_img2{
  width: 450px;
  height: 270px;
  padding: 3% 0 3% 10%;
}


/* page 2 */
#f2 h2{
  padding-top: 0.2em;
  padding-bottom: 0.5em;
  text-align: center;
  text-decoration: underline;
}

.p2{
  width: 100%;
  top: 73%;
  position: absolute;
  padding: 0 5% 0 3%;
  display: flex;
} 

.p2 p{
  text-align: start;
  padding-left: 2%;
}

/* page 3 */
#b2{
  padding: 0.9em;
  width: 100%;
}

#b2 p{
  padding: 2em 0 2em 0;
}

#b2 img{
  float: right;
  position: relative;
}

.p3{
  position: absolute;
  top: 75%;
}

.p3 p{
  text-align: end;
}

/* page 4 */
#f3 h3{
  text-align: justify;
  padding: 3em 2em 1em 2em;
}

/* back cover page */
#b3{
  width: 100%;
  text-align: center;
}

#b3 h1{
  padding-top: 1%;
}

#b3 p{
  top: 88%;
  position: absolute;
}

.donation{
  width: 100%;
  align-items: center;
  top: 40%;
  position: absolute;
}

.donation a img{
  border: 1px solid black;
  border-radius: 40%;
  padding: 2%;
  transition: 2s;
  background-color: lightblue;
}

.donation a img:hover{
  border-radius: 25%;
  transition: 2s;
  background-color: white;
}

/* button mods */
button {
  border: none;
  background-color: transparent;
  cursor: pointer;
  margin: 10px;
  transition: transform 0.5s;
}

button:focus {
  outline: none;
}

button:hover img {
  background-color: rgb(177, 177, 177);
  border-radius: 50%;
  transition: 0.7s;
}

button img {
  transition: 0.5s;
  border-radius: 40%;
}

img {
  color: black;
}

/* page order */
#p1 {
  z-index: 3;
}

#p2 {
  z-index: 2;
}

#p3 {
  z-index: 1;
}

.section_1 {
  width: 100%;
  height: 30vh;
  margin-top: 1%;
  border-top: 1px dashed black;
  border-bottom: 1px dashed black;
}

.section_1 p {
  font-size: 30px;
  padding-top: 6%;
  text-align: center;
}

/* navigation bar (page1)*/
.nav{
  width: 85%;
  margin-left: 8%;
}

.page1_nav{
  gap: 2%;
  display: flex;
  justify-content: center;
}

.nav_page1{
  display: flex;
  flex-direction: row;
  padding: 0.3% 0.8%;
  text-align: center;
  transition: 0.5s;
  text-decoration: none;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  font-size: 1.2em;
}

#first, #second, #third, #fourth{
  border-right: 1px solid black;
}

.nav_page1:hover{
  background-color: rgb(189, 171, 148);
  transition: 0.5s;
}

.page1_nav a:hover{
  border-radius: 21%;
}

/* information page*/
.information {
  width: 85%;
  height: auto;
  margin-left: 8%;
  margin-top: 1%;
  padding: 2%;
  background-color: beige;
  flex-direction: column;
  
}

.information p{
  font-size: 16px;
}

.info_container1{
  display: flex;
  width: 100%;
}
.info_container2{
  margin-top: 2%;
  text-align: end;
}

#stat1{
  width: 420px;
}

#stat2{
  padding: 0.8em;
}

#chld1{
 width: 65%;
}

#chld2{
  width: 35%;
  text-align: end;
}

#dse1{
  width: 30%;
  height: 80%;
}

#dse2{
  width: 70%;
}

#dse2 p{
  padding: 2em;
}

#por_container{
  width: 100%;
}

.aboutus{
  display: flex;
}

.aboutus p{
  font-size: 1.09em;
}

#n_sec{
  border-bottom: 1px solid black;
  margin-right: 17%;
}

#n_sec p{
  padding: 1.2em
}

#s_sec{
  margin-left: 17%;
  border-bottom: 1px solid black;
}

#s_sec p{
  padding: 1.2em;
  text-align: right;
}

#a_sec{
  border-bottom: 1px solid black;
  margin-right: 17%;
}

#a_sec p{
  padding: 1.2em;
}

/* footer */
footer {
  height: auto;
  width: 100%;
  margin-top: 4%;
}

.footer-content {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  flex-direction: column;
}

.footer-content p {
  padding: 10px;
  font-size: 20px;
}

.links {
  padding: 0.5%;
  list-style: none;
  border-radius: 50%;
  transition: 0.5s;
}

.links li a{
  border: none;
  list-style: none;
}

.links:hover {
  background-color: white;
  border-radius: 45%;
  transition: 0.5s;
}

.footer-bottom p {
  font-size: 17px;
}

.buttons {
  padding: 1%; 
  background-color: white;
  border: 1px solid black;
  border-radius: 10px;
  transition: 0.25s ease-in-out background-color;
}

.buttons:hover {
  background-color: #f2f2f2;
}

/* donate page */
.form_container{
  align-items: center;
  padding: 1em;
  margin-left: 26%;
}

.form_container form{
  padding: 2em;
  width: 45vw;
  background: beige;
}

.row{
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.column{
  flex: 1 1 250px;
}

.input{
  padding: 2%;
}

.input span{
  display: block;
}

.input input{
  width: 100%;
  border: 1px solid #ccc;
padding: 0.6em;
  text-transform: none;
}

.input input:focus{
  border:1px solid #000;
}

.input img{
  width: 3.5em;
  height: 2.5em;
}

#disclaimer{
  font-size: 0.9em;
}

.submit{
  width: 98%;
  padding:12px;
  background: bisque;
  margin-top: 5px;
  cursor: pointer;
  transition: 0.4s;
}

.submit a{
  text-decoration: none;
  color: black;
}

.submit:hover{
  background: rgb(247, 242, 203);
  transition: 0.4s;
}

/* confirmation page */
#ThankYou{
  text-align: center;
  margin-top: 10%;
}