@import url("https://fonts.googleapis.com/css?family=Mooli");

* {
	--font-color: #170016;
	--blue: #d6ffff;
	--pink: #ff59af;
	--pink-trans: #ffd1e8d9;
	--icon-white: #fff;
	--twitter: var(--icon-white);
	--twitter-con: var(--pink);
	--twitter-con-trans: var(--pink-trans);
	--twitch: var(--icon-white);
	--twitch-con: var(--pink);
	--twitch-con-trans: var(--pink-trans);
	--youtube: var(--icon-white);
	--youtube-con: var(--pink);
	--youtube-con-trans: var(--pink-trans);
	--ko-fi: var(--icon-white);
	--ko-fi-con: var(--pink);
	--ko-fi-con-trans: var(--pink-trans);
	--discord: var(--icon-white);
	--discord-con: var(--pink);
	--discord-con-trans: var(--pink-trans);
	--button-border: var(--icon-white);
	transition: all .5s;
}

@media (prefers-color-scheme: dark) {
	* {
		--blue: #13151b;
		--twitter: #1DA1F2;
		--twitter-con: #1DA1F2;
		--twitter-con-trans: #1DA1F250;
		--twitch: #6441A5;
		--twitch-con: #6441A5;
		--twitch-con-trans: #6441A550;
		--youtube: #FF0000;
		--youtube-con: #FF0000;
		--youtube-con-trans: #FF000050;
		--ko-fi: #FF5E5B;
		--ko-fi-con: #FF5E5B;
		--ko-fi-con-trans: #F5640050;
		--discord: #7289DA;
		--discord-con: #7289DA;
		--discord-con-trans: #7289DA50;
		--button-border: var(--font-color);
	}
}

table, table * {
	border: 0;
}

a {
	text-decoration: none;
	color: var(--font-color);
	border-bottom: 1px dashed;
}

a:hover {
	color: var(--pink);
	border-bottom: 1px solid;
}

img {
	pointer-events: none;
	width: 100%;
}

h1,h2,h3,h4,h5,h6 {
	color: var(--font-color);
}

body,div {
	display: flex;
	flex-wrap: wrap;
	justify-content: inherit;
	align-content: inherit;
	width: inherit;
}

body {
	background-color: var(--blue);
	justify-content: center;
	align-content: flex-start;
	margin: auto;
  	font-family: "Mooli";
}

#main-wrapper {
	background-image: url("img/banner.png");
	background-repeat: no-repeat;
	background-size: contain;
	flex-direction: column;
	background-color: var(--pink-trans);
	border-radius: .5em;
	margin-top: 1em;
	margin-bottom: 1em;
	width: 100%;
	max-width: 1700px;
	padding: 20px;
}

#main-wrapper>div {
	width: 100%;
}

/* header */

#header {
	justify-content: end;
	border-radius: .5em .5em 0 0;
}

#header div:has(img) {
	justify-content: flex-start;
	transition: auto;
}

#header img {
	max-width: 30em;
	transition: auto;
}

/* social icons */

#socials {
	gap: 1vw;
}

#socials div {
	width: 4vw;
}

#socials svg {
	width: 100%;
}

.twitter {
	fill: var(--twitter);
	stroke: var(--twitter);
}

.twitch {
	fill: var(--twitch);
	stroke: var(--twitch);
}

.youtube {
	fill: var(--youtube);
	stroke: var(--youtube);
}

.ko-fi {
	fill: var(--ko-fi);
	stroke: var(--ko-fi);
}

.discord {
	fill: var(--discord);
	stroke: var(--discord);
}

.icon-image {
	stroke: transparent;
	scale: 62%;
	transform: translate(30%,25%);
}

.icon-image.ko-fi {
	scale: 87%;
}

.icon-outline {
	fill: transparent;
	stroke-width: 5px;
}

#socials a:hover .icon-outline.twitter {
	stroke: var(--twitter-con);
	fill: var(--twitter-con-trans);
}

