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

@font-face {
	font-family: "bkk-regular";
	src: url("bkk_regular.ttf") format("truetype");
	unicode-range : U+AC00-D7A3;}

@font-face {
	font-family: "bkk-bold";
	src: url("bkk-bold.ttf") format("truetype");
	unicode-range : U+AC00-D7A3;}




body{
	margin-left : 0px;
	margin-top: 10px;
	background-color: blue;
}



button {
	display: block;
	margin-top:40px;
	margin: auto;
	border-radius: 5px;
	font-size: 13px;
	font-weight: bold;
	cursor: pointer;
	margin-top: 17px;
	/* margin-bottom: 50px; */
	border: none;
	padding: 5px 15px 5px 15px;
	color: #fff;
}



#customQuote{
	/* float: left; */
	display: block;
	margin-top: 20px;
	text-align: center;
	font-size: 34px;
	color:white;

	word-break: keep-all;
}

#concreteQuote{
	/* float: left; */
	display: block;
	margin-top: 20px;
	text-align: center;
	font-size: 34px;
	color:white;
	word-break: keep-all;
}


h1{
	font-family: "bkk-bold";
	color: white;
	display: inline;
	font-size: 28px;
	margin-right: 15px;
	text-align: center;
	float: center;
}

h3{
	/* font-family: "bkk-regular"; */
	color: white;
	padding: 10px;
	display: inline;
	text-underline-offset: 3px;


}

h4{
	/* font-family: "bkk-regular"; */
	color: white;
	/* text-align: center; */
	display: block;
	font-size: 24px;
	font-style: none;
	font-weight: 400;
	margin-top: 0;
	margin-bottom: 0.5rem;

}

h5{
	/* font-family: "bkk-regular"; */
	color: white;
	text-align: center;
	display: inline;

}

li{
	/* font-family: "bkk-regular"; */
	color: white;

}

p{
	font-family: "bkk-bold";
	color:white;
	display: inline;
}

figure{
	/* display: inline; */
	/* margin: auto; */
}

figcaption{
	text-align: center;
	color: white;
}

.figure1{
	/* display: inline; */
	
	/* padding: 30px; */
	/* border-bottom: 1px solid white; */

}

img{
	max-width: 420px;
	height:auto;
	border-radius: 2px;
	/* align-items: center; */
	/* display: inline; */
	margin-bottom: 4px;
	margin : auto;
	/* align-items: center; */
	/* margin-left: auto;
	margin-right: auto; */
  }


ul{
	color:white;
	list-style-type:circle;
}

li{
	padding-bottom: 0.4rem;
	margin-left: 20px;
}

details{
 color:white;
}




.left {
	/* width: 15%; */
	/* display: block; */
	display: block;
	/* position: sticky;
	top: 0; */
	text-align: center;
	margin : auto;
	/* justify-content: center; */
	/* float: center; */
	padding: 15px;
	/* height: 1000px; */
	/* margin-left: auto;
	margin-right: auto; */
	border-bottom: 1px solid white;
	/* border: 1px solid red; */
  }



  .text {
	display: flex;
	justify-content: center;
	/* position: relative; */
	/* left: 50%;
	transform: translate(-50%); */
}

  

  .center{
		width: 35%;
		/* float: left; */
		/* text-align: center; */
		display: inline;
		/* padding: 30px; */
		/* align-items: center; */
		/* border: 1px solid red; */
		height: 900px;
		border-right: 1px solid white;

	  
}

.book{
	border-bottom: 1px solid white;
	padding: 30px;
	text-align: center;

}

.booksentence{
	padding: 30px;
	text-align: center;
}

.centerimg{
	padding: 30px;
	padding-left: 50px;

	border-bottom: 1px solid white;
}


.centerimg{
	/* position: absolute; */
    /* left: 50%; */
	/* display: flex;
	justify-content: center; */
	/* align-items: center; */
	/* transform: translate(-50%) */
}


 .contents{
	display: inline-block;
	width: 45%;
	border-right: 1px solid white;
	border-left: 1px solid white;
 } 


.customButton{
	/* width : 400px; */
	/* display: inline; */
	text-align: center;
	padding : 40px;
	/* height: 1000px; */
	border-bottom: 1px solid white;
	height :350px;

}

#sentence{
	/* width : 30%; */
	/* float : ; */
	padding : 40px;
	/* height: 1000px; */
	/* border-bottom: 1px solid white; */
	/* height : auto; */
	

}


#btnConcrete, #btnCustom {
    /* margin-top: 40px; */
	/* margin-bottom: 10px; */
    margin: auto;
	float: center;
    border-radius: 5px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    padding: 5px 15px;
}











summary{
	margin-bottom: 10px;
}


a{
	/* display: flex;
	justify-content: center; */
	text-decoration: none;
	color:black;
}

a:visited {
	text-decoration: none;
	color:black;
  }
  
  a:hover {
	text-decoration: none;
	color: #23ffff;
  }
  
  a:active {
	text-decoration: none;
	color: black;
  }

  a:focus {
    text-decoration: underline;}




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

	h1{
		font-family: "bkk-bold";
		color: white;
		text-align: center;
		display: block;
		margin-bottom: 10px;
	}


	h3{
		/* font-family: "bkk-regular"; */
		color: white;
		line-height: 1.6rem;
		text-align: center;
		display: inline;

	}


	a{display: block;
	float: center;
	text-align: center;

	}

	h4{
		/* font-family: "bkk-regular"; */
		color: white;
		text-align: center;
		/* line-height: 0.1rem; */
		margin-bottom: 15px;
	
	}

	p{
		font-family: "bkk-bold";
		color:white;
		text-align: center;

	}

	img{
		max-width: 280px;
		margin: auto;
	}

	.left{
		display: block;
		/* width: 100%;  */
		float: center;
		height: auto;

	}

	.text {
		display: block;
		/* justify-content: center; */}

	.center{
		width: auto; 
		display: block;
		padding: 0px;
		height: 60%; 
		margin-top: 30px;
		margin-bottom: 30px;
		border-right: 0;
		border-left: 0;

		/* border-bottom: 1px solid white; */

	}



	.centerimg{
		/* display: block; */
		/* flex-wrap: wrap;
		align-content: center; */
	
	}


	.contents{
		display: block;
		width: auto;
		border-right: 0;
		border-left:0;
		border-bottom:1px solid white;
	
	 } 


	.customButton{
		/* width: 100%; */
		height: auto;
		/* order:3; */
		padding : 10px;
		margin-top: 30px;


	}

	figcaption{
		text-align: center;
	}
	.figure2{
		display: block;
		margin-bottom: 15px;
		float: center;
	}

	.figure1{
		display: block;
	}

	#sentence{
		/* width: 100%; */
		height: auto;
		padding : 10px;
		margin-top: 30px;


	}

	#customQuote, #concreteQuote{
		
		font-size: 28px;

	}

}