@charset "UTF-8";

/* ----- GLOBAL ----- */

* {
	box-sizing: border-box;
	font-family: 'Open Sans', sans-serif;
	margin: 0;
	padding: 0;
}

html {scroll-behavior: smooth;}

#wrapper {
	background: var(--twitch-purple);
	overflow: hidden;
	width: 100%;
	height: 100vh;
}

/* ----- GLOBAL COLORS ----- */

:root {
	--twitch-purple: #9146FF;
	--twitch-red: #eb0400;
	--white: #F0F0FF;
}

/* ----- GLOBAL TYPOGRAPHY ----- */

h1 {
	color: var(--white);
	font-size: 3rem;
	line-height: 3rem;
}

h2 {
	color: var(--white);
	font-size: 1.75rem;
	line-height: 1.75rem;
	font-weight: 300;
}

p {font-weight: 300;}

b {font-weight: 600;}

/* ----- GLOBAL BUTTONS ----- */

a {
	color: inherit;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
}

.button {
	border: 1px solid white;
	color: var(--white);
	display: inline-block;
	padding: .5rem 1.5rem;
	transition: all .2s ease-in-out;
}

.button:hover:not(.disabled) {
	background: var(--white);
	color: black;
}

.button.disabled {
	cursor: not-allowed;
	opacity: 50%;
}

/* ----- GLOBAL SECTIONS ----- */

section {
	padding: 3rem;
	position: relative;
	width: 100%;
	min-height: 100%;
}

/* ----- Individual Section Styling ----- */
/* Frontpage: Section */

.section1 {
	align-items: center;
	display: flex;
	gap: 3rem;
	position: relative;
}

.section1 #text, .section1 #textBox {
	min-height: 32px;
	width: 50%;
}

.section1 #text h1 {
	animation: fadeIn .5s ease-in-out 0.5s forwards;
	border-bottom: 1px solid var(--white);
	margin-bottom: .5rem;
	opacity: 0%;
	transition: all .2s ease-in-out;
	width: max-content;
}

@keyframes fadeIn {
	0% {opacity: 0%;}
	100% {opacity: 100%;}
}

.section1 #text h1:hover {border-color: black;}
.section1 #text h1:hover a {color: black;}

.section1 #text h2 {
	animation: fadeIn .5s ease-in-out .75s forwards;
	opacity: 0%;
}

.section1 #text p {
	animation: fadeIn .5s ease-in-out 1s forwards;
	color: white;
	opacity: 0;
}

.section1 #textBox {
	animation: slideIn 1s ease-in-out 1.5s forwards;
	background: black;
	border-radius: 1.5rem;
	padding: 1.25rem;
	-webkit-transform: translateX(calc(100% + 3rem));
	-moz-transform: translateX(calc(100% + 3rem));
	-o-transform: translateX(calc(100% + 3rem));
	transform: translateX(calc(100% + 3rem));
}

@keyframes slideIn {
	0% {
		-webkit-transform: translateX(calc(100% + 3rem));
		-moz-transform: translateX(calc(100% + 3rem));
		-o-transform: translateX(calc(100% + 3rem));
		transform: translateX(calc(100% + 3rem));
	}

	100% {
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-o-transform: translateX(0);
		transform: translateX(0);
	}
}

.section1 #textBox h2 {
	font-weight: 600;
	margin-bottom: .75rem;
}

.section1 #textBox p {
	color: var(--white);
	margin-bottom: .75rem;
}

.section1 #textBox p > a {border-bottom: .5px solid var(--white);}

.section1 #textBox p > a:hover {
	opacity: 50%;
}

.section1 #textBox .button {
	border-radius: .5rem;
	display: inline-flex;
	font-weight: 600;
	gap: .5rem;
}

.section1 #textBox .button svg {width: 1rem;}

.section1 #textBox .button svg polygon {
	fill: var(--white);
	transition: all .2s ease-in-out;
}

.section1 #textBox .button svg line {
	fill: none;
	stroke: var(--white);
	stroke-width: 6;
	stroke-miterlimit: 10;
	transition: all .2s ease-in-out;
}

.section1 #textBox .button:hover svg polygon {fill: black;}
.section1 #textBox .button:hover svg line {stroke: black;}

.section1 #links {
	animation: opacityFadeIn 0.5s ease-in-out 2.25s forwards;
	bottom: 0;
	color: rgba(255,255,255,.4);
	column-gap: 1.5rem;
	display: flex;
	font-weight: 600;
	justify-content: center;
	margin-bottom: 3rem;
	opacity: 0;
	position: absolute;
	width: calc(100% - 6rem);
}

@keyframes opacityFadeIn {
	0% {bottom: -3rem; opacity: 0;}
	100% {bottom: 0; opacity: 1;}
}