#socials a:hover .icon-image.twitter {
	fill: var(--twitter-con);
}

#socials a:hover .icon-outline.twitch {
	stroke: var(--twitch-con);
	fill: var(--twitch-con-trans);
}

#socials a:hover .icon-image.twitch {
	fill: var(--twitch-con);
}

#socials a:hover .icon-outline.youtube {
	stroke: var(--youtube-con);
	fill: var(--youtube-con-trans);
}

#socials a:hover .icon-image.youtube {
	fill: var(--youtube-con);
}

#socials a:hover .icon-outline.ko-fi {
	stroke: var(--ko-fi-con);
	fill: var(--ko-fi-con-trans);
}

#socials a:hover .icon-image.ko-fi {
	fill: var(--ko-fi-con);
}

#socials a:hover .icon-outline.discord {
	stroke: var(--discord-con);
	fill: var(--discord-con-trans);
}

#socials a:hover .icon-image.discord {
	fill: var(--discord-con);
}

/* navigation */

.navigation {
	gap: 2em;
	justify-content: center;
	margin: 2em auto 2em auto;
}

.navigation>div {
	width: auto;
}

.navigation a {
	letter-spacing: .2em;
	font-weight: lighter;
	padding: 0;
	margin: 0;
}

/* about-me */

#about-me p {
	max-width: auto;
}

#about-me img {
	max-width: 18em;
}

/* stream-art */

#stream-art img {
	width: 33.33%;
}

/* credits */

#credits {
	text-align: center;
}

#credits table {
	text-align: left;
	max-width: 30em;
}

#credits td {
	vertical-align: top;
}

#credits table:not(.emote) td:not(:first-child) {
	padding-left: 3em;
}

#credits table:not(.emote) td:first-child {
	width: 100%;
}

.emote td:first-child {
	padding-right: 3em;
}

img.emote,.emote img {
	max-width: 32px;
}

/* cloudbot-commands */

#cloudbot-commands table {
	text-align: left;
}

#cloudbot-commands th,#cloudbot-commands td {
	padding: .1em 1em .1em 1em;
}

/* imprint */

#imprint table {
	width: 25em;
	text-align: left;
}

/* footer */

#footer .navigation {
	scale: .8;
}

.buttons {
	gap: 1em;
	user-select: none;
}

.buttons p {
	margin: 0;
	padding: 0;
}

.buttons>a {
	border-radius: .5em;
	border: 4px solid var(--button-border);
	color: var(--button-border);
	padding: .5em;
	font-weight: bold;
	letter-spacing: 0.15em;
}

.buttons>a:hover {
	border-color: var(--pink);
	background-color: var(--pink-trans);
}

.buttons>a:hover p {
	color: var(--pink);
}

@media only screen and (max-width: 1700px) {
	#main-wrapper {
		margin: 0;
	}

	#header img {
		width: 30vw;
	}
}

@media only screen and (max-width: 1150px) {
	#about-me p {
		max-width: 18em;
	}
}

@media only screen and (max-width: 945px) {
	#about-me p {
		max-width: 22em;
	}

	#about-me img {
		max-width: 10em;
	}
}

@media only screen and (min-width: 1700px) {
	#socials div {
		width: 4em;
	}

	#socials svg {
		width: 100%;
	}
}

/* not actually on page */
.spacer {
	flex-grow: 1;
}

tr:not(tr:has(td,th)) {
	height: 1vh;
}

.noborder {
	border: 0;
}

.vertical {
	flex-direction: column;
}

.wrap {
	flex-wrap: wrap;
	text-wrap: wrap;
}

.nowrap {
	flex-wrap: nowrap;
}

.autowidth {
	width: auto;
}

.width100 {
	width: 100%;
}

.automargin {
	margin: auto;
}

.align-center {
	align-content: center;
	align-items: center;
}

.align-end {
	align-content: flex-end;
	align-items: flex-end;
}

.justify-end {
	justify-content: flex-end;
}