/**/

@import url("base.css");
@import url("header.css");

/*##############################################*/
/*             BODY AND SCROLLBAR               */
/*##############################################*/

/* Scrollbar */
::-webkit-scrollbar {
	background-color: var(--main-bg-color);
	width: .8vw;
	height: .8vw;
}

::-webkit-scrollbar-thumb {
	border-radius: 3vw;
}

/* Track */
::-webkit-scrollbar-track {
	background: var(--main-bg-color);
}

/* Handle */
::-webkit-scrollbar-thumb {
	background: var(--main-fg-color);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: var(--alt-fg-color);
}

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow-x: hidden;
	min-height: 100vh;
	width: 100vw;
	margin: 0;
	padding: 0;
	/* Scrollbar for firefox */
	scrollbar-color: var(--main-fg-color) var(--main-bg-color);
	/* background-image: url("/assets/img/website_bg_tile.png"); */
	/* background-size: 7vw; */
	background-repeat: repeat;
	background-image: var(--main-bg-grad);
}

#bg {
	z-index: -1;
	position: fixed;
	background-color: var(--alt-bg-color1);
	background-image: url("/assets/img/ui/pattern2.png") !important;
	filter: opacity(0.5);
	background-size: 3vw;
	image-rendering: crisp-edges;
	background-repeat: repeat;
	animation: backgroundScroll 5s linear infinite;
	background-position: center;
	height: 400%;
	width: 400%;
	overflow: hidden;
}

#buttons {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1vw;
	box-sizing: border-box;
	grid-area: buttons;
}

#buttons>img {
	object-fit: contain;
	image-rendering: crisp-edges;
	height: 2vw;
	margin: 0;
	background-color:var(--main-bg-color);
	padding: 0;
}


.about {
	grid-area: about;
}



.about p {
	overflow: visible;
}

.chat {
	grid-area: chat;
	display: flex;
	flex-direction: column;
}

#chat {
	flex-grow: 1;
}

.projects {
	grid-area: projects;
}

.art {
	grid-area: art;
}

.updates {
	grid-area: updates;
}

.rants {
	grid-area: rants;
}

footer {
	width: 100%;
	display: flex;
	padding: 0 var(--bar-padding);
	min-height: 15vw;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	margin-top: auto;
	background-color: var(--main-bg-color);
}


.card {
	border: var(--border);
	border-radius: var(--alt-border-radius);
	background-color: var(--main-bg-color);
	padding: var(--card-padding);
	margin: var(--card-margin);
	box-sizing: border-box;
	overflow: hidden;
	transition: 150ms ease-in-out;
}

.card-sticky {
	border: var(--border);
	border-radius: var(--alt-border-radius);
	background-color: var(--main-bg-color);
	padding: 0 var(--card-padding) var(--card-padding);
	margin: var(--card-margin);
	box-sizing: border-box;
	overflow: hidden;
	transition: 150ms ease-in-out;
}

.card-sticky :first-child {
	border-bottom: var(--border);
	background-color: var(--main-bg-color);
	top: 0;
	position: sticky;
	padding: var(--card-padding) 0 .8vw;
	margin-bottom: .8vw;
}

.card:hover {
	border-color: var(--border-color);
}

