::-webkit-scrollbar {
	width: 5px;
}
::-webkit-scrollbar-track {
	background: rgba(228,228,228,1);
}
::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 50px;
	margin-right: 5px;
	width: 5px;
}
::-webkit-scrollbar-thumb:hover {
	background: #555;
} 
@media (prefers-color-scheme: dark){
	::-webkit-scrollbar-track {
		background: rgba(32,32,32,1);
	}
	::-webkit-scrollbar-thumb {
		background: #b1b1b1;
	}
	::-webkit-scrollbar-thumb:hover {
		background: #dbdbdb;
	} 
}
:root {
	background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(228,228,228,1) 100%);
	overflow-x: hidden;
	overflow-y: scroll;
}
#scrollbg {
	background: url(/assets/tile.png);
	animation: scrollbackground 8s linear infinite;
	margin: 0;
	padding: 0;
	position: fixed;
	top: 0;
	opacity: 1;
	left: -50px;
	width: calc(100vw + 50px);
	height: 100vh;
	z-index: -100;
}
html{
	margin: 0;
	width: 100%;
	height: 100vh;
}
body{
	margin: 0;
	padding: 15px;
	font-family: 'DM Sans', 'DM Sans Regular';
	width: calc(100vw - 30px);
}
#container{
	opacity: 0;
    margin-left: 100vw;
	animation: pushIn 1s forwards;
	width: calc(100vw - 30px);
}
#backBtn{
	opacity: 0;
	animation: pushIn 1s forwards;
}


@media (prefers-color-scheme: dark){
	:root {
		background: radial-gradient(circle, rgba(52,52,52,1) 0%, rgba(32,32,32,1) 100%)
	}
	#scrollbg {
		background: url(/assets/tile-dark.png);
	}
	body{
		color: white;
	}
	a {
		color: white;
	}
}
@keyframes pushIn {
	to {
	    margin-left: 0;
		opacity: 1;
	}
}
@keyframes pushOut {
	to {
		margin-left: 100vw;
		opacity: 0;
	}
}
@keyframes scrollbackground {
	0% {
		trasnform: translateX(0);
	}
	100% {
		transform: translateX(50px);
	}
}

/* TV Fix? */

@media (min-width: 720px) {
    #container, #backBtn {
        animation: none;
        opacity: 1;
        margin-left: 0;
    }
	@keyframes pushIn {
		to {
			opacity: 1;
		}
	}
	@keyframes pushOut {
		to {
			opacity: 0;
		}
	}
	#scrollbg {
		animation: none;
	}
}



h1 {
	margin: 0px;
	margin-bottom: 15px;
}
.menu .obj::before {
	content: "";
	width: 24px;
	height: 24px;
	border: 6px solid black;
	border-radius: 50%;
	background-color: white;
	position: absolute;
	left: 15px;
	transform: translateX(-50%);
	z-index: 1;
}
.menu .obj {
	font-size: 1.5em;
	margin-bottom: 20px;
	margin-left: 45px;
}
.menu .obj:last-child {
	height: 36px;
}
.menu .obj:hover {
	left: 55px;
}
.menu .cobj::before {
	content: "";
	min-width: 24px;
	min-height: 24px;
	height: var(--custom-image-size);
	width: var(--custom-image-size);
	background: var(--custom-image-url);
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	left: 15px;
	transform: translateX(-50%);
	z-index: 1;
}
.menu .cobj {
	font-size: 1.5em;
	margin-bottom: 20px;
	margin-left: 45px;
}
.menu .cobj:last-child {
	height: 36px;
}
.menu .cobj:hover {
	left: 55px;
}
.menu {
	position: relative;
}
.menu::before {
	content: '';
	position: absolute;
	left: 12px;
	top: 12px;
	bottom: 12px;
	width: 6px;
	z-index: 0;
	background-color: var(--line-color);
}
@media (prefers-color-scheme: dark) {
	.menu::before {	
		background-color: var(--line-dark-color);
	}
}
.desc{
	margin: 0;
	font-size: 0.6em;
	opacity: 0.7;
}
#backBtn {
    position: absolute;
    bottom: 10px;
    left: 10px;
    cursor: pointer;
    background: #1179b3;
    border: 0;
    padding: 10px 15px;
    border-radius: 10px;
    color: white;
}