/* Fonts */
@font-face{
  font-family: "OpenSans";
  src: url("./fonts/OpenSans-Regular.ttf");
  font-weight: normal;
}
@font-face{
  font-family: "OpenSans";
  src: url("./fonts/OpenSans-Bold.ttf");
  font-weight: bold;
}
@font-face{
  font-family: "OpenSansLight";
  src: url("./fonts/OpenSans-Light.ttf");
  font-weight: bold;
}
@font-face{
  font-family: "OpenSansSC";
  src: url("./fonts/OpenSans_SemiCondensed-Bold.ttf");
  font-weight: bold;
}
/* Common */
html, body, div, p, hr, img, h1, h2, code, pre{
	margin: 0;
	padding: 0;
}
html{
	font-size: 0.625em;
	-webkit-text-size-adjust: 100%;
}
body{
	font-family: "OpenSans", Helvetica, Arial, sans-serif;
	background-color: #ffffff; 
	color: #000000; 
}
@media (max-width: 719px){
	.side_padded{
		padding-left: 1.2rem;
		padding-right: 1.2rem;
	}
	.all_padded{
		padding: 1.2rem;
	}
}
@media (min-width: 720px){
	.side_padded{
		padding-left: 2rem;
		padding-right: 2rem;
	}
	.all_padded{
		padding: 2rem;
	}
}
a{
	color: #7b2bcc
}
img{
	width: 100%;
}
hr{
	height: 1px;
	border: none;
	background-color: #a0a0a0;
}
.section{
	margin: 0 auto 0 auto;
}
.heading{
	line-height: 1.5em;
}
p{
	line-height: 1.6em;
}
@media (max-width: 719px){
	#line1{
		margin: 5.4rem auto 6rem auto;
	}
	#line2{
		margin: 5.4rem auto;
	}
	#line3{
		margin: 6rem auto 5.4rem auto;
	}
	#line4{
		margin: 6rem auto 5.2rem auto;
	}
	.caption{
		margin-bottom: 2.8rem;
	}
	.below_caption{
		margin-top: 2.8rem;
	}
	.heading{
		font-size: 2rem;
		margin-bottom: 1rem;
	}
	p{
		font-size: 1.4rem;
	}
}
@media (min-width: 720px){
	hr, .section{
		max-width: 80rem;
	}
	#line1{
		margin: 6.8rem auto 7.4rem auto;
	}
	#line2{
		margin: 6.8rem auto;
	}
	#line3{
		margin: 7.4rem auto 6.8rem auto;
	}
	#line4{
		margin: 7.4rem auto 6.5rem auto;
	}
	.caption{
		margin-bottom: 3.2rem;
	}
	.below_caption{
		margin-top: 3.2rem;
	}
	.heading{
		font-size: 2.4rem;
		margin-bottom: 1rem;
	}
	p{
		font-size: 1.6rem;
	}
}
/* Title/authors/affiliations */
#title, #ninja_emoji{
	display: inline-block;
	vertical-align: top;
}
#title{
	font-family: "OpenSansSC", Helvetica, Arial, sans-serif;
	line-height: 1.5em;
}
#authors, #affiliations{
	font-family: "OpenSansLight", Helvetica, Arial, sans-serif;
	line-height: 1.4em;
}
#affiliations{
	color: #9866cb;
}
@media (max-width: 719px){
	#ninja_emoji{
		margin-top: 0.8rem;
		margin-right: 0.6rem;
		width: 2.5rem;
	}
	#title{
		font-size: 2.6rem;
		margin-top: 7.3rem;
		margin-bottom: 2.4rem;
	}
	#authors{
		font-size: 1.6rem;
		margin-bottom: 0.7rem;
	}
	#affiliations{
		font-size: 1.5rem;
		margin-bottom: 2.6rem;
	}
}
@media (min-width: 720px){
	#ninja_emoji{
		margin-top: 1rem;
		margin-right: 0.8rem;
		width: 3.3rem;
	}
	#title{
		font-size: 3.4rem;
		margin-top: 9.0rem;
		margin-bottom: 2.8rem;
	}
	#authors{
		font-size: 1.8rem;
		margin-bottom: 0.8rem;
	}
	#affiliations{
		font-size: 1.6rem;
		margin-bottom: 2.8rem;
	}
}
/* Button */
.button{
	display: inline-block;
	background-color: #7b2bcc;
}
.button_icon{
	height: auto;
}
.button_text{
	color: #ffffff;
	line-height: 1em;
}
.button_icon, .button_text{
	display: inline-block;
	vertical-align: top;
}
@media (max-width: 719px){
	.button{
		padding: 0.7rem 1.3rem 0.7rem 0.9rem;
		height: 1.5rem;
		border-radius: 1.5rem;
	}
	.button_icon{
		margin-left: 0.3rem;
		margin-right: 0.7rem;
		width: 1.1rem;
	}
	.button_text{
		font-size: 1.3rem;
	}
}
@media (min-width: 720px){
	.button{
		padding: 0.8rem 1.4rem 0.8rem 1.0rem;
		height: 1.6rem;
		border-radius: 1.6rem;
	}
	.button_icon{
		margin-left: 0.4rem;
		margin-right: 0.8rem;
		width: 1.2rem;
	}
	.button_text{
		font-size: 1.4rem;
	}
}
/* Animation GIFs */
#anime_pngs, #anime_gifs{
	display: grid;
	grid-template-rows: 1fr;
}
#anime_pngs{
		position: relative;
}
.anime_png img, .anime_gif img{
	display: block;
}
@media (max-width: 519px){
	#anime_pngs, #anime_gifs{
		grid-template-columns: 1fr 1fr;
	}
	#anime_pngs{
		margin-bottom: -7.5%;
	}
	#png3, #gif3{
		display: none;
	}
}
@media (min-width: 520px){
	#anime_pngs, #anime_gifs{
		grid-template-columns: 1fr 1fr 1fr;
	}
	#anime_pngs{
		margin-bottom: -5%;
	}
}
@media (max-width: 719px){
	#anime_pngs, #anime_gifs{
		column-gap: 0.9rem;
	}
	#anime_pngs{
		margin-top: 5.6rem;
	}
}
@media (min-width: 720px){
	#anime_pngs, #anime_gifs{
		column-gap: 1.2rem;
	}
	#anime_pngs{
		margin-top: 6.9rem;
	}
}
/* Abstract */
#abstract{
	text-align: justify;
}
@media (max-width: 719px){
	#abstract{
		margin-top: 4.8rem;
	}
}
@media (min-width: 720px){
	#abstract{
		margin-top: 6.1rem;
	}
}
/* Image gallery */
#grid_a, #grid_b{
	display: grid;
	row-gap: 0.4rem;
	column-gap: 0.4rem;
}
.grid_a_item, .grid_b_item{
	cursor: pointer;
}
.grid_a_item img, .grid_b_item img{
	display: block;
}
@media (max-width: 399px){
	#grid_a, #grid_b{
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr 1fr;
	}
}
@media (min-width: 400px) and (max-width: 639px){
	#grid_a, #grid_b{
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr;
	}
}
@media (min-width: 640px){
	#grid_a, #grid_b{
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr;
	}
}
/* Cover */
#cover{
	z-index: 10;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	min-height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.9);
	color: #ffffff;
}
#cover_close{
	background-image: url(images/close.svg);
	background-repeat: no-repeat;
	cursor: pointer;
}
.cover_on{
	transition: visibility 0s, opacity 0.3s ease;
	visibility: visible;
	opacity: 1;
}
.cover_off{
	transition: visibility 0.3s ease, opacity 0.3s ease;
	visibility: hidden;
	opacity: 0;
}
#cover_image{
	display: block;
	margin: 0 auto 0 auto;
}
@media (max-width: 719px){
	#cover_close{
		margin-bottom: 1.2rem;
		width: 3.8rem;
		height: 3.8rem;
	}
}
@media (min-width: 720px){
	#cover_close{
		margin-bottom: 2rem;
		width: 4.8rem;
		height: 4.8rem;
	}
}
/* BibTeX */
#bibtex{
	background-color: #f0f0f0;
	white-space: nowrap;
	overflow-y: hidden;
	overflow-x: auto;
	line-height: 1.5em;
}
@media (max-width: 719px){
	#bibtex{
		padding: 1.4rem 1.8rem;
		font-size: 1.2rem;
	}
}
@media (min-width: 720px){
	#bibtex{
		padding: 1.6rem 2rem;
		font-size: 1.3rem;
	}
}
/* Contact */
@media (max-width: 719px){
	#contact{
		margin-top: 5.4rem;
		margin-bottom: 7.3rem;
	}
}
@media (min-width: 720px){
	#contact{
		margin-top: 6.8rem;
		margin-bottom: 9.2rem;
	}
}