html, body {
        margin:0;
        width:100%;
        min-width:100%;
        height:100%;}

  .container {
    margin-top: 4%;
    height: 90%;
    text-align: center;
    background-image: url(esther-hunziker_creature_gertraud.jpg);
    background-position: center; 
    background-repeat: no-repeat;
    background-size: contain;}
        
  .cover {
    display: inline-block;
    width: auto;
    height: 100%;
    margin: 0 auto;}
        
  .creature {
    position: relative;
    margin-top: 0%;
    margin-left: 2%;
    width: auto;
    height: 52%;
    transform: rotate(-22deg);
    opacity: 0.98;}
        
    @media only screen and (min-device-width: 375px) and (max-device-width: 820px) and (orientation: portrait) {
    .container {
      margin-top: 20%;
      height: 70%;}
        }