* {
  box-sizing: border-box;
}

body {
    background: plum;
    margin: 0;
}
#outer {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
}
#inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width:100%;
    height:100%;
}

#container {
    position:relative;
    top:0;
    left:0;
    aspect-ratio: 739/415;
    width:100%;
    height:auto;
}

#background {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:auto;
}
#homer {
    position:absolute;
    top:65%;
    left:82%;
    transform:translate(-50%, -50%);
    width:35%;
    height:auto;
}
#bart {
    position:absolute;
    top:70%;
    left:40%;
    transform:translate(-50%, -50%);
    width:25%;
    height:auto; 
}
#lisa {
    position:absolute;
    top:55%;
    left:15%;
    transform:translate(-50%, -50%);
    width:13%;
    height:auto; 
}
#dog {
    position:absolute;
    top:58%;
    left:58%;
    transform:translate(-50%, -50%);
    width:15%;
    height:auto; 
}
.hide {
    display:none;
}
.faded {
    opacity:0;
}

@media (orientation:landscape){
  #inner {
    height:100%;
    width:auto;
  }
  #background {
    height:100%;
    width:auto;
  }
  #container {
    height:100%;
    width:auto;
  }
}