/* Imports */
@import url("reset.css");

/* Variables */
:root {
	--link-color: #C00;
	--youtube-color: #f00;
	--youtube-color-text: #fff;
	--twitch-color: #6441A4;
	--offline-color: #c9302c;
	--online-color: #5cb85c;
	--background-color: #000;
	--background-color-content: #dedede;

	--menu-bg-color: #CCC;
	--menu-bg-color-hover: #999;

	--size-100: 7px;
	--size-200: 14px;
	--size-300: 21px;
	--size-400: 28px;
}
/* General */
h1 { font-size: 200%; }
h2 { font-size: 180%; }
h3 { font-size: 160%; }
a { text-decoration: none; color: var(--link-color); cursor: pointer; }
a:hover { text-decoration: underline; }
h1, h2, h3, p { margin-bottom: 10px; line-height: 1.1; }
body { font-family: 'Open Sans', sans-serif; background-color: var(--background-color); }
h1, h2, h3, h4, h5, h6, strong { font-weight: bold; }
/* Classes */
.header, .main, .footer { background-color: var(--background-color-content); }
.header { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.main-menu ul, .social-menu ul { display: flex; justify-items: center; align-items: center; }
.main-menu ul { flex-direction: column; font-size: 8.5vmin; }
.social-menu ul { flex-direction: row; gap: var(--size-200); font-size: 26px; padding: var(--size-200) 0; }
.social-menu ul a { transition: opacity .3s ease-in-out; }
.social-menu ul a:hover { opacity: .7; }
.main { padding: var(--size-200); }
.social-stats .social h3 { text-align: center; }
.social-stats > div { padding: var(--size-200); }
.social-stats .stats-container { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.social-stats .stats p { margin:0; }
.social-stats .youtube { background-color: var(--youtube-color); color: var(--youtube-color-text); }
.social-stats .youtube a { color: var(--youtube-color-text); }
.footer { text-align: center; }
.footer .social-menu ul { justify-content: center; }

@media only screen and (min-width: 800px) {
	.header { flex-direction: row; justify-content: space-between; margin-top: var(--size-400); border-top-left-radius: var(--size-200); border-top-right-radius: var(--size-200); }
	.main-menu ul { flex-direction: row; font-size: 1.1rem; gap: var(--size-200); }
	.footer { margin-bottom: var(--size-400); border-bottom-left-radius: var(--size-200); border-bottom-right-radius: var(--size-200); }
	.social-stats .stats-container { flex-direction: row; justify-content: space-evenly; }

	.wrapper { max-width: 1920px; margin-left: auto; margin-right: auto; padding: var(--size-200); }
}