@import '../global.css';

/* https://fontlibrary.org/en/font/aegyptus-nilus */
@font-face {
  font-family: 'Nilus';
  src: url('../fonts/Nilus.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* https://fonts.google.com/specimen/Cormorant+Garamond */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype');
}


body {
	margin: 0;
	font-size: 24px;
	font-optical-sizing: auto;
	background: #ededdc;
	font-family: 'Nilus', serif;

  @media (width < 660px) {
  	font-size: 16px;
  }
}

main {
	margin: 2rem 0 3rem;
}

h1, p {
	padding: 0 1rem;
	background: #b9c46622;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	row-gap: 0.25rem;
	column-gap: 0.5ch;
}
h1 {
	margin-bottom: 3rem;
}
p {
	margin-bottom: 1rem;

  @media (width < 660px) {
  	margin-bottom: 2rem;
  }
}
ruby {
	color: #0a5417;
	background: #b9c46688;
	padding: 1rem 0.5rem 2px;

	font-family: 'Cormorant Garamond', serif;
	font-weight: 600;
}
ruby.en {
	background: #b9c46655;
	opacity: 0.5;
	pointer-events: none;
	color: transparent;
}
rp, rt {
	font-family: 'Nilus';
	font-weight: 300;
	font-size: 1rem;
	color: #755273;
}


.linkback {
	display: block;
	text-align: right;
  font-size: 0.8rem;
	color: #755273;
}
.linkback a {
  cursor: pointer;
  text-decoration: none;
	padding: 1rem;
}
.linkback a:hover {
	background: #b9c46655;
}