html {
	scroll-behavior: smooth;
}

/* Body */

body {
	font-family: Helvetica, sans-serif;
	text-align: center;
	margin: 220px auto 100px;
}

hr {
	margin-top: 50px;
	margin-bottom: 25px;
	height: 5px;
	background-color: black;
}


body > section > img {
	width: 100%;
	max-width: 1100px;
	margin-top: 20px;
	margin-bottom: 120px;
}


h1,
h2,
h3 {
	font-family: "Lilita One", sans-serif;
	color: #FF9A35;
}

h1 {
	font-size: 60px;
	margin-top: 100px;
	margin-bottom: 10px;
}

h2 {
	font-size: 40px;
	margin: 0;
}

h3 {
	font-size: 40px;
	text-transform: uppercase;
	margin-top: 80px;
}


/* Paragraph */

p {
	font-family: "Yuyu", sans-serif;
	color: #502808;
	font-size: 30px;
	margin: auto;
	padding: 30px;
	padding-bottom: 50px;
	max-width: 1100px;
	text-wrap: balance;
	text-align: center;
}


/* Section Title */

.page-section {
	scroll-margin-top: 80px;
	margin-bottom: 280px;
}

.section-title {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;

	margin-top: 180px;
	margin-bottom: 20px;
}

.section-title h2 {
	margin: 0;
}

.title-flower {
	width: 80px;
	height: 80px;

	max-width: none;
	margin: 0;

	object-fit: contain;
	flex-shrink: 0;
}


/* Fixed Side Navigation */

.side-index {

	position: fixed;

	right: 45px;
	top: 50%;

	transform: translateY(-50%);

	z-index: 999;

	display: flex;
	flex-direction: column;

	align-items: flex-end;

	gap: 24px;
}


/* Direction */

.index-item {

	display: flex;

	align-items: center;

	justify-content: flex-end;

	gap: 18px;

	text-decoration: none;

	color: #FF9A35;

}


/* miniflowericon */

.side-index .index-item img {

	width: 34px;
	height: 34px;

	max-width: none;

	margin: 0;

	object-fit: contain;

	flex-shrink: 0;

	opacity: .70;

	transform: scale(1);

	transition:
		transform .25s ease,
		opacity .25s ease;

}


/* hover */

.index-item:hover img {

	opacity: 1;

	transform: scale(1.35);

}


/* title */

.index-title {

	font-family: "Lilita One", sans-serif;

	font-size: 22px;

	color: #FF9A35;

	white-space: nowrap;

	opacity: 0;

	visibility: hidden;

	transform: translateX(10px);

	transition:
		opacity .25s ease,
		transform .25s ease;

}


/* hover title */

.index-item:hover .index-title {

	opacity: 1;

	visibility: visible;

	transform: translateX(0);

}



/* Footer */

.footer {

	font-size: 20px;

	text-align: center;

	margin-top: 200px;

	margin-bottom: 10px;

	color: #502808;

}

.footer a {

	color: #FF9A35;

	text-decoration: none;

	font-weight: bold;

}

.footer a:hover {

	text-decoration: underline;

}


/* Responsive */

@media (max-width:900px){

	body{
		margin:140px 30px;
	}

	p{
		font-size:24px;
	}

	h1{
		font-size:50px;
	}

	h2{
		font-size:34px;
	}

	.title-flower{
		width:60px;
		height:60px;
	}

	.side-index{

		right:20px;

	}

	.side-index .index-item img{

		width:28px;
		height:28px;

	}

	.index-title{

		font-size:18px;

	}

}


@media (max-width:700px){

	.side-index{

		display:none;

	}

	body{

		margin:100px 15px;

	}

	h1{

		font-size:42px;

	}

	h2{

		font-size:28px;

	}

	p{

		font-size:20px;

		padding-left:15px;
		padding-right:15px;

	}

	.section-title{

		gap:18px;

	}

	.title-flower{

		width:42px;
		height:42px;

	}

}