<link href="https://fonts.googleapis.com/css?family=Archivo+Black|Oswald" rel="stylesheet">



<div id = "container">
<div id="particles-js" class = "particles">
  </div> 
  <div id = "holderOne" class = "holder">
<!--    <div id = "particles-jsMiniOne"> </div> -->
    <div class = "mini">
      Octavia
    </div>
    <div class = "title">
      Butler
    </div>
    
        </div>
  <div id="particles-jsTwo" class = "particles">
  </div> 
  <div id = "holderTwo" class = "holder">
 <div class = "mini">
   Jorge Luis
    </div>
    <div class = "title">
      Borges
    </div>
  </div>
  <div id="particles-jsThree" class = "particles">
  </div> 
  <div id = "holderThree" class = "holder">
     <div class = "mini">
       James
    </div>
    <div class = "title">
      Baldwin
    </div>
  </div>
  </div> 
  
  

body {
/*    background-color: rgba(  6, 52, 87,1); */
     background-color: rgba(  6, 52, 87,.1);
  font-family: 'Oswald', sans-serif;
  color: rgba(253, 238, 192, 1);
  font-size: 50px;
   text-align: center;
}

#container{

  height:100vh;
  width: 93vw;
  display:grid;
  grid-template-rows:85vh 9vh;
    grid-template-columns:30vw 30vw 30vw;
  grid-gap: .3em;
  margin: auto;
}


/* ---- particles.js container ---- */
.particles{
    border: .3em solid rgba(68, 68, 68,.3);
}
#particles-js{

  grid-column: 1/1;
    grid-row: 1/1;
  background-color: rgba(  6, 52, 87,1);

  width: 90%;
/*   margin: auto; */
}

#particles-jsTwo{
  grid-column: 2/2;
  grid-row: 1/1;
/*   background-color: #061539; */
  background-color: #fcfcfc;
    width: 90%;
/*   margin: auto; */
}

#particles-jsThree{
  grid-column: 3/3;
    grid-row: 1/1;
    background-color:#1A1A1A;
    width: 90%;
/*   margin: auto; */
}

#particles-jsMiniOne{
top:0;
}

.holder {
  background-color: rgba(68, 68, 68,.1);
  padding: .1em;
  color: #141414;
  width: 90%;
/*   box-shadow: 0em -.5em 1em rgba(68, 68, 68,.3); */
  font-family: 'Archivo Black', sans-serif;
  text-shadow: 2px 2px 1px #fcfcfc;
/*     text-shadow: 2px 2px 1px #444; */
  text-transform: uppercase;
}


#holderOne{
  grid-column: 1/1;
  grid-row: 2/2;

}
#holderTwo{
  grid-column: 2/2;
  grid-row: 2/2;
}
#holderThree{
  grid-column: 3/3;
  grid-row: 2/2;
}

.title{
  left: 1em;
/*   position: absolute; */
  
}

.mini{
  font-size: 35%;

}

jQuery("title").fitText(1.2, { minFontSize: '85em', maxFontSize: '150em' });
/* Particles */

particlesJS("particles-js", 
{"particles":
{"number":
//inititial number
{"value":700,"density":

{"enable":true,"value_area":1200}},

 //node color 
"color": {"value":"#042037"},

 "shape":
{"type":"circle","stroke":
{"width":.1,"color":"#6B0062"},"polygon":
{"nb_sides":5},
"image":
{"src":"img/github.svg","width":100,"height":100}},
"opacity":
{"value":0.5,"random":false,"anim":
{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},
"size":
{"value":2.5,"random":false,"anim":
{"enable":false,"speed":20,"size_min":0.1,"sync":false}},
 //'edges' connectors between two nodes
"line_linked":
{"enable":true,"distance":150,
 "color":"#226666",
 // "color":"#EF6E73",
 "opacity":0.4,"width":1},

"move":
{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":
{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":
{"detect_on":"canvas","events":
{"onhover":
{"enable":true,"mode":"repulse"},"onclick":
{"enable":true,"mode":"push"},"resize":true},"modes":
{"grab":
{"distance":400,"line_linked":
{"opacity":1}},"bubble":
{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":
{"distance":100,"duration":0.4},"push":
{"particles_nb":4},"remove":


{"particles_nb":2}}},"retina_detect":true});

/* Particles Two */

particlesJS("particles-jsTwo", 
{"particles":
  // Number of particles at start
 {"number":
    {"value":800,"density":
      {"enable":true,"value_area":1200}},
  // Node color 
  "color": {
    // "value":"#0E0E52"
     "value":"#fcfcfc"
    
  },
 // Node stroke and size
 "shape":
  {"type":"circle",
   "stroke":
    {"width":.1,
     "color": "#192BC2"
    },
   "polygon":
    {"nb_sides":5},

"image":
{"src":"img/github.svg","width":100,"height":100}},

"opacity":
  {"value":1,"random":false,"anim":
{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},

"size":
{"value":2.5,
 "random":false,"anim":
{"enable":false,"speed":20,"size_min":0.1,"sync":false}},

 //'edges' connectors between two nodes
"line_linked":
{"enable":true,"distance":150,
 // "color":"#78C0E0",
 "color":"#5677AC",
 "opacity":0.7,"width":1},

"move":
{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":
{"enable":false,"rotateX":600,"rotateY":1200}}},
 "interactivity":
{"detect_on":"canvas","events":
{"onhover":
{"enable":true,"mode":"repulse"},
 
 "onclick":
{"enable":true,"mode":"bubble"},"resize":true},
 "modes":
{"grab":
{"distance":400,"line_linked":
{"opacity":1}},"bubble":
{"distance":250,"size":10,"duration":2,"opacity":8,"speed":3},"repulse":
{"distance":100,"duration":0.4},"push":
{"particles_nb":4},"remove":


{"particles_nb":2}}},"retina_detect":true});

/* Particles THree*/
particlesJS("particles-jsThree", 
{"particles":
{"number":{"value":1700,"density":
{"enable":true,"value_area":1300}},
 //node color 
"color": {"value":"#F0922D"},
 "shape":
{"type":"circle","stroke":
{"width":.1,"color":"#6B0062"},"polygon":
{"nb_sides":5},
"image":
{"src":"img/github.svg","width":100,"height":100}},
"opacity":
{"value":0.5,"random":false,"anim":
{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},
"size":
{"value":2.5,"random":false,"anim":
{"enable":false,"speed":20,"size_min":0.1,"sync":false}},
 //'edges' connectors between two nodes
"line_linked":
{"enable":true,"distance":150,
 "color":"#AA3939",
 // "color":"#EF6E73",
 "opacity":0.4,"width":1},
"move":
{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":
{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":
{"detect_on":"canvas","events":
{"onhover":
{"enable":true,"mode":"repulse"},"onclick":
{"enable":true,"mode":"bubble"},"resize":true},"modes":
{"grab":
{"distance":400,"line_linked":
{"opacity":1}},"bubble":
{"distance":250,"size":15,"duration":2,"opacity":8,"speed":2},"repulse":
{"distance":100,"duration":0.4},"push":
{"particles_nb":4},"remove":


{"particles_nb":2}}},"retina_detect":true});