html, body { margin: 0; padding: 0; border: none; }
body {
	background: #00dce8 url(imgs/banner-gradiant.jpg) top center no-repeat;
	background-size: contain;
	font-family: 'Play', sans-serif;
}

h1 {
	font: normal 3em 'Bowlby One SC',cursive;
	margin: 0.2em 0.5em;
	color: white;
	text-shadow: 0 -2px #C00, 0 2px #C00, -2px 0 #C00, 2px 0 #C00, 2px 2px #C00, -2px -2px #C00, -2px 2px #C00, 2px -2px #C00;
}
h1>span { font-size: 50% }

#content { display:flex; margin: 0.5em; justify-content: space-between; flex-wrap: wrap; }
section {
	display: block;
	flex-basis:33%;
	box-sizing: border-box; border: 2px solid;
	border-radius: 10px;
	background: rgba(255,255,255,0.8);
	margin: 0.5em 0;
	overflow: hidden; /* Sinon il suit pas mes ordres de taille :( */
}
section.grow2 { flex-basis:66%; }
section>h2 {
	border-bottom: 2px solid;
	margin: 0;
	padding: 0.2em 0.7em;
	background: rgba(80,160,230,0.6);
	border-radius: 10px 10px 0 0;
}
section>div {
	margin: 0.5em
}
@media (max-width: 1000px) {
	section { flex-basis: 49% }
	section.grow2 { flex-basis:100%; }
}
@media (max-width: 600px) {
	section { flex-basis: 100% }
	section.grow2 { flex-basis:100%; }
	[nomobile] { display:none }
}


body>img { display:block; width: 100%; height: auto; }

#shoutframe {
	width: 100%; height: 600px;
	border: none;
	border-radius: 0.5em;
}

table.clan {
	margin: 0.3em 0;
	width: 100%;
	border-collapse: collapse;
}
table.clan>thead { background: rgba(80,160,230,0.5); }
table.clan>tbody { background: rgba(255,255,255,0.5); }
table.clan td, table.clan th { border: 1px solid; padding: 0.1em 0.2em }

table.sortable thead {
	cursor: pointer;
}

center>img { width:70%; height: auto }
.emotes img { width: 250px; height: 60px; border: none; vertical-align:middle }


.gg_chart {
	margin: 0.4em 0;
}
.gg_chart>h4 {
	margin: 0;
	padding: 0.1em 0.5em;
	background: white; /* like charts */
	border-radius: 5px 5px 0 0;
}
.gg_chart>div { /* da chart */
	height: 400px;
	width:100%;
}