.section1 #links a {transition: all 0.2s ease-in-out;}

.section1 #links a:hover {color: rgba(255,255,255,1);}

/* Moderation: Section styling */

#moderation #wrapper {overflow: scroll;}

#moderation .backArrow {
	animation: arrowBounce 3s ease-in-out 0s infinite;
	align-items: center;
	color: var(--white);
	column-gap: .75rem;
	display: flex;
	height: 1.5rem;
	margin-bottom: 3rem;
	transition: all 0.2s ease-in-out;
	width: max-content;
}

@keyframes arrowBounce {
	0%, 20%, 30%, 100% {
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-o-transform: translateX(0);
		transform: translateX(0);
	}

	15% {
		-webkit-transform: translateX(1rem);
		-moz-transform: translateX(1rem);
		-o-transform: translateX(1rem);
		transform: translateX(1rem);
	}

	25% {
		-webkit-transform: translateX(0.5rem);
		-moz-transform: translateX(0.5rem);
		-o-transform: translateX(0.5rem);
		transform: translateX(0.5rem);
	}
}

#moderation .backArrow:hover {color: black;}
#moderation .backArrow:hover svg polyline {stroke: black;}
#moderation .backArrow:hover svg line {stroke: black;}

#moderation a svg {height: 100%;}

#moderation a svg polyline {
	fill: none;
	stroke: var(--white);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-miterlimit: 10;
	transition: all 0.2s ease-in-out;
}

#moderation a svg line {
	fill: none;
	stroke: var(--white);
	stroke-width: 1.5;
	stroke-miterlimit: 10;
	transition: all 0.2s ease-in-out;
}

#moderation a p {
	font-size: 1.25rem;
	font-weight: 600;
}

#moderation #info h2 {margin-bottom: 1.5rem;}

#moderation #info h2 a {
	border-bottom: 1px solid white;
	font-weight: 600;
	transition: all 0.2s ease-in-out;
}

#moderation #info h2 a:hover {
	border-color: black;
	color: black;
}

#moderation #channelsModerating,
#moderation #channelFollowers,
#moderation #channelViewers,
#moderation #lastUpdated {color: var(--white);}

#moderation #lastUpdated {margin-top: 0.5rem;}

#moderation #content {
	border-collapse: separate;
	border-spacing: 0 1rem;
	width: 100%;
	margin-top: 1.5rem;
	min-height: 100%;
}

	#moderation #content tr:not(.header) {background-color: rgba(255,255,255,1);}

	#moderation #content tr {
		border-radius: 0.5rem;
		display: flex;
		margin-bottom: 0.75rem;
		transition: all 0.2s ease-in-out;
	}

	#moderation #content tr.suspended {background-color: rgba(255,255,255,.25);}
	#moderation #content tr.suspended .channel,
	#moderation #content tr.suspended .role,
	#moderation #content tr.suspended .buttons {opacity: 0.25;}

	#moderation #content tr:hover:not(.header):not(.suspended) {
		background-color: black;
		box-shadow: 0 0 1.5rem 0 rgba(0,0,0,0.25);
	}

	#moderation #content tr:hover:not(.header):not(.suspended) td {color: white;}

	#moderation #content th {
		color: white;
		padding: 0 1.5rem;
		text-align: left;
	}

	#moderation #content td {
		align-items: center;
		display: flex;
		padding: 0.75rem 1.5rem;
		transition: all 0.2s ease-in-out;
	}

	#moderation #content .channel {gap: 0.75rem; width: calc(100% / 5);}
	#moderation #content .role {width: calc(100% / 5);}
	#moderation #content .buttons {justify-content: flex-end; width: calc(100% / 5);}
	#moderation #content .comments {width: calc((100% / 5) * 2);}

	#moderation #content .channel p {font-weight: 600;}

		#moderation #content .channel img {
			border-radius: 50%;
			display: inline-block;
			height: 3rem;
		}

		#moderation #content .channel .partner {height: 1rem;}
		#moderation #content .channel .partner path {fill: var(--twitch-purple);}

		#moderation #content .role span.tablet,
		#moderation #content .comments span.tablet {
			display: none;
			font-weight: 700;
			margin-right: 0.25rem;
			white-space: nowrap;
		}

		#moderation #content tr.suspended .comments span {
			background-color: var(--twitch-red);
			border-radius: 0.325rem;
			color: white;
			padding: 0.25rem 0.5rem;
		}

		#moderation #content .buttons a {
			background-color: var(--twitch-purple);
			border-radius: 0.5rem;
			color: white;
			cursor: pointer;
			font-weight: 600;
			padding: 0.5rem 1rem;
			transition: all 0.15s ease-in-out;
		}

		#moderation #content tr:not(.suspended) .buttons a:hover:not(.disabled) {
			background-color: white;
			color: black;
		}

