Added modal screen, refactored background data load

src/App.css

@@ -1,10 +1,66 @@
+.modal-manager {
+ position: fixed;
+ z-index: 1;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(255, 255, 255, 0.9);
+ color: #ccc;
+ cursor: default;
+ user-select: none; }
+
+.main-modal {
+ position: fixed;
+ z-index: 2;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.79); }
+
+.colossus {
+ font-size: 4vmax;
+ font-family: 'Tangerine', serif;
+ text-align: left;
+ margin-top: 7.5%;
+ margin-left: 11%; }
+
+.image {
+ z-index: 2;
+ position: absolute;
+ right: 2%;
+ bottom: 0;
+ max-width: 100%;
+ height: auto;
+ margin: 0px 3px; }
+
+.image-credit {
+ z-index: 4;
+ position: fixed;
+ right: 5px;
+ bottom: 5px;
+ font-size: .75em;
+ color: #555; }
+
+.image-credit:hover {
+ color: #999;
+ cursor: default; }
+ .image-credit:hover a {
+ color: #999; }
+
+.image-credit a {
+ color: #555;
+ text-decoration: none; }
+
 path:hover {
  stroke: black;
  stroke-width: .25px;
  fill-opacity: .90; }
 
 .App {
- text-align: center; }
+ text-align: center;
+ font-family: 'Lato', sans-serif; }
 
 .App-header {
  background-color: #ffffff;
@@ -14,7 +70,10 @@ path:hover {
  color: black; }
 
 .App-title {
- font-size: 1.5em; }
+ font-size: 1.60em;
+ cursor: default;
+ user-select: none;
+ font-family: 'Playfair Display',sans-serif; }
 
 .D3-holder {
  min-height: 300px;
@@ -27,7 +86,9 @@ path:hover {
  margin: 5px 15px -5px 0px;
  text-align: right;
  font-size: 12px;
- color: #444444; }
+ color: #444444;
+ cursor: default;
+ user-select: none; }
 
 .slider-box {
  width: 700px;
@@ -37,7 +98,8 @@ path:hover {
 
 .fa {
  color: #666666;
- margin-right: 10px; }
+ margin-right: 10px;
+ cursor: pointer; }
 
 .slider {
  height: 20px;
@@ -178,7 +240,3 @@ path:hover {
 
 .toggle-box label:hover {
  color: #000000; }
-
-.info-visualizer {
- white-space: pre-wrap;
- text-align: left; }