.nobar {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.nobar::-webkit-scrollbar {
	display: none;

}

.construction {
	box-sizing: border-box;
	width: 100%;
	/* padding: 2vw 0; */
}

/*##############################################*/
/*             Position Tags                    */
/*##############################################*/
/* It's probably a better idea to create a tag system based on card card-title card text card image etc.*/
.flex {
	display: flex;
}

.clearfix-scroll {
	padding: 1vw;
	overflow-y: scroll;
}

.scroll {
	overflow-y: scroll;
}

.center-column {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.center-rev {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row-reverse;
}

.left {
	display: flex;
	justify-content: left;
}

.t-left {
	text-align: left;
}

.t-right {
	text-align: right;
}

.f-left {
	float: left;
}

.f-right {
	float: right;
}

/*##############################################*/
/*                 Text Tags                    */
/*##############################################*/
h1,
h2,
h3,
h4,
h5,
h6,
strong {
	font-family: 'ComicSans';
	color: var(--alt-fg-color);
	text-decoration: none;
	padding: 0vw;
	margin: 0;
	list-style: none;
}

mark {
	font-weight: bolder;
	/* font-size: 0.9vw; */
	color: var(--main-fg-color);
	background-color: transparent;
}

btn {
	font-size: 1vw;
}

p,
a,
ul,
li,
footer {
	font-family: 'ComicSans';
	letter-spacing: 0.8px;
	text-decoration: none;
	text-align: center;
	color: var(--alt-fg-color);
	font-weight: 200;
}

h1 {
	font-size: 1.6vw;
	letter-spacing: 3px;
}

h2 {
	font-size: 1.5vw;
	letter-spacing: 2.5px;
}

h3 {
	font-size: 1.4vw;

	letter-spacing: 2.25px;
}

h4 {
	font-size: 1.3vw;

	letter-spacing: 2px;
}

h5 {
	font-size: 1.2vw;
	letter-spacing: 1.75px;
}

h6 {
	font-size: 1.1vw;
}

small {
	font-size: 0.6vw;
	padding: 0;
	margin: auto;
}

p {
	/* font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; */
	font-weight: 550;
	margin: 0;
	font-size: 1vw;
}

li,
ul {
	font-size: 0.8vw;
}


a {
	color: var(--main-fg-color);

}

a:hover {
	color: var(--alt-fg-color);
	text-decoration: none;
}

s {
	text-decoration-color: var(--main-fg-color);
	text-decoration-thickness: 2px;
}

ul {
	list-style-type: '';
	text-align: left;
	padding: 0;
	margin: 2vw;
	margin-block-start: 0em;
	padding-inline-start: 0em;
	margin-block-end: 0em;
}

pre {
	overflow: visible;
	font-size: 1vw;
}

.list {
	display: flex;
	justify-content: center;
	align-content: center;
}

li {
	font-size: 1vw;
	margin: .5vw 0;
	text-align: left;
}

i {
	letter-spacing: 0.5vw;
}

hr {
	border: var(--border);
	border-top: none;
	color: var(--border-color-alt);
	padding: 0;
	margin: .8vw 0;
}

.nomargin {
	padding: 0;
	margin: 0;
}

img,
iframe {
	border: var(--border);
	border-radius: var(--alt-border-radius);
	image-rendering: crisp-edges;
	box-sizing: border-box;
}


audio {
	margin-left: 4em;
	margin-right: 2em;
	height: 25px;
	width: 70%;
}



li,
.footer,
img,
.navbtn,
.gallery-image,
.sauce {
	transition: 0.1s ease-in-out;
}

.clearfix {
	overflow: hidden;
}

.footer {
	margin-top: 0;
	padding: 1vw;
	align-items: center;
	justify-content: center;
}

.link {
	display: flex;
	align-items: center;
	justify-content: center;
}


small:after {
	white-space: pre;
}

small:before {
	white-space: pre;
}

.pixel {
	image-rendering: pixelated;
}

.image-link {
	border-style: solid;
	border-width: 2px;
	border-color: #6d30df;
	width: 20em;
	height: 20em;
	border-radius: 50%;
}

.image-link:hover {
	border-color: var(--main-fg-color);
	height: 23em;
	width: 23em;
}

/*######################################################*/
/*                Mobile responsive                     */
/*######################################################*/

@media only screen and (max-width: 100px) {
	btn {
		font-size: 5vw;
	}

	.flex {
		display: block;
	}

	body {
		/* display: block !important; */
		background-position: 50% 50%;
		background-size: cover;
		text-align: left;
	}

	/* For mobile phones: */
	h1 {
		font-size: 7.5vw;
	}

	h2 {
		font-size: 7vw;
	}

	h3 {
		font-size: 6.5vw;
	}

	h4 {
		font-size: 5.5vw;
	}

	h5 {
		font-size: 5vw;
	}

	h6 {
		font-size: 4.5vw;
	}

	small {
		font-size: 3vw;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: 3vw;
	}

	p,
	li {
		line-height: 4vw;
		margin: 5vw;
		padding: 1vw;
		font-size: 3.5vw;
	}

	strong {
		font-size: 3.5vw;
	}

	.clearfix-scroll {
		overflow: hidden;
	}

	.webrings {
		margin-bottom: 0 !important;
	}

	.card {
		/* change color for better readibility on mobile*/
		text-align: center;
		align-content: center;
		align-items: center;
		padding: 2vw;
		margin: 2vw;
		border-width: 0;
		border-color: var(--border-color);
		border-radius: 2vw;
	}

	.f-left,
	.f-right {
		float: none;
	}

	.t-right,
	.t-left {
		text-align: center;
	}

	.cutegif {
		height: 0px;
		width: 0px;
		display: none;
	}

	img {
		display: auto;
		margin-left: auto;
		margin-right: auto;
		justify-self: center;
		height: 100%;
		width: auto;
	}

	ul {
		margin: 5vw;
	}

	ul>ul {
		margin: 2vw 5vw;
	}

	ul>li {
		text-align: auto;
	}

	li {
		text-align: left;
		margin: 0em;
		object-fit: cover;
	}

	div.center {
		display: flex;
		justify-content: center;
		margin: 0vw;
	}

	.center {
		padding: 0vw;
		margin: 0em;
		min-width: 100%;
		width: 100%;
		max-width: 100%;
	}

	ul.center {
		width: auto;
	}



	.splash-image {
		width: 100%;
		height: 100%;
		margin: 0;
		object-fit: contain;
		max-width: 1920px;
	}

	.footer {
		margin-top: 0;
		margin-bottom: 10vh;
	}

}

@keyframes hover {
	0% {
		transform: rotate3d(1, 1, 1, 0deg)
	}

	33% {
		transform: rotate3d(1, 1, 1, 10deg)
	}

	66% {
		transform: rotate3d(1, 1, 1, -10deg)
	}

	100% {
		transform: rotate3d(1, 1, 1, 0deg)
	}
}

@keyframes card-slide {
	0% {
		max-height: 0%;
		content-visibility: hidden
	}

	99% {
		max-height: 100%
	}

	100% {
		max-height: 100%;
		content-visibility: visible
	}
}

@keyframes hover-small {
	0% {
		transform: rotate3d(1, 1, 1, 0deg)
	}

	33% {
		transform: rotate3d(1, 1, 1, 5deg)
	}

	66% {
		transform: rotate3d(1, 1, 1, -5deg)
	}

	100% {
		transform: rotate3d(1, 1, 1, 0deg)
	}
}

@keyframes fade-in {
	from {
		filter: opacity(0%)
	}

	to {
		filter: opacity(100%)
	}
}

@keyframes fade-out {
	from {
		filter: opacity(100%)
	}

	to {
		filter: opacity(0%)
	}
}

@keyframes blur-out {
	from {
		backdrop-filter: blur(50px)
	}

	to {
		backdrop-filter: blur(0px)
	}
}

.blur-out-anim {
	animation-name: blur-out;
	animation-duration: 3s;
	animation-fill-mode: both;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1
}

.float-anim {
	animation-name: hover-small;
	animation-duration: 3s;
	animation-direction: alternate;
	animation-fill-mode: both;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite
}

.hover-anim:hover {
	animation-name: hover;
	animation-duration: 3s;
	animation-direction: alternate;
	animation-fill-mode: both;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite
}

.fade-anim,
main>section,
main>article {
	animation-name: fade-in;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1
}

.fade-out-anim {
	animation-name: fade-out;
	animation-duration: 1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1
}

.hover-anim-small:hover {
	animation-name: hover-small;
	animation-duration: 3s;
	animation-direction: alternate;
	animation-fill-mode: both;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite
}

.card-anim {
	animation-name: card-slide;
	animation-duration: 3s;
	animation-timing-function: cubic-bezier(0.05, 0.9, 0.1, 1.5);
	animation-fill-mode: both;
	animation-iteration-count: 1
}

@keyframes backgroundScroll {
	0% {
		transform: translate(-3vw, -3vw);
	}

	100% {
		transform: translate(0, 0);
	}
}