/* ----- MEDIA QUERIES ----- */

@media screen and (max-width: 1024px) {
	h1 {
		font-size: 2rem;
		line-height: 2rem;
	}
	
	h2 {
		font-size: 1.25rem;
		line-height: 1.25rem;
	}
	
	p:not(.channelName) {font-size: .9rem;}
	
	.button {font-size: .9rem;}

	#moderation #content .channel,
	#moderation #content .role,
	#moderation #content .comments,
	#moderation #content .buttons {width: calc(100% / 4);}
	
	#moderation #content div .channel_name a {font-size: 1.25rem;}
	
	#moderation #content div .moderation, #moderation #content div .followers, #moderation #content div .viewers, #moderation #content div .comment {
		font-size: .9rem;
		line-height: .9rem;
	}
}

@media screen and (max-width: 920px) {
	.section1 {
		flex-direction: column;
		justify-content: flex-end;
		padding: 3rem 3rem calc(3rem + 21.5px) 3rem;
	}
	
	.section1 #text, .section1 #textBox {width: 100%;}
	
	.section1 #links {margin-bottom: 1.5rem;}
}

@media screen and (max-width: 845px) {
	#moderation #content tr.header {display: none;}

	#moderation #content tr:not(.header) {
		border-radius: 1rem;
		display: flex;
		flex-direction: column;
		margin-bottom: 1.5rem;
	}

	#moderation #content .role,
	#moderation #content .comments {
		align-items: initial;
		display: initial;
		padding: 0 1.5rem;
		width: 100%;
	}

	#moderation #content .role {margin-bottom: 0.5rem;}

	#moderation #content .channel,
	#moderation #content .buttons {
		padding: 1.5rem;
		width: 100%;
	}

	#moderation #content .role span.tablet,
	#moderation #content .comments span.tablet {display: inline;}

	#moderation #content .comments.tabletEmpty {display: none;}

	#moderation #content .channel {border-radius: 1.5rem 0 0 1.5rem;}

	#moderation #content .channel img {height: 4rem;}

	#moderation #content .buttons a {
		padding: 1rem;
		text-align: center;
		width: 100%;
	}
}

@media screen and (max-width: 800px) {
	#moderation #content div {width: calc((100% / 2) - .75rem);}
	#moderation #content div > a {
		border-bottom: 1.5px solid #9146FF;
		font-size: 1.25rem;
		margin-bottom: 0.75rem;
	}
}

@media screen and (max-width: 640px) {
	section {padding: 3rem 1.5rem;}
}

@media screen and (max-width: 600px) {
	#moderation #content div {width: 100%;}
}

@media screen and (max-width: 540px) {
	.section1 {
		gap: 1.5rem;
		padding: 3rem 1.5rem calc(3rem + 21.5px) 1.5rem;
	}
}

@media screen and (max-width: 450px) {
	#moderation section {padding: 3rem 0;}

	#moderation .backArrow {margin-left: 1.5rem;}

	#moderation #info {padding: 0 1.5rem;}

	#moderation #content tr:not(.header) {
		border-radius: 0;
		border-bottom: 1px solid black;
		margin-bottom: 0;
	}

	#moderation #content tr:last-of-type {border-bottom: 0;}
}

@media screen and (max-width: 425px) {
	p:not(.channelName) {font-size: .8rem;}
	
	.section1 {padding: 3rem 1.5rem;}
	
	.section1 #text {text-align: center;}
	
	.section1 #textBox h2 {font-size: 1.1rem;}
	
	.section1 #links {display: none;}
}

@media screen and (max-width: 375px) {
	p:not(.channelName) {font-size: .8rem;}
	
	.section1 #text h1 {
		margin: 0 auto .5rem auto;
		text-align: center;
	}
	
	.section1 #text h2 {text-align: center;}
	
	.section1 #textBox h2 {text-align: center;}
	
	.section1 #textBox p {text-align: justify;}
	
	.section1 #textBox .button {
		display: flex;
		justify-content: center;
	}
	
	.button {font-size: .8rem;}
	
	#moderation #content {gap: .75rem;}
}

@media screen and (max-width: 330px) {
	h1 {
		font-size: 1.5rem;
		line-height: 1.5rem;
	}
	
	h2 {
		font-size: 1rem;
		line-height: 1rem;
	}
}

@media screen and (max-width: 300px) {
	.section1 aside:nth-child(2) {border-radius: 1rem;}
	
	.section1 aside:nth-child(2) > .button {
		display: flex;
		justify-content: center;
	}
}