*,
*:after,
*:before {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}

a {
	color: currentColor;
	text-decoration: none;
}

html {
	font-family: 'PingFang TC', 'AtlasGrotesk-Regular', 'FGroteskDemi-Regular', sans-serif;
}


/* type */

#languages {
	font-family: 'AtlasTypewriterRegular', monospace;
	font-size: 14px;
	text-transform: uppercase;
}

body {
	font-size: 32px;
}

#question {
	font-size: 60px;
	line-height: 72px;
}

#response {
	font-size: 16px;
}

/* positioning */

img {
	width: 100%;
}

#container {
	width: 100%;
	max-width: 1280px;
	margin: 100px auto;
	position: relative;
	padding: 40px;
	box-sizing: border-box;
}

/* header */

.logo {
	position: fixed;
	top: 20px;
	left: 20px;

	z-index: 1000;
}

#languages {
	position: fixed;
	top: 20px;
	right: 20px;

	z-index: 1000;
}

#languages span {
	cursor: pointer;	
}

#languages span:hover {
	text-decoration: underline;
}

span.active {
	color: red;
}

#menu {
	position: fixed;
	bottom: 20px;
	right: 20px;

	z-index: 1000;
}

#copyright {
	position: fixed;
	bottom: 20px;
	left: 20px;

	z-index: 1000;
}

/* language toggle */

.logo, 
ul.questions a, 
#question span, 
#response a, 
#about-text div span,
#menu a
{
	display: none;	
}

/* show english by default */

body .logo.en, 
body #question span.en, 
body #response a.en,
body #about-text div span.en,
body #menu a.en 
{
	display: inline-block;		
}

body ul.questions a.en 
{
	display: table-cell;
	vertical-align: middle;

	position: absolute;
  	top: 50%;
  	width: calc(100% - 40px);
  	transform: translateY(-50%);	
}

body.cn .logo.cn,  
body.cn #question span.cn, 
body.cn #response a.cn, 
body.cn #about-text div span.cn,
body.cn #menu a.cn 
{
	display: inline-block;	
}

body.cn ul.questions a.cn 
{
	display: table-cell;
	vertical-align: middle;

	position: absolute;
  	top: 50%;
  	width: calc(100% - 40px);
  	transform: translateY(-50%);	
}

body.tl .logo.tl,
body.tl #question span.tl, 
body.tl #response a.tl,
body.tl #about-text div span.tl,
body.tl #menu a.tl 
{
	display: inline-block;	
}

body.tl ul.questions a.tl 
{
	display: table-cell;
	vertical-align: middle;

	position: absolute;
  	top: 50%;
  	width: calc(100% - 40px);
  	transform: translateY(-50%);	
}

body.es .logo.es, 
body.es #question span.es, 
body.es #response a.es,
body.es #about-text div span.es,
body.es #menu a.es
{
	display: inline-block;	
}

body.es ul.questions a.es 
{
	display: table-cell;
	vertical-align: middle;	

	position: absolute;
  	top: 50%;
  	width: calc(100% - 40px);
  	transform: translateY(-50%);		
}

body.cn .logo.en, 
body.cn ul.questions a.en, 
body.cn #question span.en, 
body.cn #response a.en,
body.cn #about-text div span.en,
body.cn #menu a.en,
body.tl .logo.en, 
body.tl ul.questions a.en,
body.tl #question span.en, 
body.tl #response a.en,
body.tl #about-text div span.en, 
body.tl #menu a.en,
body.es .logo.en, 
body.es ul.questions a.en, 
body.es #question span.en, 
body.es #response a.en,
body.es #about-text div span.en,
body.es #menu a.en
{
	display: none;
}


/* language toggle color */

body #en, 
body.en #en, 
body.cn #cn, 
body.tl #tl, 
body.es #es{
	color: red;
}

body.cn #en, 
body.tl #en, 
body.es #en{
	color: black;
}




/* landing page */

.questions {
	/*display: grid;
	grid-template-columns: repeat(2, 1fr);
	list-style: none;
	grid-gap: 40px;*/

	display: block;

}

.questions li {
	/*box-shadow: 0px 0px 10px #888888;*/
	border: 4px solid rgb(0,0,0);
	color: rgb(0,0,0);
	text-align: center;
	box-sizing: border-box;
	padding: 20px;	

	height: 400px;

	/*display: table;*/ 

	display: inline-block;
	width: calc(50% - 26px);
	margin: 10px;
	position: relative;
}

.questions li:hover {
	background: rgb(0,0,0);
	color: rgb(255,255,255);
}

/* color coding */

.questions li.philosophical {
	border: 4px solid rgb(0,0,255);
	color: rgb(0,0,255);
}

.questions li.philosophical:hover {
	background: rgb(0,0,255);
	color: rgb(255,255,255);
}

.questions li.fun {
	border: 4px solid rgb(255,0,0);
	color: rgb(255,0,0);
}

.questions li.fun:hover {
	background: rgb(255,0,0);
	color: rgb(255,255,255);
}

.questions li.political {
	border: 4px solid rgb(0,255,0);
	color: rgb(0,255,0);
}

.questions li.political:hover {
	background: rgb(0,255,0);
	color: rgb(255,255,255);
}

.questions li.hypothetical {
	border: 4px solid rgb(190,0,255);
	color: rgb(190,0,255);
}

.questions li.hypothetical:hover {
	background: rgb(190,0,255);
	color: rgb(255,255,255);
}

.questions li.personal {
	border: 4px solid rgb(255,190,0);
	color: rgb(255,190,0);
}

.questions li.personal:hover {
	background: rgb(255,190,0);
	color: rgb(255,255,255);
}


/* question page */

#question, #response, #responses {
	max-width: 900px;
}

#question {
	padding-bottom: 20px;
}

#response a {
	border: 1px solid black;
	border-radius: 60px;
	padding: 10px 30px;

	margin-left: -5px;
	margin-top: 20px;
}

#response a:hover {
	background: black;
	color: white;
}

#responses p {
	margin-top: 20px;
}

#responses p::before {
	display: block;
	content: '☀︎';
}

/* color coding */

#question.philosophical {
	color: rgb(0,0,255);
}

#question.fun {
	color: rgb(255,0,0);
}

#question.political {
	color: rgb(0,255,0);
}

#question.hypothetical {
	color: rgb(190,0,255);
}

#question.personal {
	color: rgb(255,190,0);
}

/* about page */

#project-text p, #sponsors p {
	max-width: 900px;
	margin-bottom: 40px;
}

#sponsors p {
	font-size: 24px;
}

#sponsors a, #project-text a {
	border-bottom: 2px solid red;
	display: inline-block;
	line-height: 1;
	text-shadow:
	2px 2px white,
	2px -2px white,
	-2px 2px white,
	-2px -2px white;
}

#sponsors a:hover, #project-text a:hover {
	border-bottom: none;
}

 img#in-situ {
	max-width: 900px;
	margin-bottom: 40px;
}


/* mobile */

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

	body {
		font-size: 24px;
	}

	#question {
		font-size: 48px;
		line-height: 56px;
	}

	#response {
		font-size: 14px;
	}

	#sponsors p {
		font-size: 14px;
	}


	#sponsors a, #project-text a {
		border-bottom: 1px solid red;
		text-shadow:
		1px 1px white,
		1px -1px white,
		-1px 1px white,
		-1px -1px white;
	}	

	#container {
		padding: 20px;
	}

/*	#languages {
		top: 0px;
	}*/


	.questions li {
		width: calc(100% - 20px);
		height: 320px;
	}


}