html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video
{
  margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent
}
body
{
  line-height:1
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section
{
  display:block
}
nav ul
{
  list-style:none
}
blockquote,q
{
  quotes:none
}
blockquote:before,blockquote:after,q:before,q:after
{
  content:none
}
a
{
  margin:0;
  padding:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
  text-decoration:none
}
mark
{
  background-color:#ff9;
  color:#000;
  font-style:italic;
  font-weight:bold
}
del
{
  text-decoration:line-through
}
abbr[title],dfn[title]
{
  border-bottom:1px dotted;
  cursor:help
}
table
{
  border-collapse:collapse;
  border-spacing:0
}
hr
{
  display:block;
  height:1px;
  border:0;
  border-top:1px solid #ccc;
  margin:1em 0;
  padding:0
}
input,select
{
  vertical-align:middle
}
li
{
  list-style:none
}

/* ---- base ---- */

html,body
{ 
	width:100%;
	height:100%;
	background:#111111;
}

html
{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body
{
  font: normal 75% Arial, Helvetica, sans-serif;
}

canvas
{
  display: block;
  vertical-align: bottom;
}

/* ---- particles.js container ---- */

#particles-js
{
  z-index: 1;
  
  width: 100%;
  height: 100%;
  background-color: #999999;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

/* ---- drosophila/ethereum logos ---- */

@media (orientation: landscape)
{
  #drosophila-logo
  {
    z-index: 2;
  
    position: absolute;
    top: 25%;
    height: 50%;
    left: 0;
    right: 0;
  
    margin: 0 auto;
  }

  #ethereum-logo
  {
    z-index: 2;

    position: absolute;
    top: 42%;
    height: 16%;
    left: 0;
    right: 0;

    margin: 0 auto;
  }
}

@media (orientation: portrait)
{
  #drosophila-logo
  {
    z-index: 2;
  
    position: absolute;
    top: 35%;
    width: 80%;
    left: 10%;
    right: 10%;
  
    margin: 0 auto;
  }  

  #ethereum-logo
  {
    z-index: 2;

    position: absolute;
    top: 45%;
    height: 10%;
    left: 0;
    right: 0;

    margin: 0 auto;
  }
}

@media (orientation: landscape)
{
  #blurb
  {
    width: 100%;
  
    background-color: #999999;
    color: #ff9;
    font: normal 120% Arial, Helvetica, sans-serif;
  }

  p
  {
    padding: 10px;
  }
  
  #about-ethphila
  {
    display: inline-block;
    vertical-align: top;
    width: 48%;
    height: 100%;
  
    padding: 1%;
  }
  
  #about-contact
  {
    display: inline-block;
    vertical-align: top;
    width: 47%;
    height: 100%;
  
    padding: 1%;
  }
}

@media (orientation: portrait)
{
  #blurb
  {
    width: 100%;
  
    background-color: #999999;
    color: #ff9;
    font: normal 140% Arial, Helvetica, sans-serif;
  }

  p
  {
    padding: 5px;
  }

  #about-ethphila
  {
    display: inline-block;
    vertical-align: top;
    width: 98%;
    height: 100%;
  
    padding: 1%;
  }
  
  #about-contact
  {
    display: inline-block;
    vertical-align: top;
    width: 98%;
    height: 100%;
  
    padding: 1%;
  }  
}

/* ---- social media icons ---- */
@media (orientation: landscape)
{
  .fa 
  {
    padding: 10px;
    font-size: 30px;
    width: 18px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
  }  
}

@media (orientation: portrait)
{
  .fa 
  {
    padding: 10px;
    font-size: 60px;
    width: 20px;
    text-align: center;
    text-decoration: none;
    border-radius: 50%;
  }  
}

.fa:hover 
{
  opacity: 0.7;
}

.fa-facebook 
{
  background: #3B5998;
  color: #FFFFFF;
}

.fa-twitter 
{
  background: #55ACEE;
  color: #FFFFFF;
}

.fa-pinterest
{
  background: #C8232C;
  color: #FFFFFF;
}

.fa-instagram
{
  background: #125688;
  color: #FFFFFF;
}

.fa-youtube
{
  background: #c4302b;
  color: #FFFFFF;
}

.fa-linkedin
{
  background: #0077B5;
  color: #FFFFFF;
}

.fa-foursquare
{
  background: #FA4779;
  color: #FFFFFF;
}

.fa-envelope
{
  background: #1111FF;
  color: #FFFFFF;
}