@import url(./slices.css);
@import url(./panel.css);
@import url(./container.css);
@import url(./parallax.css);
@import url(./deco.css);

@font-face {
	font-family: 'chainsaw-carnage';
	src: url(../fonts/ChainsawCarnage.woff2);
}

@font-face {
	font-family: 'help-me';
	src: url(../fonts//HelpMe.woff2);
}

@font-face {
	font-family: 'pixel';
	src: url(../fonts//m5x7.ttf);
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

:root {
	--background-main: url(../images/bg.png);
	--background-button: orange;
	--background-card: wheat;
	--color-card: rgb(1, 1, 1);
	--color-link: #2f2f2f;

	--color-title: #000000;
	--color-button: wheat;
	--border: white;

	--overlay-width: 640px;
	--overlay-height: 361px;
}

body::before {
	content: '';
	background-image: url(../images/static.gif);
	background-repeat: repeat;
	background-position-x: 0px;
	background-position-y: 0px;

	width: calc(100% + var(--overlay-width));
	height: calc(100%);
	opacity: .05;
	pointer-events: none;
	position: fixed;
	display: block;
	animation: 10s AnimLeft linear infinite;
}

@keyframes AnimLeft {
	from {
		transform: translate(0px, 0px);
	}

	to {
		transform: translate(calc(var(--overlay-width) * -1), 0);
	}
}

body {
	background: var(--background-main) !important;
	margin: 0;
	image-rendering: pixelated;
}

.title {
	font-family: 'chainsaw-carnage';
	color: var(--color-title);
	text-shadow: black 2px 2px;
	text-align: center;
	font-size: 80px;
	font-weight: 1000;
	margin: 0;
}

.content-split {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.section-title {
	font-family: 'help-me';
	color: var(--color-title);
	text-shadow: black 2px 2px;
}

a:link,
a:visited,
a:hover,
a:active {
	color: var(--color-link);
	font-weight: 1000;
	/* font-family: 'help-me'; */
	margin: 3px;
}

.row {
	display: flex;
	align-items: center;
	align-items: end;
}

.logo {
	min-width: 200px;
	margin: 10px;
}

marquee,
.main-links {
	font-family: 'pixel';
}

.main-links {
	font-size: 30px;

}

.main-links .link {
	transition: .2s;
}

.link:hover {
	transform: translate(59px);
	color: green;
}

ul.horizontal {
	margin: 0;
}

ul.horizontal li {
	display: inline-block;
}

ul.horizontal li:before {
	font-size: 30px;
	content: '• ';
	color: black;
}

ul.horizontal li:first-child:before {
	content: '';
}

#spotify {
	display: none;
}

/* #region 


.link {
	padding: 5px;
	background: white;
	border-radius: 5px;
	text-decoration: none;
	color: brown;
	transition: .2s box-shadow, .3s scale;
	margin: 2px;
	height: fit-content;
}

.link:hover {
	box-shadow: 0px 0px 10px grey;
	scale: 1.05;
}

.row {
	display: flex;
	align-items: center;
}

.pixelated {
	image-rendering: pixelated;
}