html, body {
  padding: 0;
  margin: 0;
  font-family: helvetica, sans-serif;
  min-height: 100vh;
  background: #00b1ae;
}

#cover_img {
  background: url("../images/cover.jpg") no-repeat;
  background-size: 100% auto;
  padding: 0;
  width: 100vw;
  height: 100%;
  position: fixed;
  top: 0;
}

.bubble { 
  display: inline-block;
  width: 10%;
  background: #ffffff;
  color: #007676;
  border-radius: 50%;
  text-align: center;
  padding: 2% 4%;
  justify-content: center;
  position: relative;
  margin: 3%;
  font-weight: bold;
}

.invert {
  color: #ffffff;
  background: #007676;
  cursor: pointer;
  text-decoration: none;
  font-size: 1.5em;
}

.invert:hover {
  color: #007676;
  background: #ffffff;
}

@media only screen and (orientation: portrait) {
  #cover_img {
    background: url("../images/cover_mobile.jpg") no-repeat;
    background-size: 100% auto;
  }
  
  .bubble { 
    width: 94%;
    box-sizing: border-box;
  }
  
  #bubble_container {
    margin-top: 100%;
  }
}