body {
  background-color: #0C1609;
  background-image: url('img/GrouseGrind_bg.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  font-family: 'Droid Sans', sans-serif;
  font-size: 24px;
  color: white;
  margin: 0px;
  padding: 0px;
}
a {
  color: #C4DEC4;
  text-decoration: none;
}
a:link {
  color: #C4DEC4;
}
a:visited {
  color: #C4DEC4;
}
a:hover {
  color: #C4DEC4;
  text-decoration: underline;
}
a:active {
  color: #C4C4DE;
}
div.Bubble {
  display: block;
  box-sizing: border-box;
  background-color: #EEF2EE;
  border-width: 5px;
  border-style: solid;
  border-color: white;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  text-align: center;
  text-decoration: inherit;
  position: relative;
}
div.Bubble div.BubbleCaption {
  text-decoration: inherit;
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: -2em;
}
a div.Bubble:hover {
  border-color: #C4DEC4;
}
div#Me {
  width: 70vw;
  height: 70vw;
  margin: 0px auto;
  background-image: url('img/me.jpg');
  margin-top: 2em;
}
div.Aspect {
  width: 50vw;
  height: 50vw;
  margin: 0px auto;
  margin-top: 5em;
}
div#Dawghaus {
  background-image: url('img/Dawghaus_bg.jpg');
}
div#Snapture {
  background-image: url('img/Snapture_bg.jpg');
}
div#Politics {
  background-image: url('img/Politics_bg.jpg');
}
div#Sports {
  background-image: url('img/Sports_bg.jpg');
}
div#Projects {
  background-image: url('img/Projects_bg.jpg');
}
div#Ragen {
  background-image: url('img/Ragen_bg.jpg');
}
div#Adventures {
  background-image: url('img/Adventures.jpg');
}
div#ReCycles {
  background-image: url('img/ReCycles_bg.jpg');
}
div#CANARIE {
  background-image: url('img/CANARIE_bg.png');
}
ul#Contact {
  padding: 0px;
  margin: 0px;
  margin-top: 5em;
}
ul#Contact li {
  box-sizing: border-box;
  text-align: center;
  margin: 0px;
  margin-left: 5ex;
  margin-right: 5ex;
  padding: 0.5em;
  overflow: hidden;
  white-space: nowrap;
  list-style-type: none;
  border-width: 0px;
  border-style: solid;
  border-color: white;
  border-top-width: 3px;
}
ul#Contact li:last-child {
  border-bottom-width: 3px;
  margin-bottom: 2em;
}
/* regular browsers */
@media (min-width: 800px) and (min-device-width: 600px) {
  body {
    font-size: 18px;
    overflow: hidden;
  }
  div.Bubble {
    position: absolute;
  }
  div#Me {
    background-image: url('img/me.jpg');
    width: 25%;
    height: 25%;
    margin: 0;
    margin-left: -12.5%;
    margin-top: -10.5%;
    left: 50%;
    top: 50%;
  }
  div.Aspect {
    width: 15%;
    height: 15%;
    margin: 0;
    margin-left: -7.5%;
    margin-top: -7.5%;
  }
  div#Dawghaus {
    left: 69%;
    top: 23%;
  }
  div#Snapture {
    left: 82%;
    top: 44%;
  }
  div#Politics {
    left: 31%;
    top: 77%;
  }
  div#Sports {
    left: 56%;
    top: 82%;
  }
  div#Projects {
    left: 23%;
    top: 31%;
  }
  div#Ragen {
    left: 18%;
    top: 56%;
  }
  div#Adventures {
    left: 18%;
    top: 56%;
  }
  div#ReCycles {
    left: 77%;
    top: 69%;
  }
  div#CANARIE {
    left: 44%;
    top: 18%;
  }
  ul#Contact {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    bottom: 1em;
  }
  ul#Contact li {
    display: inline-block;
    width: 19.8%;
    height: 1em;
    margin: 0px;
    padding: 0px;
    padding-left: 2ex;
    padding-right: 2ex;
    overflow: hidden;
    white-space: nowrap;
    list-style-type: none;
    border-width: 0px;
    border-style: solid;
    border-color: white;
    border-left-width: 2px;
    border-right-width: 2px;
  }
  ul#Contact li:first-child {
    border-left-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 0px;
    margin: 0px;
  }
  ul#Contact li:last-child {
    border-right-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 0px;
    margin: 0px;
  }
}
/* a lame attempt at targetting high-res mobile devices */
@media (min-width: 800px) and (max-device-width: 600px) {
  body {
    font-size: 24pt;
  }
}