@media screen and (max-width: 800px) {
  html {
    position: relative;
    min-height: 99%;
  }

  body {
    background:url(background-nocros.jpg) no-repeat top left fixed;
    background-position-x: 30%;    
  }

  #jupiter {
    display: none;
  }

  #juice {
    position: absolute;
  }

  #juice img {
    position: fixed;
    bottom: -70px;
    right:-50px;
    width: 65%;
    height: auto;
    max-width: 65%;
    z-index: -1;
    opacity: 0.80;
    filter: alpha(opacity=80);
}

  #bio {
    margin: auto;
    top: 100px;
    width: 100%;
    
    padding: 5px;
    z-index: 10;

    /*background-color:rgba(0, 0, 0, 0.4);
    background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(0,0,0,0.8));*/

    color: white;
    font-size: 14px;
  }

  #bio h1 {
    font-weight: 900;
    color: #FCD2B5;
    font-size: 24px;  
  }

  #bio h2 {
    font-weight: 500;
    font-size: 17px;
    padding-bottom: 5px;
  }

  .container {
    margin-bottom: 80spx;
    margin-top: 10px;    
  }

  .footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
    height: 60px;
    font-size: 13px;
  }

  .footer-item {
    padding: 5px;
    text-align: center;
    text-decoration: none;
  }

  .footer-item img {
    width: 33px;
  } 
}
@media screen and (min-width: 800px) {
  html {
    position: relative;
    min-height: 99%;
  }

  body {
    font-family: 'Roboto';
    background:url(background-nocros.jpg) no-repeat top left fixed;
    background-size: cover;  
  }

  .container {
    margin-bottom: 60px;
    margin-top: 100px;
  }

  #jupiter {
      position: fixed;
  }
  #jupiter img {
      position: fixed;
      top: 50px;
      right: 25px;
      width: 20%;
      height: auto;    
  }

  #juice {
      position: absolute;
  }

  #juice img {
      position: fixed;
      bottom:-150px;
      right:-50px;
      width: 35%;
      height: auto;
      max-width: 35%;
      z-index: -1;
  }

  #bio {
    margin: auto;
    top: 100px;
    width: 70%;
    
    padding: 10px;
    z-index: 10;

    /*background-color:rgba(0, 0, 0, 0.4);
    background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(0,0,0,0.8));*/

    color: white;
    font-size: 18px;
  }

  #bio h1 {
    font-weight: 900;
    color: #FCD2B5;
    font-size: 48px;  
  }

  #bio h2 {
    font-weight: 500;
    font-size: 36px;
    padding-bottom: 5px;
  }

  .footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
    height: 60px;
  }

  .footer-item {
    padding: 5px;
    text-align: center;
    text-decoration: none;
  }

  .footer-item img {
    width: 45px;
  } 
}

/* common */
#bio span {  
  color: #E194BF;
}

a:link, a:visited, a:active {
  color:  #E194BF !important;
  font-weight: 700;  
}

a:hover {
  color: #FCD2B5 !important;
  text-decoration:unset !important;
}