@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Questrial&family=Work+Sans:ital,wght@0,100;1,100&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



html, body

{

	margin: 0;

	padding: 0;



	height: 100%;



	background-color: #222528;

}



body

{

	display: flex;

	overflow-x: hidden;

}



.mains

{

	display: flex;

	width: calc(100vw - 4em);

}



.no-overflow

{

	overflow: hidden !important;

}



.main

{

	position: relative;

	width: calc(100vw - 4em);



	min-height: 100%;

	height: fit-content;



	transition: 0.4s transform;

}



.main-new

{

	transition: 0.4s transform;

}



.main-old

{

	position: absolute;

}



.animation-down

{

	transform: translate(0, 100vh);

}



.animation-up

{

	transform: translate(0, -100vh);

}



.background

{

	position: absolute;



	width: calc(100%);

	height: 50vh;

	z-index: 0;



	background-image: url(/https/bytespace.network/res/bg.jpg);

	background-size: 110% auto;

	background-position: center;



	background-color: rgb(31, 31, 31);



	border-bottom: solid;

	border-color: white;

	border-width: 1px;

}



.content

{

	position: absolute;



	width: calc(100% - 3em);

	height: min-content;



	min-width: 50em;

	min-height: 30vh;



	top: 30vh;

	right: 0.5em;

	z-index: 2;

}



@media only screen and (max-width: 55em) {

	.content

	{

		left: 0.5em;

	}

}



.content-wrapper

{

	display: grid;

	grid-template-columns: 20em auto;



	position: relative;

}



.left

{

	min-height: 10em;

}



.right

{

	

}



.cover-image

{

	width: calc(100% - 0.5em);

	aspect-ratio: 1;



	border-radius: 1em;



	background-image: url(/https/bytespace.network/res/bytespacelogo.jpg);

	background-position: center;

	background-size: cover;



	box-shadow: 0px 5px 15px 5px rgba(0,0,0,0.37);

}



.main-info-box

{

	height: fit-content;

	margin-left: 0.5em;

	padding: 1em;



	border-radius: 1em;



	backdrop-filter: blur(5px);



	color: white;

	background-color: #000000b7;

}



.main-info-box-container

{

	display: flex;

	justify-content: flex-end;

	flex-direction: column;



	width: 100%;

	height: 19.5em;

}



.main-info-box h1

{

	margin:0;



	font-size: 5em;

	font-family: 'Questrial';

	font-weight: 100;

}



.main-info-box p

{

	margin: 0;

	margin-top: 0.5em;



	opacity: 0.7;



	font-size: 1.5em;

	font-family: 'Questrial';

	font-weight: 100;

}



.linkepanel, .panel

{

	width: calc(100% - 0.5em);

	margin-top: 1.3em;



	overflow: auto;
	overflow-x: hidden;



	color: white;

	background-color: #111111;

	border-radius: 1em;

}



.linkepanel h1

{

	width: 100%;

	margin-top: 0.5em;

	margin-bottom: 0.4em;



	text-align: center;

	font-size: 2em;

	font-family: 'Questrial';

	font-weight: 100;

}



.panel h1

{

	width: 100%;

	margin-top: 0.5em;

	margin-bottom: 0.4em;



	text-align: center;

	font-size: 2em;

	font-family: 'Questrial';

	font-weight: 100;

}



.panel p

{

	width: 95%;

	margin-left: 1em;



	font-family: 'Work Sans';

}



.panel a

{

	color: rgb(230, 87, 87);

}



.linkepanel a

{

	display: block;

	width: 80%;



	margin-left: auto;

	margin-right: auto;

	margin-bottom: 0.4em;

	padding: 0.5em;



	color: white;



	border-radius: 0.3em;



	text-decoration: none;

	text-align: center;

	font-size: 1.5em;

	font-family: 'Questrial';

}



.linkepanel p

{

	width: 100%;



	opacity: 0.5;



	text-align: center;

	font-family: 'Questrial';

}



.linkepanel a:last-child

{

	margin-bottom: 0.8em;

}



.button-red    { background-color: #C35656; }

.button-yellow { background-color: #CBB155; }

.button-green  { background-color: #3C9D34; }

.button-blue   { background-color: #348A9D; }



.main-text

{

	overflow: auto;

	margin-top: 1em;
	margin-bottom: 1em;

	margin-left: 0.5em;

	padding: 1em;



	color: white;

	background-color: #111111;

	border-radius: 1em;



	font-size: 1.2em;

	font-weight: 300;

	font-family: 'Work Sans';

}



.main-text h1

{

	margin: 0;

	margin-bottom: 0.5em;



	font-size: 1.7em;

	font-family: 'Questrial';

}



.main-text p

{

	margin: 0;



	font-size: 1.2em;

	font-weight: 300;

	font-family: 'Work Sans';

}



.main-text a

{

	color: rgb(226, 120, 120);

}





.apps

{

	width: calc(100% - 4em);



	display: flex;

	flex-wrap: wrap;

}



.app

{

	width: 10em;

	min-width: 10em;

	height: 15em;



	margin: 0.5em;



	background-color: #00000080;

	background-position: center;

	background-size: cover;

	border-radius: 1em;

}



.app .bgblur

{

	width: 100%;

	height: 15em;



	backdrop-filter: blur(5px);

	border-radius: 1em;



	padding-top: 1em;

}



.app .cover

{

	width: 7em;

	height: 7em;



	margin-left: auto;

	margin-right: auto;

	margin-bottom: 0.5em;



	background-color: white;

	background-position: center;

	background-size: cover;



	border-radius: 100%;

	border-style: solid;

	border-width: 2px;



	box-shadow: 5px 8px 15px 5px rgba(0,0,0,0.45);

}



.app .appname

{

	width: calc(100% - 0.5em);



	margin: 0.25em;

	

	text-align: center;

	font-weight: 600;

	font-size: 1em;

}



.app .playtime

{

	width: calc(100% - 0.5em);



	margin: 0.25em;

	margin-top: 0.5em;



	color: #FFFFFFDD;



	text-align: center;

	font-weight: 300;

	font-size: 0.8em;

}