body {

  justify-content: center;
  align-items: center;
  height: 100vh;
  
  font-family: 'Open Sans', sans-serif;
  background: #222;
  background-image: url('https://source.unsplash.com/1920x1080/?black');
  

  margin: 0;
  overflow-x: hidden;
}

.card {
  background: rgba(138,130,130,0.50);
  display: flex;
  
  margin: auto;
  margin-top: 1em;

  padding: 2em;
  border-radius: 30px;
  
  width: 100%;
  max-width: 420px;
  max-height: 79%;
  
  justify-self: center;
  align-self: center;

}

.background {

  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  
}

.lights {
  position: absolute;
  background: transparent;
}

button {
  border: none;
  background: transparent;
  outline: none;
  color: #fff;
}

.switch {
  
  display: inline-block;

  background: url("../images/off.png");
  cursor: pointer;
  border: none;
  box-shadow: none;
  outline: none;

  position: absolute;
  width: 70px;
  height: 70px;
  background-size: contain;

}

.switch:before {
  border: none;
  box-shadow: none;
  outline: none;
}

.switch.active {
  
  display: inline-block;

  background: transparent;
  background: url("../images/on.png");
  border: none;
  box-shadow: none;
  outline: none;

  width: 70px;
  height: 70px;
  background-size: contain;

}

.switch:active {
  background: url("../images/on.png");
  border: none;
  box-shadow: none;
  outline: none;

  width: 70px;
  height: 70px;
  background-size: contain;

}

.switch.active:active {
  border: none;
  box-shadow: none;
  outline: none;
}

#dinette {
  top: 40px;
  left: 215px;
}
#kitchen {
  top: 265px;
  left: 30px;
}
#main {
  top: 200px;
  left: 175px;
}
#hall {
  top: 410px;
  left: 175px;
}
#sink {
  top: 478px;
  left: 27px;
}
#bathroom {
  top: 610px;
  left: 60px;
}
#bed {
  top: 540px;
  left: 205px;
}
#reading {
  top: 650px;
  left: 260px;
}


@media only screen and (min-width: 428px) and (orientation: portrait)
{ 

  .card {
    background: rgba(138,130,130,0.50);
    display: flex;
    
    margin: auto;
    margin-top: 1em;
  
    padding: 1em;
    border-radius: 30px;
    
    width: 100%;
    max-width: 350px;
    max-height: 70%;
    
    justify-self: center;
    align-self: center;
  
  }

  .background {

    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    
    max-width: 100%;

  }

  .switch {
    width: 55px;
    height: 55px;
  }
  
  .switch.active {
    width: 55px;
    height: 55px;
  }
  
  .switch:active {
    width: 55px;
    height: 55px;
  }

#dinette {
  top: 33px;
  left: 183px;
}
#kitchen {
  top: 210px;
  left: 20px;
}
#main {
  top: 150px;
  left: 145px;
}
#hall {
  top: 320px;
  left: 145px;
}
#sink {
  top: 390px;
  left: 18px;
}
#bathroom {
  top: 500px;
  left: 50px;
}
#bed {
  top: 440px;
  left: 170px;
}
#reading {
  top: 530px;
  left: 225px;
}

}