@import url('https://fonts.googleapis.com/css?family=Raleway');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  transition: ease-in-out .5s;
  font-family: 'Raleway', sans-serif;
  text-align: center;
}
div.container {
  width: 83.07vw;
  height: 55.98vw;
  max-width: 923px;
  max-height: 622px; 
  position: relative;
  /*background-image: url("/img/6.png");  transition: background 3s ease;*/
  background: rgba(255, 255, 255, 0);
  background-size: contain;
  margin: 5% auto;
}
h1 {
  margin-top: 1%;
}
@media screen and (max-height: 420px) {
  div.container {
    width: 101.53vh;
    height: 68.42vh;
  }
}
.component {
  /*border: 1px dotted;*/
  position: absolute;
  background-size: cover;
}
#ele1 {
  height: 29.58%;
  width: 37.16%;
  top: 7%;
  left: 3.5%;
  background-image: url("../img/1-2.png");
}
#ele2 {
  height: 50.64%;
  width: 48%;
  left: 43%;
  top: -8%;
  background-image: url("../img/2-2.png");
}
#ele3 {
  height: 60.61%;
  width: 20.26%;
  top: 41.7%;
  left: -2.2%;
  background-image: url("../img/3-2.png");
}
#ele4 {
  height: 59.16%;
  width: 67.17%;
  left: 20.5%;
  top: 50.8%;
  background-image: url("../img/4-2.png");
}
#ele5 {
  height: 49.84%;
  width: 17.33%;
  top: 47.8%;
  left: 90.3%;
  background-image: url("../img/5-2.png");
}
.clicked {
  border: none;
}