new colors

src/App.js

@@ -50,16 +50,18 @@ class App extends React.Component {
 				<Row className="upperSection">
 					<Col
 						xs="12"
-						lg={this.state.isInfoToggled ? { span: 6, offset: 0, order: 2 } : { span: 7, offset: 1, order: 2 }}
+						lg={this.state.isInfoToggled ? { span: 8, offset: 0, order: 2 } : { span: 9, offset: 0, order: 2 }}
-						className="align-content-center pt-2 p-1 pr-2">
+						className="blackBg align-content-center">
+						<Col xs="12" lg={this.state.isInfoToggled ? { span: 10, offset: 1} : { span: 10, offset: 1 }}>
 						<ReactHeight onHeightReady={height => { this.setState({ playerHeight: height }) }}>
 							<VideoPlayer videoId={this.state.videoId} />
 						</ReactHeight>
 						</Col>
+					</Col>
 					<Col
 						xs="12"
-						lg={this.state.isInfoToggled ? { span: 5, order: 1 } : { span: 3, order: 1 }}
+						lg={this.state.isInfoToggled ? { span: 4, order: 1 } : { span: 3, order: 1 }}
-						className="p-0 p-xs-0"
+						className={this.state.isInfoToggled ? "": "blackBg"}
 						style={window.innerWidth < 992 ? 
 						{ 'overflow': "auto", 'display': 'fixed', 'maxHeight': this.state.playerHeight * 1.4 + 'px' } : 
 						{ 'overflow': "auto", 'maxHeight': `${this.state.playerHeight}px` }}>

src/css/App.css

@@ -1,8 +1,12 @@
 .upperSection{
-  background-color:#000000;
+  
   display: fixed;
 }
 
+.blackBg{
+  background-color:#000000;
+}
+
 .downSection{
   overflow-y: auto;
   overflow-x: hidden;

src/index.js

@@ -1,4 +1,6 @@
-import 'bootstrap/dist/css/bootstrap.css';
+//import 'bootstrap/dist/css/bootstrap.css';
+// import './css/bootswatch/darkly/bootstrap.min.css'
+import './css/bootswatch/superhero/bootstrap.min.css'
 import 'react-app-polyfill/ie9';
 //import '@babel/polyfill';
 import React from 'react';