/* specific */

html {
	padding-top: 5rem;
	padding-bottom: 25rem;
	background-color: #f9f5f3;
	}
body {
	color: #232323;
/*	font-feature-settings: "pkna"; */
/*	letter-spacing: 0.02em; */
/*	font-feature-settings: "pwid"; */
/*	font-feature-settings: "palt"; */
	font-feature-settings: "halt";
	letter-spacing: 0.02em; 
	}
img {
	width: 100%;
	padding: 0%;
}
h1, h4 {
	font-feature-settings: "palt";
	padding-bottom: 0.5rem;
}
h2 {
	border-top: 1px solid #d7d7d7;
	border-bottom: 1px solid #d7d7d7;
	padding: 3rem 0 3rem 0;
	margin: 0rem 0 2rem 0;
	font-feature-settings: "palt";
}
h3 {
	line-height: 1;
	margin-top: 3rem;
}
.title {
	line-height: 1.25;
}
.title.is-3 {
	font-size: 2.05rem;
}
p {
	font-size: 1.05em;
	margin-bottom: 2rem;
	line-height: 1.875rem;
}
.read {
	max-width: 648px;
}
.margin-2 {
	margin-bottom: 2rem;;
}
.padless-tb {
	padding-top: 0;
	padding-bottom: 0;
}
.padless-b {
	padding-bottom: 0;
}
.padless-t {
	padding-top: 0;
}


/* for mobile */
@media screen and (max-width: 768px) {
	.title.is-4 {
		font-size: 1.25rem;
	}
	.subtitle.is-6 {
		font-size: 0.9rem;
	}
	.is-size-5 {
		font-size: 0.975rem !important;
	}
	p {
		font-size: 0.925rem !important;
		line-height: 1.575rem;
	}
}


/* for Darkmode */
@media (prefers-color-scheme: light) {
  :root {
    --main-txt-color: #232323;
    --main-bg-color: #f9f5f3;
    --main-alink-color: #4f8ef1;
  }
}
 
@media (prefers-color-scheme: dark) {
  :root {
    --main-txt-color: #f9f5f3;
    --main-bg-color: #232323;
    --main-alink-color: #53befd;
	}
	html {
		background-color: #232323;
	}
	body {
    color: #f9f5f3;
	}
	.title {
		color: #f9f5f3;
	}
	.subtitle {
		color: #f9f5f3;
	}
	h3 {
		color: #f9f5f3;
	}
  h2 {
  	border-top: 1px solid #444;
  	border-bottom: 1px solid #444;
  }
	a {
		color: #4dbcff;
 	}
}