body {
	background-color: black;
}


@font-face {
	font-family: "ff";
	src: url(AtlasGrotesk-Light.otf);
}



#stream {
	margin: 0 auto;
	position: fixed;
	width: 100vw;
	height: 100vh;
}

#fuckthis {
	width: 120%;
	height: 120%;
	position: absolute;
	top: -10%;
	left: -10%;
}

h1{
	font-family: "ff";
	font-size: 3em;
	color: red;
}

#main {
	position: fixed;
	z-index: 9;
	width: 90vw;
	top: 0;
	left: 7%;
}

#bot{
	position: fixed;
	z-index: 9;
	width: 20vw;
	bottom: 0;
	left: 7%;
}

#bot2{
	position: fixed;
	z-index: 9;
	width: 20vw;
	bottom: 10%;
	left: -3%;
	transform: rotate(90deg);
}

#botrig{
	position: fixed;
	width: 20vw;
	z-index: 9;
	bottom: 0;
	right: 7%;
}

#toprig{
	position: fixed;
	width: 20vw;
	z-index: 9;
	top: 0;
	right: 3%;
}

#toprig2{
	position: fixed;
	width: 20vw;
	z-index: 9;
	top: 22%;
	right: -2%;
	transform: rotate(90deg);
}

a{
	text-decoration: none;
}

#maintext{
	position: absolute;
	width: 100vw;
	z-index: 9;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

h1{
	font-family: "ff";
	font-size: 1em;
	color: red;
}

#main {
	position: fixed;
	z-index: 9;
	width: 90vw;
	top: 0;
	left: 7%;
}

#bot{
	position: fixed;
	z-index: 9;
	width: 20vw;
	bottom: 0;
	left: 7%;
}

#bot2{
	position: fixed;
	z-index: 9;
	width: 20vw;
	bottom: 21%;
	left: -3%;
	transform: rotate(90deg);
}

#botrig{
	position: fixed;
	width: 20vw;
	z-index: 9;
	bottom: 0;
	right: 7%;
}

#toprig{
	position: fixed;
	width: 20vw;
	z-index: 9;
	top: 0;
	right: 6%;
}

#toprig2{
	position: fixed;
	width: 20vw;
	z-index: 9;
	top: 22%;
	right: -3%;
	transform: rotate(90deg);
}
}