body {
	margin: 0px;
	font-family: Verdana, Geneva, sans-serif;
}

hr {
	max-width: 1000px;
	margin: 32px auto;
}

.gb-blue {
	color: #65A7FF;
	font-weight: bold;
}

.gb-green {
	color: #85D100;
	font-weight: bold;
}

.gb-red {
	color: #F66;
	font-weight: bold;
}

.gb-grey {
	color: #555;
	font-weight: bold;
}

#navbar {
	position: fixed;
	top: 0px;
	display: flex;
	align-items: center;
	width: 100%;
	height: 52px;
	background: rgb(25, 25, 30);
}
#navbar div {
	display: flex;
	align-items: center;
	max-width: 1200px;
	height: 52px;
	margin-left: auto;
	margin-right: auto;
}
#navbar h1 {
	margin: 0px 16px;
	width: 200px;
	font-size: 100%;
	color: #FFF;
}
#navbar nav a {
	margin: 0px 16px;
	color: #FFF;
}
#navbar nav a:hover {
	cursor: pointer;
}

#titlebanner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 400px;
	margin-top: 52px;
	background: rgb(25, 25, 30);
	background-image: url("images/titlebanner-background.png");
	background-position: center;
}
#titlebanner h1 {
	font-size: 80px;
	margin: 0px;
	color: #65A7FF;
	text-shadow: 4px 4px 9px #00000022;
}
#titlebanner p {
	font-size: 20px;
	color: #ffffff;
	padding: 8px;
	text-shadow: 2px 2px 4px #00000044;
	background: rgb(101 167 255 / 50%);
	border-radius: 10px;
}
#titlebanner div {
	margin: 16px;
}
#titlebanner div a {
	padding: 16px;
	box-sizing: border-box;
}
#titlebanner div select {
	margin: 0px 0px 0px 16px;
	padding: 8px;
	border-radius: 10px;
	cursor: pointer;
}
#btn-run {
	background: #65A7FF;
	color: #FFF;
	border-radius: 10px;
}
#btn-tutorial {
	color: #65A7FF;
	font-size: 80%;
	font-weight: bold;
	border-radius: 10px;
}

#intro-text {
	width: 1000px;
	margin: 50px auto 0px auto;
	color: #555;
	line-height: 1.5em;
	text-align: justify;
}

#supported-browsers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 1200px;
	margin: 24px auto 0px auto;
	color: #555;
	line-height: 1.5em;
}
#supported-browsers h3 {
	text-align: center;
	flex-basis: 100%;
}
#supported-browsers img {
	height: 64px;
	margin: 0px 8px;
}

#maincontent {
	display: flex;
	flex-wrap: wrap;
	max-width: 1200px;
	margin: 24px auto 0px auto;
	background: #FFF;
}
#maincontent .contentColumn {
	flex-basis: 25%;
	flex-grow: 1;
	margin: 0px 40px;
	color: #555;
	line-height: 1.5em;
	text-align: justify;
	box-sizing: border-box;
	min-width: 320px;
}

#examples {
	display: flex;
	flex-wrap: wrap;
	max-width: 1200px;
	margin: 0px auto;
	background: #FFF;
}
#examples .example {
	flex-basis: 100%;
	flex-grow: 1;
	margin: 0px 40px;
	color: #555;
	line-height: 1.5em;
	text-align: justify;
	box-sizing: border-box;
}
.example div {
	display: flex;
	justify-content: space-between;
}
.example div div {
	align-self: center;
	margin: 16px;
}
.example div p {
	margin: 16px;
}

footer {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 40px;
	font-size: 12px;
	color: #555;
}