html {
	height: 100%;
	overflow: hidden;
}

body{
	font-family: "Raleway", Helvetica, Arial, sans-serif;
	color:white;
	
	height: 100%;
	perspective: 1px;
	transform-style: preserve-3d;
	overflow-y: auto;
	overflow-x: hidden;
}

section{
	height: 100vh;
}

#reactWebsite{
	pointer-events: none;
}

main{
	pointer-events: all;
}

header{
	pointer-events: all;
	width: 100vw;
	background-color:black;
	box-shadow: 0rem 0.3rem 1rem black;
}

footer{
	background-color:black;
	box-shadow: 0rem -0.3rem 1rem black;
}

h1, h2, h3, h4, h5, h6{
	font-family: 'Roboto Condensed', sans-serif;
}

a, a:hover, a:active{color: inherit;}

.navbar{padding: 0;}

.navBuzzMain{
	text-decoration: none;
	text-indent: 3rem;
}
@media(min-width: 768px){.navBuzzMain{text-indent: 0rem;}}

.navBuzzMain:hover{
	text-shadow: 0 -2px 2px #fff;
}

.navBuzzMain.active {
	background-color: #666f7c;
}

.buzztorquois.roundedbox{
	background-color:rgba(0, 110, 143, 0.7);
	border-radius: 15px;
	text-shadow: 0 -1px 1px rgba(0, 0, 0, 1);
}

.buzztitle {
	text-transform: uppercase;
	color: #fff;
	border: 3px dashed #20c997;
	border-radius: 10px;
	text-align: center;
	background: black;
	text-shadow: none;
	padding: 0.5rem 2rem;
	margin: 2rem 0rem;
}
.buzztitle:hover{text-decoration: none;}

.buzzheading {
	text-transform: uppercase;
	color: #000;
	border: 3px solid #000;
	text-align: center;
	background: white;
	text-shadow: none;
	font-weight: bold;
	padding: 0.5rem 2rem;
	margin: 2rem 0rem;
}

.issuugrey {
	background: #353535;
	width: 100%;
	padding: 2%;
	border-radius: 5px;
	box-shadow: 0px -10px 50px 2px black;
}

.buzzgrey{background-color:#ededed;}
.buzzyellow{background-color:#666f7c;}
.buzztorquois{background-color:#006e8f;}
.buzzgreen{background-color:#6fa945;}

#buzzMain {
	position: relative;
	z-index:-1;
	box-sizing: border-box;
	/*box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);*/
	transform-style: inherit;
}


.triangles, #buzzMain:before{
	height: 100vh;
	background-repeat: repeat;
	background-image: url("data:image/svg+xml,%3Csvg id='trig2' version='1.1' width='500' height='500' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 1000'%3E%3Cpolygon points='0,0 250,0 0,250' fill='%236fa945' /%3E%3Cpolygon points='350,300 600,300 600,050' fill='%23666f7c' /%3E%3Cpolygon id='torquois' points='150,800 400,800 400,550' fill='%23006e8f' /%3E%3Cpolygon points='100,400 100,600 300,600' fill='%236fa945' /%3E%3Cpolygon points='700,500 700,700 900,700' fill='%23666f7c' /%3E%3Cpolygon points='750,300 850,300 850,400' fill='%23006e8f' /%3E%3C/svg%3E");
}

#buzzMain:before {
	transform: translateY(-30vh) translateZ(-1px) scale(2);
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

@media(min-width:576px){#buzzMain:before {transform: translateY(-30vh) translateZ(-1px) scale(2);}}
@media(min-width:768px){#buzzMain:before {transform: translateY(-30vh) translateZ(-1px) scale(2);}}
@media(min-width:992px){#buzzMain:before {transform: translateY(-30vh) translateZ(-1px) scale(2);}}
@media(min-width:1200px){#buzzMain:before {transform: translateY(-30vh) translateZ(-1px) scale(2);}}

section.buzzScrollbar{
	margin-right: -8px;
}
.buzzScrollbar::-webkit-scrollbar{
	/* must be present to enable scroll bar */
}

.buzzScrollbar::-webkit-scrollbar-thumb{
	background:-webkit-gradient(linear,left top,left bottom,from(#666f7c),to(#006e8f));background:linear-gradient(to bottom,#666f7c,#006e8f);
	border-radius:30px;
	-webkit-box-shadow:inset 2px 2px 2px rgba(255,255,255,.25),inset -2px -2px 2px rgba(0,0,0,.25);
	box-shadow:inset 2px 2px 2px rgba(255,255,255,.25),inset -2px -2px 2px rgba(0,0,0,.25)
}

.buzzScrollbar::-webkit-scrollbar-track{
	box-shadow: 1px 1px 1px 1px  rgba(255,255,255,0.3) inset;
	-webkit-box-shadow: 1px 1px 1px 1px  rgba(255,255,255,0.3) inset;
	background: black;
}
