@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap');

/* Style */
/* ========================================================================== */

body{
	background: #f8f8f8;
	font-family: "Nunito Sans", Sans-serif;
	text-align: center;
	color: black;
	font-size: 1em;
}

h1{
	font-size: 2.5em;
	margin: 0;
	margin-bottom: 1em;
}

p{
	font-size: 1.1em;
	margin: 2em 0;
}

p.lead{
	font-weight: bold;
	font-size: 1.5em;
}

.text-sm{
	font-size: 0.9em;
}

.text-xs{
	font-size: 0.8em;
}

.text-lg{
	font-size: 2em;
	font-weight: bold;
}

.text-light{
	color: silver;
}

a.discreet{
	color: inherit !important;
}

.mt-1{
	margin-top: 0.5em;
}
.mr-2{
	margin-right: 1em;
}

/* Layout */
/* ========================================================================== */

#page-center{
	left: 5%;
	width: 90%;
	margin: 0 auto;
}

header{
	margin-top: 3em;
}

.card{
	background: white;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0px 7px 27px 0px rgb(48 65 122 / 9%);;
	-moz-box-shadow: 0px 7px 27px 0px rgb(48 65 122 / 9%);
	box-shadow: 0px 7px 27px 0px rgb(48 65 122 / 9%);

	padding: 1em 3em;
	margin: 3em auto;
}

main {
	display: flex;
}

main{
	margin-top: 1em;
	flex-direction: column;
}

article{
	order: 1;
	flex-grow: 1;
}

aside{
	order: 0;
	margin: 0 auto;
	margin-top: 1em;
	height: 200px;
	width: 300px;
}

footer{
	order: 99;
}

@media only screen and (min-width: 600px) and (min-height: 900px){
	#page-center{
		position: absolute;
		top: 45%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		left: 10%;
		width: 80%;
	}
}

@media only screen and (min-width: 1200px){
	#page-center{
		left: 15%;
		width: 70%;
	}
	main {
		flex-direction: row;
		align-items: center;
		text-align: left;
	}

	article{
		order: 0;
	}

	aside{
		order: 1;
		width: 600px;
		height: 400px;
	}

	.card-emoji-first article{
		order: 1;
	}
	.card-emoji-first aside{
		order: 0;
		width: 400px;
	}
}

/* Specifics */
/* ========================================================================== */

#how-to-force-reload{
    display: flex;
	justify-content: center;
	align-items: flex-start;
	text-align: center;
}