html, body {
    margin: 0;
    padding: 0;
    background: #c7dfe0; /* same blue as your image */
} 
body { display: flex; 
       flex-direction: column; 
       justify-content: center; 
       align-items: center; 
       }
        
body{
    margin:0;
    display:flex;
    justify-content:center;
}

.scene{
    position:relative;
        width:100%;
    line-height:0;
}

.background{
    display:block;
    width:100%;
    height:auto;
}

.archiveicon{
    position:absolute;
    left:17%;
    top:28%;
    width:19%;
}

.instagramicon{
    position:absolute;
    left:65%;
    top:28%;
    width:11%;
}

.mailicon{
    position:absolute;
    left:67%;
    top:33%;
    width:17%;
}

.abouticon{
    position:absolute;
    left:41%;
    top:30%;
    width:17%;
}

.drawuwuicon{
  position: absolute;
  left:64%;
  top:49%;
  width:21%;
}

.zineicon{
  position: absolute;
  left:14%;
  top:71%;
  width:22%;
}

.tierlisticon{
  position: absolute;
  left:40%;
  top:72%;
  width:21%;
}


    
.mini-piano-container{
    position:absolute;
    left:39%;
    top:55%;

    transform:translateX(-50%);

    width:42%;          /* piano scales with scene */
    min-width:220px;    /* doesn't get too tiny */
    max-width:500px;

    background:linear-gradient(180deg,#ffb6c1 0%,#ff307c 100%);
    border-radius:1vw;

    padding:1vw;
    box-sizing:border-box;
}

.mini-piano{
    display:flex;
    position:relative;
    width:100%;
    height:6vw;
    min-height:50px;
}

.mini-key.white{
    flex:1;
    height:100%;

    background:linear-gradient(180deg,#f8f8f8 0%,#e8e8e8 100%);
    border:1px solid #ccc;
    border-radius:0 0 0.3vw 0.3vw;

    margin:0 1px;
}

.mini-key.black{
    position:absolute;

    width:4%;
    height:60%;

    background:linear-gradient(180deg,#ff307c 0%,#111 100%);
    border-radius:0 0 0.3vw 0.3vw;

    top:0;
    z-index:2;
}